<!-- 
  提单-应收费用
 -->
<template>
  <div class="receivable-content">
    <div>
      模板：
      <BaseSelect
        v-model:modelValue="receivabState.referenceReceivableModelId"
        :clearable="true"
        :filterable="true"
        :options="templateStore.getReceivableIdList"
        placeholder="请选择模版"
        class="product-name"
        @change="changeReceivableModelData"
      />
    </div>
    <div class="title">临时费用设置</div>
    <VxeBasicTable v-bind="temporaryFeeOptions" ref="xTemporaryFeeRef">
      <!-- 费项类型 -->
      <template #default_feeItemCategory="{ row }">
        {{ deal_FindItemName(row.feeItemCategoryId, feeItemCategoryList) }}
      </template>
      <template #edit_feeItemCategory="scope">
        <el-select
          v-model="scope.row.feeItemCategoryId"
          @click.stop
          @change="updateStatusTemporary(scope)"
          @visible-change="feeItemCategoryVisibleChange($event, scope.row)"
        >
          <el-option
            v-for="item in stateFeeCombination.feeItemCategoryRemainList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </template>
      <!-- 费用类型 -->
      <template #default_feeItemId="{ row }">
        {{ feeItemFindName(row.feeItemId, feeItemLists) }}
      </template>
      <template #edit_feeItemId="scope">
        <BaseSelect
          v-model:modelValue="scope.row.feeItemId"
          :fields-obj="feeFieldsObj"
          :options="stateFeeCombination.feeItemIdRemainList"
          @change="updateStatusTemporary(scope)"
          @visible-change="feeItemIdVisibleChange($event, scope.row)"
        />
      </template>
      <!-- 产品名称 -->
      <template #default_productId="{ row }">
        {{ row.productName }}
      </template>
      <template #edit_productId="scope">
        <BaseSelect
          v-model:modelValue="scope.row.productId"
          :options="productList"
          remote
          @change="changeProductId($event, scope)"
        />
      </template>
      <!-- 算法 -->
      <template #default_countModel="{ row }">
        <div v-if="row.countModel">
          {{ deal_FindItemName(row.countModel.countType, countTypeList) }}
        </div>
      </template>
      <template #edit_countModel="scope">
        <el-select
          v-model="scope.row.countModel.countType"
          @change="updateStatusTemporary(scope)"
        >
          <el-option
            v-for="item in countTypeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            @click="hanleBlurCalculator(scope.row)"
          />
        </el-select>
      </template>
      <!-- 计算优先级 -->
      <template #edit_countOrderNumber="scope">
        <el-input
          v-model="scope.row.countOrderNumber"
          @change="updateStatusTemporary(scope)"
        />
      </template>
      <!-- 参数 -->
      <template #edit_parameter="scope">
        <el-input
          v-model="scope.row.parameter"
          @change="updateStatusTemporary(scope)"
        />
      </template>
      <!-- 价格 -->
      <template #edit_price="scope">
        <el-input
          v-model="scope.row.offerPrice"
          v-clear-only-regex="/^\d*\.?\d{0,3}$/"
          @change="updateStatusTemporary(scope)"
        />
      </template>
      <!-- 结算价 -->
      <template #edit_discount="scope">
        <el-input
          v-model="scope.row.organizationOfferPrice"
          v-clear-only-regex="/^\d*\.?\d{0,3}$/"
          @change="updateStatusTemporary(scope)"
        />
      </template>
      <!-- 币种 -->
      <template #default_currencyCode="{ row }">
        {{ deal_FindItemName(row.currencyCode, currencyList) }}
      </template>
      <template #edit_currencyCode="scope">
        <el-select
          v-model="scope.row.currencyCode"
          @change="updateStatusTemporary(scope)"
        >
          <el-option
            v-for="item in currencyList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </template>
      <!-- 操作 -->
      <template #header_actions>
        <el-button
          v-show="isShowView"
          type="primary"
          :icon="Plus"
          class="width-100"
          link
          @click="addTable('temporary')"
        />
      </template>
      <template #default_actions="scope">
        <el-button
          v-show="isShowView"
          type="danger"
          :icon="Minus"
          class="width-100"
          link
          @click="deleteTable('temporary', scope)"
        />
      </template>
    </VxeBasicTable>
    <div class="title">
      客户费用绑定
      <BaseSelect
        v-show="isShowView"
        v-model:modelValue="receivableSelectState.productId"
        :clearable="true"
        :filterable="true"
        :remote="true"
        :is-key-object="true"
        :options="productList"
        placeholder="产品名称"
        class="product-name"
        @change="
          hanleCustomerFeeSetProductBind(
            $event,
            BaseFeeSetProductBind.CUSTOMER_FEE_BINDING
          )
        "
      />
    </div>
    <!-- 客户费用绑定列表数据 -->
    <VxeBasicTable
      v-bind="productFeeOptions"
      ref="xProductFeeRef"
      @cell-click="feeCellClick"
    >
      <!-- 费项类型 -->
      <template #default_feeItemCategory="{ row }">
        {{
          deal_FindItemName(
            String(row.feeItemCategoryId), 
            feeItemCategoryList
          )
        }}
      </template>
      <template #edit_feeItemCategory="scope">
        <el-select
          v-model="scope.row.feeItemCategoryId"
          @change="updateStatusProduct(scope)"
          @visible-change="customerFeeSetVisibleChange($event, scope.row)"
        >
          <el-option
            v-for="item in customerFeeSetCombination.feeItemCategoryRemainList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </template>
      <!-- 日期版本 -->
      <template #edit_dateVersion="scope">
        <BaseSelect
          class="select-w"
          v-model:modelValue="scope.row.dateVersion"
          :options="getCustomerFeeList"
          placeholder="日期版本"
          @change="
            changeCustomerFee($event, getCustomerFeeList, 'product', scope)
          "
        />
      </template>
      <!-- 特殊费用类型 -->
      <template #edit_specialFeeItem="{ row }">
        <BaseSelect
          class="select-w"
          v-model:modelValue="row.specialFeeItemList"
          clearable
          multiple
          collapse-tags
          :options="specialFeeItemList"
          placeholder="特殊费用类型"
          @change="changeSpecialFeeItem($event, row)"
        />
      </template>
      <!-- 操作 -->
      <template #default_actions="scope">
        <el-button
          v-show="isShowView"
          type="danger"
          :icon="Delete"
          link
          @click="
            hanleChangeAction(scope, BaseFeeSetProductBind.CUSTOMER_FEE_BINDING)
          "
        >
          删除
        </el-button>
      </template>
    </VxeBasicTable>
    <div class="title">
      结算费用绑定
      <BaseSelect
        v-show="isShowView"
        v-model:modelValue="receivableSelectState.settleProductId"
        :clearable="true"
        :remote="true"
        :is-key-object="true"
        :options="productList"
        placeholder="产品名称"
        class="product-name"
        @change="
          hanleCustomerFeeSetProductBind(
            $event,
            BaseFeeSetProductBind.SETTLEMENT_FEE_BINDING
          )
        "
      />
    </div>
    <!-- 结算费用绑定列表数据 -->
    <VxeBasicTable
      v-bind="closingCostFeeOptions"
      ref="xClosingCostFeeRef"
      @cell-click="feeCellClick"
    >
      <!-- 费项类型 -->
      <template #default_feeItemCategory="{ row }">
        {{
          deal_FindItemName(String(row.feeItemCategoryId), feeItemCategoryList)
        }}
      </template>
      <template #edit_feeItemCategory="scope">
        <el-select
          v-model="scope.row.feeItemCategoryId"
          @change="updateStatusClosingCost(scope)"
          @visible-change="settleCustomerFeeSetVisibleChange($event, scope.row)"
        >
          <el-option
            v-for="item in settleCustomerFeeSetCombination.feeItemCategoryRemainList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </template>
      <!-- 日期版本 -->
      <template #edit_dateVersion="scope">
        <BaseSelect
          class="select-w"
          v-model:modelValue="scope.row.dateVersion"
          :options="getCustomerFeeList"
          placeholder="日期版本"
          @change="
            changeCustomerFee($event, getCustomerFeeList, 'closingCost', scope)
          "
        />
      </template>
      <!-- 特殊费用类型 -->
      <template #edit_specialFeeItem="{ row }">
        <BaseSelect
          class="select-w"
          v-model:modelValue="row.specialFeeItemList"
          multiple
          collapse-tags
          :options="specialFeeItemList"
          placeholder="特殊费用类型"
          @change="changeSpecialFeeItem($event, row)"
        />
      </template>
      <!-- 操作 -->
      <template #default_actions="scope">
        <el-button
          v-show="isShowView"
          type="danger"
          :icon="Delete"
          link
          @click="
            hanleChangeAction(
              scope,
              BaseFeeSetProductBind.SETTLEMENT_FEE_BINDING
            )
          "
        >
          删除
        </el-button>
      </template>
    </VxeBasicTable>
  </div>
  <!-- 客户费用设置 -->
  <AddandEditCustomerFeeSetDetail ref="adCustomerFeeSetDetailRef" />
</template>
<script lang="ts" setup>
import { VxeBasicTable } from "@/components/VxeTable";
import BaseSelect from "@/components/QuerySelect/BaseSelect.vue";
// import DropDownButtons from "@/components/DropDownButtons/index.vue";
import AddandEditCustomerFeeSetDetail from "@/views/customerfeeset/AddandEditCustomerFeeSetDetail.vue";
import { useLadingBillMoneySetModel } from "@/composables/lading/useLadingListModel";
import { Plus, Minus, Delete } from "@element-plus/icons-vue";
import { deal_FindItemName } from "@/utils/dealFindData";
import { feeFieldsObj } from "@/composables/business/feeModel/base/data";
import { feeItemFindName } from "@/utils/feeSeting/data";
import { useReceivableSelectBind } from "@/composables/lading/common/useSelectBindFee";
import { useFeeCombinationFiltering } from "@/composables/lading/common/useFeeCombinationFiltering";
import { useFeeDateVersionList } from "@/composables/lading/common/useFeeDateVersionList";
import { BaseFeeSetProductBind } from "@/type/BaseLadingBill";

const props = defineProps<{
  isShowView: boolean;
  receivableForm: Recordable; //数据源
}>();
const {
  temporaryFeeOptions,
  productFeeOptions,
  closingCostFeeOptions,
  xTemporaryFeeRef,
  xProductFeeRef,
  xClosingCostFeeRef,
  adCustomerFeeSetDetailRef,
  fieldsObj,
  receivabState,
  getDateVersionList,
  addTable,
  deleteTable,
  getConfirmData,
  hanleBlurCalculator,
  hanleChangeAction,
  changeProductId,
  changeSpecialFeeItem,
  changeReceivableModelData,
  changeCustomerFee,
  updateStatusTemporary,
  updateStatusProduct,
  updateStatusClosingCost,
  feeItemCategoryList,
  feeItemLists,
  productList,
  countTypeList,
  currencyList,
  specialFeeItemList,
  templateStore,
  resetTable,
} = useLadingBillMoneySetModel(true, props);
// 下拉列表费用绑定
const {
  feeItemCategoryVisibleChange,
  feeItemIdVisibleChange,
  stateFeeCombination,
} = useFeeCombinationFiltering(
  feeItemCategoryList,
  feeItemLists,
  temporaryFeeOptions
);

const {
  receivableSelectState,
  getProductIdList,
  getSettleProductIdList,
  receivableSelectReset,
  hanleCustomerFeeSetProductBind,
} = useReceivableSelectBind(xProductFeeRef, xClosingCostFeeRef);
// 显示对应的日期版本
const { feeCellClick, getCustomerFeeList } = useFeeDateVersionList(
  getDateVersionList,
  "receivable"
);
// 客户费用绑定费项重复过滤
const {
  feeItemCategoryVisibleChange: customerFeeSetVisibleChange,
  stateFeeCombination: customerFeeSetCombination
} = useFeeCombinationFiltering(
  feeItemCategoryList,
  getProductIdList,
  productFeeOptions,
  'productId'
);
// 客户费用绑定费项重复过滤
const {
  feeItemCategoryVisibleChange: settleCustomerFeeSetVisibleChange,
  stateFeeCombination: settleCustomerFeeSetCombination
} = useFeeCombinationFiltering(
  feeItemCategoryList,
  getSettleProductIdList,
  closingCostFeeOptions,
  'productId'
);
// 重置
const reset = () => {
  receivableSelectReset();
  resetTable();
};
//父组件调用子组件显示弹框
//暴露出去给外部使用
defineExpose({
  reset,
  getConfirmData,
});
</script>
<style lang="scss" scoped>
.receivable-content {
  .title {
    font-weight: bold;
    padding: 6px 0;
  }

  .product-name {
    width: 256px;
    padding: 0 10px;
  }

  .select-w {
    width: 100%;
  }
}
</style>
