<!-- 
  TODO 费用模版：应付模版
 -->
<template>
  <SysDialog
    :visible="dialog.visible"
    v-bind="getBindValue"
    :title="dialog.title"
    custom-class="payable-model-add"
    @onClose="onclose"
    @onConfirm="confirm"
  >
    <template #content>
      <!-- 表单数据 -->
      <el-form
        ref="formReceivableModelSetRef"
        :inline="true"
        :model="payableModelDto"
        :rules="payableModelRules"
        class="receivable-from"
      >
        <el-row>
          <el-col :span="7">
            <el-form-item
              label="模板名称："
              prop="modelName"
              :style="setFormItemWidth"
            >
              <el-input
                v-model="payableModelDto.modelName"
                :disabled="!isShowView"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="备注："
              prop="remark"
              :style="setFormItemWidth"
            >
              <el-input
                v-model="payableModelDto.remark"
                :disabled="!isShowView"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 表格数据 -->
      <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">
          <BaseSelect
            v-model:modelValue="scope.row.productId"
            :filterable="true"
            :options="deliverChannelList"
            remote
            @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"
            style="width: 80%;"
            @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="payableModelState.providerId"
          :clearable="true"
          :filterable="true"
          :is-key-object="true"
          :options="allProvidersList"
          placeholder="渠道商"
          class="product-name"
          @change="hanleChannelFeesSetBind"
        />
      </div>
      <!-- 渠道商费用绑定列表数据 -->
      <VxeBasicTable
        v-bind="providerIdFeeOptions"
        ref="xProviderIdFeeRef"
      >
        <!-- 费项类型 -->
        <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 #default_actions="scope">
          <el-button
            v-show="isShowView"
            type="danger"
            :icon="Delete"
            link
            @click="hanleChangeAction(scope)"
          >
            删除
          </el-button>
        </template>
      </VxeBasicTable>
    </template>
    <template #defineFooter>
      <div class="customer-feeSet-footer">
        <el-button
          type="danger"
          @click="onclose"
        >
          {{ isShowView ? "取消" : "关闭" }}
        </el-button>
        <el-button
          v-show="isShowView"
          :loading="dialog.confirmLoading"
          type="primary"
          @click="confirm"
        >
          保存
        </el-button>
      </div>
    </template>
  </SysDialog>
  <!-- 计算公式-弹框 -->
  <!-- <FormulaModle ref="formulaModleRef" /> -->
  <!-- 成本费用设置 -->
  <!-- <AddEditProviderFeeSet ref="addEditProviderFeeSetRef" /> -->
</template>
<script lang="ts" setup>
import { reactive } from "vue";
import SysDialog from "@/components/SysDialog.vue";
import { VxeBasicTable } from "@/components/VxeTable";
import { Plus, Minus, Delete } from "@element-plus/icons-vue";
import BaseSelect from "@/components/QuerySelect/BaseSelect.vue";
// import DropDownButtons from '@/components/DropDownButtons/index.vue';
// import FormulaModle from '@/components/feeset/FormulaModle.vue';
// import AddEditProviderFeeSet from "@/views/business/providerFeeSet/AddEditProviderFeeSet.vue";
import useDialog from "@/hooks/useDialog";
import { usePayableModelAddModel } from "@/composables/business/feeModel/payableModel/usePayableModelAddModel";
import { usePayableModelAdd } from "@/composables/business/feeModel/payableModel/usePayableModelAdd";
import { useVxeGridHanleHooks } from "@/components/VxeTable/hooks";
import { deal_FindItemName } from "@/utils/dealFindData";
import { feeItemFindName } from "@/utils/feeSeting/data";
import { feeFieldsObj } from "@/composables/business/feeModel/base/data";
import { useFeeCombinationFiltering } from "@/composables/lading/common/useFeeCombinationFiltering";
import { useColWidth } from "@/hooks/useColWidth";
import { useChangeSelectId } from "@/composables/lading/common/useSelectBindFee";

//弹框属性
const { dialog, onClose, onShow, setLoading } = useDialog();
// 弹框一些配置
const getBindValue = reactive({
  title: "新增应收模版",
  width: "72%",
  top: "5vh",
  height: 0,
  isFooter: true
});
const emit = defineEmits(["savePayableModel"]);

const { setFormItemWidth } = useColWidth()
const {
  temporaryFeeOptions,
  providerIdFeeOptions,
  xTemporaryFeeRef,
  xProviderIdFeeRef,
  // addEditProviderFeeSetRef,
  resetTable,
  addTable,
  deleteTable,
  hanleBlurCalculator,
  hanleChangeAction,
  feeItemCategoryList,
  costFeeItemList,
  deliverChannelList,
  currencyList,
  countTypeList,
  allProvidersList
} = usePayableModelAddModel();
// vxe-grid操作事件
const { updateStatus: updateStatusTemporary } =
  useVxeGridHanleHooks(xTemporaryFeeRef); //临时费用
const { updateStatus: updateStatusProviderId } =
  useVxeGridHanleHooks(xProviderIdFeeRef); //渠道商
// 产品名称及校验
const { changeSelectId } = useChangeSelectId(updateStatusTemporary, updateStatusProviderId)

// 临时费项重复过滤
const {
  feeItemCategoryVisibleChange,
  feeItemIdVisibleChange,
  stateFeeCombination
} = useFeeCombinationFiltering(
  feeItemCategoryList,
  costFeeItemList,
  temporaryFeeOptions
);

const {
  show,
  onclose,
  confirm,
  formReceivableModelSetRef,
  payableModelDto,
  payableModelState,
  payableModelRules,
  // hanleProductIdBind,
  hanleChannelFeesSetBind,
  getProviderIdList,
  isShowView
} = usePayableModelAdd(
  dialog,
  onClose,
  onShow,
  xTemporaryFeeRef,
  xProviderIdFeeRef,
  temporaryFeeOptions,
  providerIdFeeOptions,
  resetTable,
  setLoading,
  emit
);
// 渠道商费用绑定费项重复过滤
const {
  feeItemCategoryVisibleChange: providerIdFeeSetVisibleChange,
  stateFeeCombination: providerIdFeeSetCombination
} = useFeeCombinationFiltering(
  feeItemCategoryList,
  getProviderIdList,
  providerIdFeeOptions,
  'providerId'
);

//父组件调用子组件显示弹框
//暴露出去给外部使用
defineExpose({
  show
});
</script>
<style lang="scss">
.payable-model-add {
  .title {
    font-weight: bold;
    padding: 10px 0;
  }
  .product-name {
    width: 256px;
    padding: 0 10px;
  }
  .el-dialog__footer {
    position: sticky;
    bottom: 0;
    background-color: #ffffff;
    z-index: 99;
  }
}
</style>
