<script setup lang="ts">
import { onMounted, onUnmounted, reactive, ref } from 'vue';
import { regExpPasswd, regExpUserName } from '@/utils/regular-utils';
import { Form, message, Modal } from 'ant-design-vue';
import useI18n from '@/hooks/useI18n';
import useUserStore from '@/store/modules/user';
import { updateUserPasswordForce } from '@/api/system/user';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { getConfigKey } from '@/api/system/config';
const userStore = useUserStore();
const { t } = useI18n();

/**对话框对象信息状态类型 */
type ModalStateType = {
  /**重置密码框是否显示 */
  open: boolean;
  /**标题 */
  title: string;
  /**表单数据 */
  from: Record<string, any>;
  /**确定按钮 loading */
  confirmLoading: boolean;
  /**密码策略 */
  passwordPolicy: Record<string, any>;
  /**密码有效期 */
  passwdExpireEnable: boolean;
  passwdExpire: Record<string, any>;
};

/**对话框对象信息状态 */
let modalState: ModalStateType = reactive({
  open: userStore.forcePasswdChange,
  title: t('components.ForcePasswdChange.title'),
  from: {
    userId: userStore.userId,
    userName: userStore.userName,
    password: '',
  },
  confirmLoading: false,
  passwordPolicy: { minLength: 8, specialChars: 2, uppercase: 1, lowercase: 1 },
  passwdExpireEnable: false,
  passwdExpire: { expHours: 2, alertHours: 1 },
});

/**对话框内表单属性和校验规则 */
const modalStateFrom = Form.useForm(
  modalState.from,
  reactive({
    userName: [
      {
        required: true,
        pattern: regExpUserName,
        message: t('views.system.user.userNameTip'),
      },
    ],
    password: [
      {
        required: true,
        pattern: regExpPasswd,
        message: t('views.system.user.passwdTip'),
      },
    ],
  })
);

/**对话框提交确认 */
function fnModalOk() {
  const { password } = modalState.from;
  if (!password) {
    message.error({
      content: t('views.system.user.passwdTip'),
      duration: 2,
    });
    return;
  }
  updateUserPasswordForce(password).then(res => {
    if (res.code === RESULT_CODE_SUCCESS) {
      userStore.fnLogOut();
      modalState.confirmLoading = true;
      Modal.success({
        title: t('common.tipTitle'),
        content: t('views.account.settings.submitOkTip', {
          num: modalState.from.userName,
        }),
        okText: t('views.account.settings.submitOk'),
        onOk() {
          window.location.reload();
        },
      });
    } else {
      message.error({
        content: `${res.msg}`,
        duration: 2,
      });
    }
  });
}

/**组件实例挂载之后调用 */
onMounted(() => {
  Promise.all([
    getConfigKey('sys.user.passwordPolicy'),
    getConfigKey('sys.user.passwdExpire'),
  ]).then(resArr => {
    if (resArr[0].code === RESULT_CODE_SUCCESS) {
      try {
        modalState.passwordPolicy = JSON.parse(resArr[0].data);
      } catch (error) {
        console.error('passwordPolicy', error);
      }
    }
    if (resArr[1].code === RESULT_CODE_SUCCESS) {
      try {
        const data = JSON.parse(resArr[1].data);
        if (data.expHours % 24 === 0) {
          data.expHours = data.expHours / 24;
        } else {
          data.expHours = (data.expHours / 24).toFixed(2);
        }
        if (data.alertHours % 24 === 0) {
          data.alertHours = data.alertHours / 24;
        } else {
          data.alertHours = (data.alertHours / 24).toFixed(2);
        }
        modalState.passwdExpire = data;
        modalState.passwdExpireEnable = data.expHours > 0;
      } catch (error) {
        console.error('passwdExpire', error);
      }
    }
  });
});

/**组件实例被卸载之后调用 */
onUnmounted(() => {});
</script>
<template>
  <a-modal
    v-model:open="modalState.open"
    get-container="#app"
    :footer="null"
    :zIndex="1008"
    :closable="false"
    :keyboard="false"
    :destroyOnClose="true"
    :mask-closable="false"
    :title="modalState.title"
  >
    <a-form
      name="modalStateFromByResetPwd"
      layout="horizontal"
      :label-col="{ span: 6 }"
      :label-wrap="true"
    >
      <a-form-item
        :label="t('views.system.user.account')"
        name="userName"
        v-bind="modalStateFrom.validateInfos.userName"
      >
        <a-input :value="modalState.from.userName" disabled :maxlength="30">
          <template #prefix>
            <UserOutlined />
          </template>
        </a-input>
      </a-form-item>
      <a-form-item
        :label="t('views.system.user.loginPwd')"
        name="password"
        v-bind="modalStateFrom.validateInfos.password"
      >
        <a-input-password
          v-model:value="modalState.from.password"
          :disabled="modalState.confirmLoading"
          :maxlength="26"
        >
          <template #prefix>
            <LockOutlined />
          </template>
        </a-input-password>
      </a-form-item>
      <a-form-item name="ok" :wrapper-col="{ offset: 6 }">
        <a-button
          type="primary"
          @click="fnModalOk()"
          :disabled="modalState.confirmLoading"
        >
          {{ t('common.ok') }}
        </a-button>
      </a-form-item>

      <!-- 提示信息 -->
      <a-form-item name="info" :label="t('components.ForcePasswdChange.desc')">
        <div>
          <p>
            {{ t('components.ForcePasswdChange.passwordPolicy') }}<br />
            {{
              t(
                'components.ForcePasswdChange.passwordPolicyMsg',
                modalState.passwordPolicy
              )
            }}
          </p>
          <p v-if="modalState.passwdExpireEnable">
            {{ t('components.ForcePasswdChange.passwdExpire') }}<br />
            {{
              t('components.ForcePasswdChange.passwdExpireMsg', {
                expDay: modalState.passwdExpire.expHours,
                alertDay: modalState.passwdExpire.alertHours,
              })
            }}
          </p>
        </div>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<style lang="less" scoped></style>
