<template>
  <BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
    <a-tabs
      :tabBarStyle="{
        margin: ['1', '2'].includes(activeKey) ? '0 16px 16px' : '0 16px 10px',
        height: '50px',
      }"
      v-model:activeKey="activeKey"
      :class="{ 'h-full': ['3', '4', '5'].includes(activeKey) }"
    >
      <a-tab-pane key="1" tab="基础信息">
        <BasicForm @register="registerForm1">
          <template #password="{ model, field }">
            <a-input
              v-model:value="model[field]"
              :type="isShowPwd ? 'text' : 'password'"
              placeholder="请输入密码"
              @change="changePwd"
              allowClear
            >
              <template #suffix>
                <div class="input-state" v-if="model[field]">
                  <a-progress
                    :percent="pwdPercent"
                    :steps="3"
                    :stroke-color="pwdColor"
                    :showInfo="false"
                  />
                  <span>{{ pwdText }}</span>
                </div>
                <Icon
                  :icon="
                    isShowPwd ? 'ant-design:eye-outlined' : 'ant-design:eye-invisible-outlined'
                  "
                  color="#00000073"
                  @click="changeState"
                  style="cursor: pointer"
                />
              </template>
            </a-input>
          </template>
        </BasicForm>
      </a-tab-pane>
      <a-tab-pane key="2" tab="身份信息" force-render>
        <BasicForm @register="registerForm2" />
      </a-tab-pane>
      <a-tab-pane key="3" tab="角色信息" force-render>
        <BasicTable @register="registerTable1">
          <template #headerCell="{ column }">
            <template v-if="column.flag === 'INDEX'">
              <div class="header-cell__custom-title"
                ><PlusCircleFilled class="addBtn" @click="handleRoleCreate"
              /></div>
            </template>
            <div class="header-cell__custom-title" v-else>{{ column.customTitle }}</div>
          </template>
          <template #action="{ record }">
            <a-button type="link" danger @click="handleDelete(record.id, 1)">删除</a-button>
          </template>
        </BasicTable>
      </a-tab-pane>
      <a-tab-pane key="4" tab="岗位信息" force-render>
        <BasicTable @register="registerTable2">
          <template #headerCell="{ column }">
            <template v-if="column.flag === 'INDEX'">
              <div class="header-cell__custom-title"
                ><PlusCircleFilled class="addBtn" @click="handlePostCreate"
              /></div>
            </template>
            <div class="header-cell__custom-title" v-else>{{ column.customTitle }}</div>
          </template>
          <template #action="{ record }">
            <a-button type="link" danger @click="handleDelete(record.id, 2)">删除</a-button>
          </template>
        </BasicTable>
      </a-tab-pane>
      <a-tab-pane key="5" tab="负责部门" force-render>
        <BasicTable @register="registerTable3">
          <template #headerCell="{ column }">
            <template v-if="column.flag === 'INDEX'">
              <div class="header-cell__custom-title"
                ><PlusCircleFilled class="addBtn" @click="handleOrgCreate"
              /></div>
            </template>
            <div class="header-cell__custom-title" v-else>{{ column.customTitle }}</div>
          </template>
          <template #action="{ record }">
            <a-button type="link" danger @click="handleDelete(record.id, 3)">删除</a-button>
          </template>
        </BasicTable>
      </a-tab-pane>
    </a-tabs>
    <RoleModal @register="registerRoleModal" @success="handleRoleSuccess" />
    <PostModal @register="registerPostModal" @success="handlePostSuccess" />
    <OrganizationModal @register="registerOrgModal" @success="handleOrgSuccess" />
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref, computed, unref } from 'vue';
  import { BasicModal, useModalInner, useModal } from '/@/components/Modal';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { BasicTable, useTable, FormSchema, BasicColumn } from '/@/components/Table';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { getDepartmentTree } from '/@/api/system/department';
  import { addUser, getUser, updateUser } from '/@/api/system/user';
  import Icon from '/@/components/Icon/index';
  import { testPwdState } from '/@/utils/event/design';
  import { PlusCircleFilled } from '@ant-design/icons-vue';
  import RoleModal from './RoleModal.vue';
  import PostModal from './PostModal.vue';
  import OrganizationModal from './OrganizationModal.vue';

  const { t } = useI18n();
  const accountFormSchema: FormSchema[] = [
    {
      field: 'userName',
      label: '账号',
      component: 'Input',
      required: true,
      colProps: { span: 12 },
      componentProps: {
        placeholder: '请输入账号',
      },
    },
    {
      field: 'name',
      label: '用户姓名',
      component: 'Input',
      required: true,
      colProps: { span: 12 },
      componentProps: {
        placeholder: '请输入用户姓名',
      },
    },
    {
      field: 'code',
      label: t('编号'),
      component: 'Input',
      required: true,
      colProps: { span: 12 },
      componentProps: {
        placeholder: '请输入编号',
      },
    },
    {
      field: 'departmentIds',
      label: t('所属机构'),
      component: 'TreeSelect',
      componentProps: {
        placeholder: '请选择所属机构',
        fieldNames: {
          label: 'name',
          key: 'id',
          value: 'id',
        },
        multiple: true,
        getPopupContainer: () => document.body,
      },
      required: true,
      colProps: { span: 12 },
    },
    {
      field: 'password',
      label: '登录密码',
      component: 'Input',
      ifShow: false,
      slot: 'password',
      colProps: { span: 12 },
      rules: [
        {
          required: true,
          validator: (_, value) => {
            if (!value) {
              return Promise.reject('请输入登录密码');
            }
            if (pwdText.value === '弱') {
              return Promise.reject('密码强度设置过低，请至少保证中等强度。');
            }
            return Promise.resolve();
          },
        },
      ],
    },
    {
      field: 'birthDate',
      label: '生日',
      component: 'DatePicker',
      colProps: { span: 12 },
      componentProps: {
        placeholder: '请选择生日',
        format: 'YYYY-MM-DD',
        getPopupContainer: () => document.body,
      },
    },
    {
      label: t('邮箱'),
      field: 'email',
      component: 'Input',
      required: true,
      colProps: { span: 12 },
      componentProps: {
        placeholder: '请输入邮箱',
      },
    },
    {
      label: t('手机号码'),
      field: 'mobile',
      component: 'Input',
      required: true,
      colProps: { span: 12 },
      componentProps: {
        placeholder: '请输入手机号码',
      },
    },
    {
      label: '电话号码',
      field: 'phoneNumber',
      component: 'Input',
      colProps: { span: 12 },
      componentProps: {
        placeholder: '请输入电话号码',
      },
    },
    {
      field: 'qqNumber',
      label: 'QQ号码',
      component: 'Input',
      colProps: { span: 12 },
      componentProps: {
        placeholder: '请输入QQ号码',
      },
    },
    {
      field: 'wechatNumber',
      label: '微信',
      component: 'Input',
      colProps: { span: 12 },
      componentProps: {
        placeholder: '请输入微信',
      },
    },
    {
      field: 'bindIp',
      label: '绑定IP',
      component: 'Input',
      colProps: { span: 12 },
      componentProps: {
        placeholder: '请输入绑定IP',
      },
    },
    {
      field: 'sortCode',
      label: '排序',
      component: 'InputNumber',
      colProps: { span: 12 },
      componentProps: {
        placeholder: '请输入排序',
      },
    },
    {
      field: 'address',
      label: '联系地址',
      component: 'Input',
      colProps: { span: 12 },
      componentProps: {
        placeholder: '请输入联系地址',
      },
    },
    {
      label: t('备注'),
      field: 'remark',
      component: 'InputTextArea',
      colProps: { span: 24 },
      componentProps: {
        placeholder: '请输入备注',
      },
    },
  ];

  const identityFormSchema: FormSchema[] = [
    {
      field: 'identityCardNumber',
      label: '身份证号',
      component: 'Input',
      colProps: { span: 12 },
      componentProps: {
        placeholder: '请输入身份证号',
      },
    },
    {
      field: 'politicsStatus',
      label: '政治面貌',
      component: 'DicSelect',
      colProps: { span: 12 },
      componentProps: {
        placeholder: '请选择政治面貌',
        itemId: '1737728866478612482',
        isShowAdd: false,
        getPopupContainer: () => document.body,
      },
    },
    {
      field: 'administrativePost',
      label: '行政职务',
      component: 'DicSelect',
      colProps: { span: 12 },
      componentProps: {
        placeholder: '请选择行政职务',
        itemId: '1737732631323631617',
        isShowAdd: false,
        getPopupContainer: () => document.body,
      },
    },
    {
      field: 'administrativeRank',
      label: '行政职级',
      component: 'DicSelect',
      colProps: { span: 12 },
      componentProps: {
        placeholder: '请选择行政职级',
        itemId: '1737738124947509249',
        isShowAdd: false,
        getPopupContainer: () => document.body,
      },
    },
    {
      field: 'secretLevel',
      label: '用户密级',
      component: 'DicSelect',
      colProps: { span: 12 },
      componentProps: {
        placeholder: '请选择用户密级',
        itemId: '1737748310911242241',
        isShowAdd: false,
        getPopupContainer: () => document.body,
      },
    },
    {
      field: 'professionalTitleGrade',
      label: '职称等级',
      component: 'DicSelect',
      colProps: { span: 12 },
      componentProps: {
        placeholder: '请选择职称等级',
        itemId: '1737755116874170369',
        isShowAdd: false,
        getPopupContainer: () => document.body,
      },
    },
    {
      field: 'technicalPosition',
      label: '技术职务',
      component: 'DicSelect',
      colProps: { span: 12 },
      componentProps: {
        placeholder: '请选择技术职务',
        itemId: '1737758467082878978',
        isShowAdd: false,
        getPopupContainer: () => document.body,
      },
    },
    {
      field: 'managerialPosition',
      label: '管理职务',
      component: 'DicSelect',
      colProps: { span: 12 },
      componentProps: {
        placeholder: '请选择管理职务',
        itemId: '1737758998798991362',
        isShowAdd: false,
        getPopupContainer: () => document.body,
      },
    },
    {
      field: 'vocationalSkill',
      label: '职业技能',
      component: 'DicSelect',
      colProps: { span: 12 },
      componentProps: {
        placeholder: '请选择职业技能',
        itemId: '1738008457994719233',
        isShowAdd: false,
        getPopupContainer: () => document.body,
      },
    },
    {
      field: 'gender',
      label: t('性别'),
      component: 'RadioGroup',
      required: true,
      colProps: { span: 12 },
      defaultValue: 1,
      componentProps: {
        options: [
          { label: '男', value: 1 },
          { label: '女', value: 0 },
        ],
      },
    },
  ];
  const roleColumns: BasicColumn[] = [
    {
      title: t('角色编码'),
      dataIndex: 'code',
    },
    {
      title: t('角色名称'),
      dataIndex: 'name',
    },
  ];
  const postColumns: BasicColumn[] = [
    {
      title: t('岗位编码'),
      dataIndex: 'code',
    },
    {
      title: t('岗位名称'),
      dataIndex: 'name',
    },
  ];
  const orgColumns: BasicColumn[] = [
    {
      title: t('组织编码'),
      dataIndex: 'code',
    },
    {
      title: t('组织名称'),
      dataIndex: 'name',
    },
  ];
  const emit = defineEmits(['success', 'register']);
  const { notification } = useMessage();
  const isUpdate = ref(true);
  const rowId = ref('');
  const isShowPwd = ref(false);
  const pwdPercent = ref(0);
  const pwdColor = ref('#e74242');
  const pwdText = ref('弱');
  const activeKey = ref('1');
  const roleDatasource = ref<any[]>([]);
  const postDatasource = ref<any[]>([]);
  const orgDatasource = ref<any[]>([]);

  const [
    registerForm1,
    {
      setFieldsValue: setFieldsValue1,
      updateSchema: updateSchema1,
      resetFields: resetFields1,
      validate: validate1,
    },
  ] = useForm({
    schemas: accountFormSchema,
    showActionButtonGroup: false,
    actionColOptions: {
      span: 23,
    },
    rowProps: {
      gutter: 32,
    },
    layout: 'vertical',
  });

  const [
    registerForm2,
    { setFieldsValue: setFieldsValue2, resetFields: resetFields2, validate: validate2 },
  ] = useForm({
    rowProps: {
      gutter: 32,
    },
    layout: 'vertical',
    schemas: identityFormSchema,
    showActionButtonGroup: false,
    actionColOptions: {
      span: 23,
    },
  });

  const [registerTable1, { setTableData: setTableData1, setPagination: setPagination1 }] = useTable(
    {
      rowKey: 'id',
      dataSource: roleDatasource.value,
      columns: roleColumns,
      striped: false,
      actionColumn: {
        width: 80,
        title: t('操作'),
        dataIndex: 'action',
        slots: { customRender: 'action' },
      },
      indexColumnProps: {
        width: 50,
      },
    },
  );

  const [registerTable2, { setTableData: setTableData2, setPagination: setPagination2 }] = useTable(
    {
      rowKey: 'id',
      dataSource: postDatasource.value,
      columns: postColumns,
      striped: false,
      actionColumn: {
        width: 80,
        title: t('操作'),
        dataIndex: 'action',
        slots: { customRender: 'action' },
      },
      indexColumnProps: {
        width: 50,
      },
    },
  );

  const [registerTable3, { setTableData: setTableData3, setPagination: setPagination3 }] = useTable(
    {
      rowKey: 'id',
      dataSource: orgDatasource.value,
      columns: orgColumns,
      striped: false,
      actionColumn: {
        width: 80,
        title: t('操作'),
        dataIndex: 'action',
        slots: { customRender: 'action' },
      },
      indexColumnProps: {
        width: 50,
      },
    },
  );

  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    resetFields1();
    resetFields2();
    setModalProps({ confirmLoading: false, width: 800, fixedHeight: true, destroyOnClose: true });
    activeKey.value = '1';
    isUpdate.value = !!data?.isUpdate;
    roleDatasource.value = [];
    if (unref(isUpdate)) {
      rowId.value = data.id;
      const record = await getUser(data.id);
      const departmentIds = record.departmentIds.split(',');
      setFieldsValue1({
        ...record,
        departmentIds,
      });
      setFieldsValue2({
        ...record,
      });
      roleDatasource.value = record.roles || [];
      postDatasource.value = record.posts || [];
      orgDatasource.value = record.chargeDepartments || [];

      setTableData1(roleDatasource.value);
      setPagination1({ total: roleDatasource.value.length });
      setTableData2(postDatasource.value);
      setPagination2({ total: postDatasource.value.length });
      setTableData3(orgDatasource.value);
      setPagination3({ total: orgDatasource.value.length });
    }
    const treeData = await getDepartmentTree();

    updateSchema1([
      {
        field: 'password',
        ifShow: !unref(isUpdate),
      },
      {
        field: 'departmentIds',
        componentProps: { treeData },
      },
      {
        field: 'address',
        colProps: { span: unref(isUpdate) ? 24 : 12 },
      },
    ]);
  });
  const [registerRoleModal, { openModal: openRoleModal }] = useModal();
  const [registerPostModal, { openModal: openPostModal }] = useModal();
  const [registerOrgModal, { openModal: openOrgModal }] = useModal();

  const getTitle = computed(() => (!unref(isUpdate) ? t('新增用户') : t('编辑用户')));

  const changeState = () => {
    isShowPwd.value = !isShowPwd.value;
  };

  const changePwd = (e) => {
    const pwdScore = testPwdState(e.target.value);
    if (pwdScore < 50) {
      pwdPercent.value = 30;
      pwdColor.value = '#e74242';
      pwdText.value = '弱';
    } else if (pwdScore < 75) {
      pwdPercent.value = 60;
      pwdColor.value = '#efbd47';
      pwdText.value = '中';
    } else {
      pwdPercent.value = 100;
      pwdColor.value = '#55d187';
      pwdText.value = '强';
    }
  };

  const handleRoleCreate = () => {
    openRoleModal(true, {
      roles: roleDatasource.value,
    });
  };
  const handlePostCreate = () => {
    openPostModal(true, {
      posts: postDatasource.value,
    });
  };
  const handleOrgCreate = () => {
    openOrgModal(true, {
      orgs: orgDatasource.value,
    });
  };
  const handleDelete = (index, type) => {
    switch (type) {
      case 1:
        roleDatasource.value = roleDatasource.value.filter((o) => o.id !== index);
        setTableData1(roleDatasource.value);
        setPagination1({ total: roleDatasource.value.length });
        break;
      case 2:
        postDatasource.value = postDatasource.value.filter((o) => o.id !== index);
        setTableData2(postDatasource.value);
        setPagination2({ total: postDatasource.value.length });
        break;
      case 3:
        orgDatasource.value = orgDatasource.value.filter((o) => o.id !== index);
        setTableData3(orgDatasource.value);
        setPagination3({ total: orgDatasource.value.length });
        break;
    }
  };

  const handleRoleSuccess = (data) => {
    roleDatasource.value = data;
    setTableData1(roleDatasource.value);
    setPagination1({ total: data.length });
  };
  const handlePostSuccess = (data) => {
    postDatasource.value = data;
    setTableData2(postDatasource.value);
    setPagination2({ total: data.length });
  };
  const handleOrgSuccess = (data) => {
    orgDatasource.value = data;
    setTableData3(orgDatasource.value);
    setPagination3({ total: data.length });
  };
  async function handleSubmit() {
    try {
      const values = await validate1();
      const values2 = await validate2();
      const roleIds = roleDatasource.value?.map((x) => x.id);
      const postIds = postDatasource.value?.map((x) => x.id);
      const chargeDepartmentIds = orgDatasource.value?.map((x) => x.id);
      const data = {
        ...values,
        ...values2,
        departmentIds: values.departmentIds.toString(),
        roleIds,
        postIds,
        chargeDepartmentIds,
      };
      setModalProps({ confirmLoading: true });

      // TODO custom api
      if (!unref(isUpdate)) {
        //false 新增
        await addUser(data);
        notification.success({
          message: t('新增用户'),
          description: t('成功'),
        }); //提示消息
      } else {
        data.id = rowId.value;
        await updateUser(data);
        notification.success({
          message: t('编辑用户'),
          description: t('成功'),
        }); //提示消息
      }

      closeModal();
      emit('success');
    } catch (error) {
      setModalProps({ confirmLoading: false });
    }
  }
</script>
<style lang="less" scoped>
  .pwd-progress {
    display: flex;
    align-items: center;
    position: absolute;
    right: 14%;
    top: 17%;
    width: 90px;
    z-index: 999;
  }

  .input-state {
    display: flex;
    align-items: center;
    color: #b1b1b1;
    margin-left: 5px;

    span {
      margin: 0 10px;
    }
  }

  :deep(.ant-progress-steps-item) {
    height: 4px !important;
  }

  :deep(.ant-tabs-content),
  :deep(.vben-basic-table .ant-table-container) {
    height: 100%;
  }

  :deep(.vben-basic-table .ant-table) {
    padding: 0 16px;
  }

  .addBtn {
    color: @primary-color;
  }

  :deep(.ant-tabs-content-holder) {
    height: calc(100% - 60px);

    .ant-tabs-tabpane {
      height: 100%;
    }
  }
</style>
