<!-- 
  TODO 应付模版：编辑内容
 -->
<template>
  <div class="payable-content">
    <div>
      模板：
      <BaseSelect
        v-model:modelValue="payableState.referencePayableModelId"
        :clearable="true"
        :options="templateStore.getPayableIdList"
        placeholder="请输入模版"
        class="product-name"
        @change="changePayableModeData"
      />
    </div>
    <div class="title">临时费用设置</div>
    <VxeBasicTable 
      v-bind="temporaryFeeOptions" 
      ref="xTemporaryFeeRef"
    >
      <!-- 渠道商 -->
      <template #default_providerId="{ row }">
        {{ row.providerName }}
      </template>
      <template #edit_providerId="scope">
        <BaseSelect
          v-model:modelValue="scope.row.providerId"
          :filterable="true"
          :options="allProvidersList"
          remote
          @change="
            changeSelectId($event, scope, allProvidersList, 'providerName')
          "
        />
      </template>
      <!-- 费项类型 -->
      <template #default_feeItemCategory="{ row }">
        {{ deal_FindItemName(row.feeItemCategoryId, feeItemCategoryList) }}
      </template>
      <template #edit_feeItemCategory="scope">
        <el-select
          v-model="scope.row.feeItemCategoryId"
          @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, costFeeItemList) }}
      </template>
      <template #edit_feeItemId="scope">
        <BaseSelect
          v-model:modelValue="scope.row.feeItemId"
          :filterable="true"
          :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">
        <BaseSelectV2
          v-model:modelValue="scope.row.productId"
          clearable
          :options="deliverChannelList"
          popper-class="booking-agentId-w"
          :height="272"
          placeholder="产品名称"
          @change="
            changeSelectId($event, scope, deliverChannelList, 'productName')
          "
        />
      </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="payableSelectState.providerId"
        :clearable="true"
        :filterable="true"
        :is-key-object="true"
        :options="allProvidersList"
        placeholder="渠道商"
        class="product-name"
        @change="hanleChannelFeesSetBind"
      />
    </div>
    <!-- 渠道商费用绑定列表数据 -->
    <VxeBasicTable
      v-bind="providerIdFeeOptions"
      ref="xProviderIdFeeRef"
      @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"
          class="width-100"
          @change="updateStatusProviderId(scope)"
          @visible-change="providerIdFeeSetVisibleChange($event, scope.row)"
        >
          <el-option
            v-for="item in providerIdFeeSetCombination.feeItemCategoryRemainList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </template>
      <!-- 产品名称 -->
      <template #edit_productId="scope">
        <BaseSelect
          v-model:modelValue="scope.row.productId"
          class="width-100"
          :filterable="true"
          :options="deliverChannelList"
          remote
          @change="
            changeSelectId($event, scope, deliverChannelList, 'productName', false)
          "
        />
      </template>
      <!-- 计抛系数 -->
      <!-- <template #edit_weightRatio="scope">
        <el-input
          v-model="scope.row.weightRatio"
          v-clear-only-regex="/^\d*\.?\d{0,2}$/"
        />
      </template> -->
      <!-- 日期版本 -->
      <template #edit_dateVersion="scope">
        <BaseSelect
          class="select-w"
          v-model:modelValue="scope.row.dateVersion"
          :options="getCustomerFeeList"
          placeholder="日期版本"
          @change="changeCustomerFee($event, getCustomerFeeList, 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)"
        >
          删除
        </el-button>
      </template>
    </VxeBasicTable>
  </div>
  <!-- 成本费用设置 -->
  <!-- <AddEditProviderFeeSet ref="addEditProviderFeeSetRef" /> -->
</template>
<script lang="ts" setup>
import { VxeBasicTable } from "@/components/VxeTable";
import { Plus, Minus, Delete } from "@element-plus/icons-vue";
import BaseSelect from "@/components/QuerySelect/BaseSelect.vue";
import BaseSelectV2 from "@/components/QuerySelect/BaseSelectV2.vue";
// import DropDownButtons from "@/components/DropDownButtons/index.vue";
// import AddEditProviderFeeSet from "@/views/business/providerFeeSet/AddEditProviderFeeSet.vue";
import { usePayableModelAddModel } from "@/composables/business/feeModel/payableModel/usePayableModelAddModel";
import { deal_FindItemName } from "@/utils/dealFindData";
import { feeItemFindName } from "@/utils/feeSeting/data";
import { feeFieldsObj, fieldsObj } from "@/composables/business/feeModel/base/data";
import { useChangeSelectId, usePayableSelectBind } from "@/composables/lading/common/useSelectBindFee";
import { useFeeCombinationFiltering } from "@/composables/lading/common/useFeeCombinationFiltering";
import { useFeeDateVersionList } from "@/composables/lading/common/useFeeDateVersionList";

const props = defineProps<{
  isShowView: boolean;
  payableForm: Recordable;
}>();
const {
  temporaryFeeOptions,
  providerIdFeeOptions,
  xTemporaryFeeRef,
  xProviderIdFeeRef,
  payableState,
  getDateVersionList,
  resetTable,
  addTable,
  deleteTable,
  getConfirmData,
  updateStatusTemporary,
  updateStatusProviderId,
  hanleBlurCalculator,
  hanleChangeAction,
  changeSpecialFeeItem,
  changeCustomerFee,
  changePayableModeData,
  feeItemCategoryList,
  costFeeItemList,
  deliverChannelList,
  currencyList,
  countTypeList,
  allProvidersList,
  specialFeeItemList,
  templateStore,
} = usePayableModelAddModel(true, props);
const {
  payableSelectState,
  getProviderIdList,
  hanleProductIdBind,
  hanleCustomerFeeSetBind,
  hanleChannelFeesSetBind,
  payableSelectReset,
} = usePayableSelectBind(xProviderIdFeeRef);
// 产品名称及校验
const { changeSelectId } = useChangeSelectId(updateStatusTemporary, updateStatusProviderId)

// 临时费项重复过滤
const {
  feeItemCategoryVisibleChange,
  feeItemIdVisibleChange,
  stateFeeCombination,
} = useFeeCombinationFiltering(
  feeItemCategoryList,
  costFeeItemList,
  temporaryFeeOptions
);
// 显示对应的日期版本
const { feeCellClick, getCustomerFeeList } = useFeeDateVersionList(
  getDateVersionList,
  "payable"
);
// 渠道商费用绑定费项重复过滤
const {
  feeItemCategoryVisibleChange: providerIdFeeSetVisibleChange,
  stateFeeCombination: providerIdFeeSetCombination
} = useFeeCombinationFiltering(
  feeItemCategoryList,
  getProviderIdList,
  providerIdFeeOptions,
  'providerId'
);
// 重置
const reset = () => {
  payableSelectReset();
  resetTable();
};

//父组件调用子组件显示弹框
//暴露出去给外部使用
defineExpose({
  reset,
  getConfirmData,
});
</script>
<style lang="scss" scoped>
.payable-content {
  .title {
    font-weight: bold;
    padding: 6px 0;
  }

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

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