<template>
  <SysDialog
    class="addedit-administrator"
    :visible="dialog.visible"
    :confirm-loading="dialog.confirmLoading"
    v-bind="getBindValue"
    @onClose="onclose"
    @onConfirm="confirm"
  >
    <template #content>
      <div class="define-formItem-pd">
        <el-form
          ref="addEditAdministratorFormRef"
          :model="addEditAdministratorForm"
          inline
          :rules="addEditAdministratorState.rules"
          label-width="80px"
        >
          <el-row>
            <el-col :span="12" v-show="isFeeset">
              <el-form-item prop="notifyUserType" label="人员类型">
                <BaseSelect
                  v-model:modelValue="addEditAdministratorForm.notifyUserType"
                  :filterable="false"
                  :options="notifyUserTypeList"
                  placeholder="请选择人员类型"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="successorId" label="用户">
                <BaseSelect
                  v-model:modelValue="addEditAdministratorForm.successorId"
                  :options="sysUserList"
                  placeholder="请选择用户"
                  @change="changeSuccessorId"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12" v-show="isFeeset">
              <el-form-item prop="feeSetId" label="费用名称" :rules="feeSetIdRules">
                <BaseSelect
                  v-model:modelValue="addEditAdministratorForm.feeSetId"
                  clearable
                  :options="customerFeeSetNameList"
                  placeholder="请选择费用名称"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                prop="email"
                label="Email"
                :style="setFormItemWidth"
              >
                <el-input
                  v-model="addEditAdministratorForm.email"
                  placeholder="请输入Email"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                prop="mobile"
                label="手机号"
                :style="setFormItemWidth"
              >
                <el-input
                  v-model="addEditAdministratorForm.mobile"
                  placeholder="请输入手机号"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </template>
  </SysDialog>
</template>
<script lang="ts" setup>
import type { ListIitem } from "@/api/base/BaseDataModel";
import SysDialog from "@/components/SysDialog.vue";
import useDialog from "@/hooks/useDialog";
import BaseSelect from "@/components/QuerySelect/BaseSelect.vue";
import { CustomerFeeSetAdministratorDto } from "@/api/customerfee/CustomerFeeSetModel";
import { useFeesetList } from "@/store/list_feeset";
import { ref, reactive, computed, unref, nextTick } from "vue";
import { useEleFormValidate } from "@/hooks/useEleFormValidate";
import { deal_FindItemName } from "@/utils/dealFindData";
import { api_getUser } from "@/api/customerfee/customerfeeset";
import { resCodeSuccess } from "@/utils/useReturnData";

enum Personnel {
    /**
     * 业务人员
     */
    BUSINESS = 0,
    /**
     * 管理人员
     */
    MANAGE = 1
}
const props = defineProps<{
    sysUserList: ListIitem[];
}>();
const emit = defineEmits(["confirmAdministrator"]);
// 弹框一些配置
const getBindValue = reactive({
  title: "新增",
  width: 660,
  height: 0,
  overflowHidden: true,
});
// col宽度百分比
const setFormItemWidth = computed(() => {
  return { width: `calc(100% - 32px)` };
});
//弹框属性
const { dialog, onClose, onShow, setLoading } = useDialog();
const storeFeeset = useFeesetList();
const customerFeeSetNameList = computed(
  () => storeFeeset.getCustomerFeeSetNameList
);
const notifyUserTypeList = computed(() => storeFeeset.getNotifyUserTypeList);
const sysUserList = computed(() => props.sysUserList);
// 表单参数
const addEditAdministratorForm = reactive<
  Partial<CustomerFeeSetAdministratorDto>
>({
  id: undefined,
  notifyUserType: undefined,
  successorId: undefined,
  successorName: undefined,
  feeSetId: undefined,
  feeSetName: undefined,
  email: undefined,
  mobile: undefined,
});
const addEditAdministratorState = reactive({
  feeSetId: [{ required: true, message: "请选择费用名称", trigger: "change" }],
  rules: {
    notifyUserType: [{ required: true, message: "请选择人员类型", trigger: "change" }],
    successorId: [{ required: true, message: "请选择用户", trigger: "change" }],
  },
  isFeeset: false,
});
// 改变用户编号获取用户信息
const changeSuccessorId = async (id) => {
  const res = await api_getUser({ id })
  if(resCodeSuccess(res)) {
    const { email, mobile } = res.data
    addEditAdministratorForm.email = email
    addEditAdministratorForm.mobile = mobile
  }
}
// 校验表单
const addEditAdministratorFormRef = ref();
const isFeeset = computed(() => !addEditAdministratorState.isFeeset);
const { formValidate, resetForm, clearValidateForm } = useEleFormValidate();
// 按照业务人员校验费用名称是否必填
const feeSetIdRules = computed(() => {
    if(addEditAdministratorForm.notifyUserType === Personnel.BUSINESS) {
        return addEditAdministratorState.feeSetId
    }
    // 清除指定字段校验
    clearValidateForm(unref(addEditAdministratorFormRef), 'feeSetId')
    return []
})
// 编辑状态数据
const initData = async (data) => {
  await nextTick()
  if(data && data.id && !data.parentId) {
    getBindValue.title = '编辑'
    Object.keys(addEditAdministratorForm).forEach((key) => {
      addEditAdministratorForm[key] = data[key]
    })
    return false
  }
  getBindValue.title = '新增'
}
const show = (data) => {
  // 编辑状态
  initData(data)
  addEditAdministratorState.isFeeset = false;
  // 客户费用设置中点击设置的
  if (data && data.parentId) {
    addEditAdministratorForm.feeSetId = data.parentId;
    // 默认业务人员：0
    addEditAdministratorForm.notifyUserType = Personnel.BUSINESS;
    addEditAdministratorState.isFeeset = true;
  }
  onShow();
};
const onclose = () => {
  setLoading(false);
  addEditAdministratorForm.id = undefined
  resetForm(unref(addEditAdministratorFormRef));
  onClose();
};
const confirm = async () => {
  const isValidate = await formValidate(unref(addEditAdministratorFormRef));
  if (!isValidate) return;
  // 费用设置名称
  if (addEditAdministratorForm.feeSetId) {
    const feeSetName = deal_FindItemName(
      addEditAdministratorForm.feeSetId,
      unref(customerFeeSetNameList)
    );
    addEditAdministratorForm.feeSetName = feeSetName;
  }
  // 用户名称
  if (addEditAdministratorForm.successorId) {
    const successorName = deal_FindItemName(
      addEditAdministratorForm.successorId,
      unref(sysUserList)
    );
    addEditAdministratorForm.successorName = successorName;
  }
  setLoading(true);
  emit("confirmAdministrator", addEditAdministratorForm, onclose);
};
//父组件调用子组件显示弹框
//暴露出去给外部使用
defineExpose({
  show,
});
</script>