<template>
  <el-dialog
    v-model="visible"
    title="修改密码"
    width="35%"
    :before-close="closeDialog"
  >
    <el-form
      label-position="top"
      :model="formData"
      label-width="150px"
      :rules="rules"
      ref="ruleFormRef"
    >
      <el-form-item label="原密码:" prop="oldPass">
        <el-input
          type="password"
          v-model="formData.oldPass"
          placeholder="请输入原密码"
          clearable
        />
      </el-form-item>
      <el-form-item label="新密码:" prop="newPass">
        <el-input
          type="password"
          v-model="formData.newPass"
          placeholder="请输入新密码"
          clearable
        />
      </el-form-item>
      <el-form-item label="确认密码:" prop="confirmPass">
        <el-input
          type="password"
          v-model="formData.confirmPass"
          placeholder="请再次输入新密码"
          clearable
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="saveData"> 保存 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import { onMounted, reactive, ref, toRefs, computed } from "vue";
import myApi from "@/api/myApi.js";
import { ElMessage, ElMessageBox } from "element-plus";
import { useStore } from "vuex";
import md5 from 'js-md5'
import { passwd, response } from '../proto/data/pd'

export default {
  props: ["dialogVisible"],
  emits: ["dialogClose", "dialogSuccess"],
  setup(props, ctx) {
    const store = useStore();
    const ruleFormRef = ref(null);
    var checkPass = (rule, value, callback) => {
      var pass = /[\u4E00-\u9FA5]/;
      if (!pass.test(value) || !value) {
        // 规则校验通过，或者为空
        callback();
      } else {
        callback(new Error("不能输入汉字"));
      }
    };
    var validatePassCheck = (rule, value, callback) => {
      if (value && value !== state.formData.newPass) {
        callback(new Error("两次输入密码不一致，请重新输入"));
      } else {
        callback();
      }
    };
    const state = reactive({
      rules: {
        oldPass: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 18, message: "长度在6到18个字符", trigger: "blur" },
          { required: true, validator: checkPass, trigger: "blur" },
        ],
        newPass: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 18, message: "长度在6到18个字符", trigger: "blur" },
          { required: true, validator: checkPass, trigger: "blur" },
        ],
        confirmPass: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 18, message: "长度在6到18个字符", trigger: "blur" },
          { required: true, validator: validatePassCheck, trigger: "blur" },
        ],
      },
      formData: {
        oldPass: "",
        newPass: "",
        confirmPass: "",
      },
    });
    const visible = computed(() => {
      return props.dialogVisible;
    });

    onMounted(() => {});

    const closeDialog = () => {
      ctx.emit("dialogClose");
    };

    const saveData = async () => {
      await ruleFormRef.value.validate(async (valid) => {
        if (valid) {
          // 请求数据
          const req_databuf = passwd.encode({
              name: store.state.userInfo.nickName,
              oldPassword: md5(state.formData.oldPass).toUpperCase(),
              newPassword: md5(state.formData.newPass).toUpperCase(),
          }).finish();
          // 截取有效长度
          const req_data = req_databuf.slice(0, req_databuf.length);
          const res = await myApi.editPass(req_data);
          const ret = response.decode(new Uint8Array(res));
          if (ret.code == 0) {
            // 获取数据
            console.log(new TextDecoder().decode(ret.data));
            ElMessage.success(new TextDecoder().decode(ret.data) || "请求成功");
            // 关闭弹框
            ctx.emit("dialogSuccess");
          } else {
            console.log(ret);
          }
        } else {
          console.log("error submit!");
        }
      });
    };
    return {
      ...toRefs(state),
      ruleFormRef,
      visible,
      saveData,
      closeDialog,
    };
  },
};
</script>
