<template>
  <SysDialog
    :visible="dialog.visible"
    v-bind="getBindValue"
    :title="dialog.title"
    custom-class="add-receivable-modelSet"
    @onClose="onclose"
    @onConfirm="confirm"
  >
    <template #content>
      <!-- 表单数据 -->
      <el-form
        ref="formReceivableModelSetRef"
        :inline="true"
        :model="receivableModelSetDto"
        :rules="receivableModelSetRules"
        class="receivable-from"
      >
        <el-row>
          <el-col :span="7">
            <el-form-item
              label="模板名称："
              prop="modelName"
              :style="setFormItemWidth"
            >
              <el-input
                v-model="receivableModelSetDto.modelName"
                :disabled="!isShowView"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="备注："
              prop="remark"
              :style="setFormItemWidth"
            >
              <el-input
                v-model="receivableModelSetDto.remark"
                :disabled="!isShowView"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <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"
            @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"
            :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="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"
          :is-key-object="true"
          :options="productList"
          placeholder="产品名称"
          class="product-name"
          @change="
            hanleCustomerFeeSetProductBind(
              $event,
              BaseFeeSetProductBind.CUSTOMER_FEE_BINDING
            )
          "
        />
      </div>
      <!-- 客户费用绑定列表数据 -->
      <VxeBasicTable
        v-bind="productFeeOptions"
        ref="xProductFeeRef"
      >
        <!-- 费项类型 -->
        <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 #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"
          :filterable="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"
      >
        <!-- 费项类型 -->
        <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 #default_actions="scope">
          <el-button
            v-show="isShowView"
            type="danger"
            :icon="Delete"
            link
            @click="hanleChangeAction(scope, BaseFeeSetProductBind.SETTLEMENT_FEE_BINDING)"
          >
            删除
          </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" /> -->
  <!-- 客户费用设置 -->
  <AddandEditCustomerFeeSetDetail ref="adCustomerFeeSetDetailRef" />
</template>
<script lang="ts" setup>
import SysDialog from "@/components/SysDialog.vue";
import { VxeBasicTable } from "@/components/VxeTable";
import { useReceivableModelSetAdd } from "@/composables/business/feeModel/receivable/useReceivableModelSetAdd";
import { useLadingBillMoneySetModel } from "@/composables/lading/useLadingListModel";
import useDialog from "@/hooks/useDialog";
import BaseSelect from "@/components/QuerySelect/BaseSelect.vue";
// import FormulaModle from '@/components/feeset/FormulaModle.vue';
import { Plus, Minus, Delete } from "@element-plus/icons-vue";
import { reactive } from "vue";
import { deal_FindItemName } from "@/utils/dealFindData";
import { feeItemFindName } from "@/utils/feeSeting/data";
// import DropDownButtons from "@/components/DropDownButtons/index.vue";
import AddandEditCustomerFeeSetDetail from "@/views/customerfeeset/AddandEditCustomerFeeSetDetail.vue";
import { feeFieldsObj } from "@/composables/business/feeModel/base/data";
import { useReceivableSelectBind } from "@/composables/lading/common/useSelectBindFee";
import { useFeeCombinationFiltering } from "@/composables/lading/common/useFeeCombinationFiltering";
import { BaseFeeSetProductBind } from "@/type/BaseLadingBill";
import { useColWidth } from "@/hooks/useColWidth";

//弹框属性
const { dialog, onClose, onShow, setLoading } = useDialog();
// 弹框一些配置
const getBindValue = reactive({
  title: "新增应收模版",
  width: "72%",
  top: "5vh",
  height: 0,
  isFooter: true
});
const emit = defineEmits(["saveReceivableModel"]);
const { setFormItemWidth } = useColWidth()
// 表格
const {
  temporaryFeeOptions,
  productFeeOptions,
  closingCostFeeOptions,
  adCustomerFeeSetDetailRef,
  // fieldsObj,
  addTable,
  deleteTable,
  resetTable,
  hanleBlurCalculator,
  hanleChangeAction,
  changeProductId,
  xTemporaryFeeRef,
  updateStatusTemporary,
  updateStatusProduct,
  updateStatusClosingCost,
  xProductFeeRef,
  xClosingCostFeeRef,
  feeItemCategoryList,
  feeItemLists,
  productList,
  countTypeList,
  currencyList
} = useLadingBillMoneySetModel();
// 临时费用费项重复限制
const {
  feeItemCategoryVisibleChange,
  feeItemIdVisibleChange,
  stateFeeCombination
} = useFeeCombinationFiltering(
  feeItemCategoryList,
  feeItemLists,
  temporaryFeeOptions
);
const {
  receivableSelectState,
  getProductIdList,
  getSettleProductIdList,
  receivableSelectReset,
  hanleCustomerFeeSetProductBind
} = useReceivableSelectBind(xProductFeeRef, xClosingCostFeeRef);
// 客户费用绑定费项重复过滤
const {
  feeItemCategoryVisibleChange: customerFeeSetVisibleChange,
  stateFeeCombination: customerFeeSetCombination
} = useFeeCombinationFiltering(
  feeItemCategoryList,
  getProductIdList,
  productFeeOptions,
  'productId'
);
// 客户费用绑定费项重复过滤
const {
  feeItemCategoryVisibleChange: settleCustomerFeeSetVisibleChange,
  stateFeeCombination: settleCustomerFeeSetCombination
} = useFeeCombinationFiltering(
  feeItemCategoryList,
  getSettleProductIdList,
  closingCostFeeOptions,
  'productId'
);
// 重置
const reset = () => {
  receivableSelectReset();
  resetTable();
};
const {
  show,
  onclose,
  confirm,
  isShowView,
  formReceivableModelSetRef,
  receivableModelSetDto,
  receivableModelSetRules
} = useReceivableModelSetAdd(
  dialog,
  onClose,
  onShow,
  xTemporaryFeeRef,
  xProductFeeRef,
  xClosingCostFeeRef,
  temporaryFeeOptions,
  productFeeOptions,
  closingCostFeeOptions,
  reset,
  setLoading,
  emit
);

//父组件调用子组件显示弹框
//暴露出去给外部使用
defineExpose({
  show
});
</script>
<style lang="scss">
.add-receivable-modelSet {
  .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>
