<script setup lang="ts">
import { httpSetPwd } from "/@/api/interest/companyAccount";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { reactive, ref, watch, nextTick } from "vue";
import { useNav } from "/@/layout/hooks/nav";
import { isAlphanumeric, isnumber, validAlphabets } from "/@/utils/validate";
const { logout } = useNav();
const formSize = ref("default");
const ruleFormRef = ref<FormInstance>();
interface formType {
  id?: string; //账户id
  password?: string; //新密码
  confirmPassword?: string; //确认密码
}
const props = defineProps({
  itemId: {
    type: String,
    default: ""
  },
  showModel: {
    type: Boolean,
    default: false
  }
});
const showModelThis = ref(false);
const emit = defineEmits<{
  (e: "cancel"): void;
  (e: "refresh"): void;
}>();
const id = ref("");
const formModel = {
  id: "", //账户id
  password: "", //新密码
  confirmPassword: "" //确认密码
};
const ruleForm = reactive<formType>(formModel);
const rules = reactive<FormRules>({
  password: [
    {
      required: true,
      validator: (rule, value, callback) => {
        if (value === "") {
          callback(new Error("新密码不能为空！"));
        } else {
          if (!isAlphanumeric(value)) {
            callback(new Error("新密码为6-16位数字字母组合！"));
          } else if (value.length < 6 || value.length > 16) {
            callback(new Error("新密码为6-16位数字字母组合！"));
          } else if (isnumber(value)) {
            callback(new Error("新密码不能为纯数字！"));
          } else if (validAlphabets(value)) {
            callback(new Error("新密码不能为纯字母！"));
          } else {
            callback();
          }
        }
      },
      trigger: "blur"
    }
  ],
  confirmPassword: [
    {
      required: true,
      validator: (rule, value, callback) => {
        if (value === "") {
          callback(new Error("确认密码不能为空！"));
        } else {
          if (ruleForm.password !== value) {
            callback(new Error("确认密码与新密码不一致！"));
          } else {
            callback();
          }
        }
      },

      trigger: "blur"
    }
  ]
});
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      if (loading.value === true) return;
      loading.value = true;
      let model = Object.assign({}, ruleForm);
      model.id = id.value;
      const { code, message } = await httpSetPwd(model);
      loading.value = false;
      if (code === 0) {
        ElMessage.success("密码修改成功！");
        showModelThis.value = false;
        emit("refresh");
      } else if (code > 100 && code < 140) {
        showModelThis.value = false;
        logout();
      } else {
        ElMessage.error(message);
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};
const resetForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.clearValidate();
  formEl.resetFields();
  await nextTick(async () => {
    ruleForm.id = id.value;
    ruleForm.password = ""; //新密码
    ruleForm.confirmPassword = ""; //确认密码
  });
};
const closeDialog = () => {
  showModelThis.value = false;
  emit("cancel");
};

const loading = ref(true);
const titleType = ref("");
async function initForm() {
  loading.value = true;
  titleType.value = "修改密码";

  await resetForm(ruleFormRef.value);

  console.log(ruleForm);
  loading.value = false;
}
watch(
  () => {
    return props.showModel;
  },
  () => {
    const { showModel, itemId } = props;
    showModelThis.value = showModel;
    if (showModelThis.value) {
      id.value = itemId;
      console.log(id.value);
      initForm();
    }
  }
);
</script>

<template>
  <el-dialog
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    v-model="showModelThis"
    append-to-body
    :width="'900px'"
    :title="titleType"
    v-loading="loading"
    @close="closeDialog"
  >
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="90px"
      style="margin-top: -10px"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="新密码" prop="password">
            <el-input
              v-model="ruleForm.password"
              placeholder="新密码"
            /> </el-form-item
        ></el-col>
        <el-col :span="8">
          <el-form-item label="确认密码" prop="confirmPassword">
            <el-input
              v-model="ruleForm.confirmPassword"
              :maxlength="11"
              placeholder="确认密码"
            /> </el-form-item
        ></el-col>
      </el-row>
      <el-col :span="24" class="clear">
        <el-button
          type="primary"
          class="fr"
          style="margin: 0 0 0 16px"
          @click="submitForm(ruleFormRef)"
          >保存</el-button
        >
        <el-button class="fr" style="margin: 0 0 0 16px" @click="closeDialog"
          >关闭</el-button
        >
      </el-col>
    </el-form>
  </el-dialog>
</template>
