<template>
  <SysDialog
    top="5vh"
    :title="dialog.title"
    :width="1200"
    :height="0"
    :visible="dialog.visible"
    :confirm-loading="dialog.confirmLoading"
    :is-footer="true"
    @onClose="clearClose"
    @onConfirm="confirm"
  >
    <template #content>
      <el-form
        ref="addCustomerFeeSetForm"
        class="add-customer-feeSet-form"
        :model="addModel"
        :rules="rules"
        label-width="100px"
      >
        <el-row>
          <el-col :span="12" :offset="0">
            <el-form-item prop="feeSetName" label="费用名称">
              <el-input
                v-model="addModel.feeSetName"
                :disabled="isActiveFlagStatus"
                placeholder="请输入费用名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item prop="productId" label="产品">
              <el-select
                v-model="addModel.productId"
                clearable
                :filterable="true"
                placeholder="请选择产品"
                :filter-method="filterMethod"
                :disabled="isDisabled || isDisabledBeginDate"
                class="feeset-item"
                @change="changeProductId"
              >
                <el-option
                  v-for="item in productSelectList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  @click="hanleChangeProduct(item)"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" :offset="0">
            <el-form-item prop="orgId" label="分公司" :rules="orgIdRules">
              <el-select
                v-model="addModel.orgId"
                clearable
                :filterable="true"
                placeholder="请选择分公司"
                :disabled="isDisabled || getDisabledSuggested || isDisabledBeginDate"
                class="feeset-item"
                @change="changeOrgId"
              >
                <el-option
                  v-for="item in getOrgSelectList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item
              prop="customerId"
              label="客户"
              :rules="customerIdRules"
            >
              <el-select
                v-model="addModel.customerId"
                clearable
                :filterable="true"
                placeholder="请选择客户"
                :disabled="getDisabledSuggested || isDisabledBeginDate"
                @change="
                  changeCustomerSelect(
                    $event,
                    customerSelectList as ListIitem[]
                  )
                "
                class="feeset-item"
              >
                <el-option
                  v-for="item in customerSelectList"
                  :key="item.value"
                  :label="item.label"
                  :value="Number(item.value)"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" :offset="0">
            <el-form-item prop="feeSetType" label="费用类型">
              <el-select
                v-model="addModel.feeSetType"
                clearable
                :filterable="true"
                placeholder="请选择费用类型"
                :disabled="isDisabled || isDisabledBeginDate"
                class="feeset-item"
                @change="changeFeeSetType"
              >
                <el-option
                  v-for="item in feeSetTypeSelectList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item prop="beginDate" label="时间">
              <el-date-picker
                v-if="isRecalculate"
                v-model="beginAndEndDateArr"
                type="daterange"
                start-placeholder="生效时间"
                end-placeholder="失效时间"
                style="width: 100%"
                @change="changeBeginAndEndDate"
              />
              <el-date-picker
                v-else
                v-model="addModel.beginDate"
                :disabled="isEditStatus"
                type="date"
                placeholder="生效时间"
                :disabled-date="disabledCurrentDate"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-show="getIsShowFeeSetType">
          <el-col :span="12">
            <el-form-item prop="groupId" label="分组名称" :rules="groupIdRules">
              <el-tree-select
                v-model="addModel.groupId"
                :data="groupSelectList"
                :filterable="true"
                :clearable="true"
                :check-strictly="true"
                placeholder="请选择分组"
                style="width: 100%"
                @change="hanleChangeGroup"
                @clear="clearGroup"
                :disabled="addModelState.groupLoading || getDisabledSuggested || isDisabledBeginDate"
              />
              <!-- <el-select
                v-model="addModel.groupId"
                :clearable="true"
                :filterable="true"
                placeholder="请选择分组"
                @change="hanleChangeGroup"
                style="width: 100%"
                @clear="clearGroup"
                :disabled="isDisabled || addModelState.groupLoading || getDisabledSuggested"
              >
                <el-option
                  v-for="item in groupSelectList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select> -->
              <el-button
                type="primary"
                :loading="addModelState.groupLoading"
                link
              />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="4" class="add-customer">
            <el-button
              link
              type="danger"
              :icon="Delete"
              :loading="addModelState.checkLoading"
              @click="hanleDeleteCustomer"
              :disabled="isDeleteCustomer || getDisabledSuggested || isDisabledBeginDate"
            >
              删除分组
            </el-button>
            <el-button
              type="primary"
              :icon="Edit"
              link
              @click="hanleFocusCustomer"
              :disabled="getDisabledSuggested || isDisabledBeginDate"
            >
              设置分组
            </el-button>
          </el-col> -->
        </el-row>
        <!-- <el-form-item
          v-show="isFeeSetTypeChannel"
          prop="recommendFeeSet"
          label="是否建议价"
          :rules="recommendFeeSetRules"
        >
          <el-checkbox 
            size="medium" 
            v-model="addModel.recommendFeeSet" 
            :checked="!!addModel.recommendFeeSet"
            @change="changeRecommendFeeSet">
            {{
              addModel.recommendFeeSet ? "是" : "否"
            }}
          </el-checkbox>
        </el-form-item> -->
        <el-form-item
          prop="recalculate"
          label="是否重算"
          v-show="isRecalculate"
        >
          <el-checkbox :model-value="isRecalculate" disabled>{{
            isRecalculate ? "是" : "否"
          }}</el-checkbox>
        </el-form-item>
        <el-form-item v-show="getCustomerArr.length > 0 && getIsShowFeeSetType">
          <el-divider content-position="left">
            {{ addModel.groupName }}（所属客户）
          </el-divider>
          <div class="customer-list-warp">
            <div
              v-for="(item, index) in getCustomerArr"
              :key="item"
              class="single-line item"
              :title="item"
            >
              {{ index + 1 }}、{{ item }}
            </div>
          </div>
        </el-form-item>
      </el-form>

      <!-- 设置客户 -->
      <AddCustomerFeeSet
        ref="refAddCustomerFeeSet"
        :customer-list="customerSelectList"
        :org-select-list="orgSelectList"
        :group-select-list="groupSelectList"
        :org-id="addModel.orgId"
        @save-feeset-customer="hanleSaveFeesetCustomer"
      ></AddCustomerFeeSet>
    </template>
    <template #defineFooter>
      <span class="dialog-footer">
        <el-button type="danger" @click="clearClose">
          {{ !isActiveFlagStatus ? "取消" : "关闭" }}
        </el-button>
        <el-button
          type="primary"
          :loading="dialog.confirmLoading"
          @click="confirm"
          v-show="!isActiveFlagStatus"
          >确定</el-button
        >
      </span>
    </template>
  </SysDialog>
</template>
<script setup lang="ts">
import SysDialog from "@/components/SysDialog.vue";
import useDialog from "@/hooks/useDialog";
import {
  useChangeCustomerRules,
  useCustomerFeeSetBaseModel,
  useCustomerOrgInfo,
} from "@/composables/customerfeeset/useBaseModel";
import useAddCustomerFeeSet from "@/composables/customerfeeset/useAddCustomerFeeSet";
import AddCustomerFeeSet from "./AddCustomerFeeSet.vue";
import { Edit, Delete } from "@element-plus/icons-vue";
import { ListIitem } from "@/api/base/BaseDataModel";
//弹框属性
const { dialog, onClose, onShow, setLoading } = useDialog();

//产品下拉列表框
const props = defineProps({
  productSelectList: { type: Object },
  groupSelectList: { type: Object },
  orgSelectList: { type: Object },
  customerSelectList: { type: Object },
  feeSetTypeSelectList: { type: Object },
});
//声明事件
const emit = defineEmits(["save", "filterMethod", "changeSelect"]);

// 过滤事件
const filterMethod = (val: string) => emit("filterMethod", val);

const { rules } = useCustomerFeeSetBaseModel();
const {
  confirm,
  show,
  clearClose,
  addModel,
  beginAndEndDateArr,
  addCustomerFeeSetForm,
  isDisabled,
  isDeleteCustomer,
  isEditStatus,
  isActiveFlagStatus,
  refAddCustomerFeeSet,
  hanleFocusCustomer,
  hanleDeleteCustomer,
  hanleSaveFeesetCustomer,
  changeCustomerSelect,
  hanleChangeProduct,
  changeBeginAndEndDate,
  isCustomerIdList,
  changeOrgId,
  isRecalculate,
  hanleChangeGroup,
  addModelState,
  getCustomerArr,
  clearGroup,
  getIsShowFeeSetType,
  changeFeeSetType,
  changeProductId,
} = useAddCustomerFeeSet(dialog, onClose, onShow, setLoading, emit, props);
const { getOrgSelectList, orgIdRules } = useCustomerOrgInfo(props);
const { 
  customerIdRules, 
  groupIdRules, 
  getDisabledSuggested,
  isDisabledBeginDate,
  disabledCurrentDate
} = useChangeCustomerRules(addModel, addCustomerFeeSetForm);
//父组件调用子组件显示弹框
//暴露出去给外部使用
defineExpose({
  show,
});
</script>
<style scoped lang="scss">
.add-customer-feeSet-form {
  margin-right: 10px;
  .add-customer {
    text-align: center;
    padding-top: 5px;
  }
  .feeset-item {
    width: 100%;
  }
  .group-list {
    width: 100%;
    height: 32px;
    padding: 0 11px;
    line-height: 32px;
    box-shadow: 0 0 0 1px #dcdfe6 inset;
    border-radius: 4px;
    box-sizing: border-box;
  }
  .customer-list-warp {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    > div.item {
      flex-basis: calc(100% / 3);
      font-size: 16px;
    }
  }
}
</style>
