<template>
  <el-dialog
    custom-class="side-dialog"
    :visible.sync="modalIsShow"
    title="安全设置"
    width="500px"
    :modal="false"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    @open="visibleChange"
  >
    <el-form ref="modalFormComp" :model="modalForm" :rules="rules">
      <el-form-item label="加密“题库”，“卷库”">
        <el-switch v-model="modalForm.safeEnable"></el-switch>
        <p class="tips-info">开启后，进入题库、卷库模块，需要进行密码验证！</p>
      </el-form-item>
      <el-form-item
        v-if="modalForm.safeEnable"
        label="设置密码"
        prop="safePassword"
      >
        <el-input
          v-model="modalForm.safePassword"
          type="password"
          class="dialog-input-width"
          auto-complete="off"
          placeholder="请输入6位以上数字和字母组合"
        />
      </el-form-item>
      <el-form-item
        v-if="modalForm.safeEnable"
        label="确认密码"
        prop="checkSafePassword"
      >
        <el-input
          v-model="modalForm.checkSafePassword"
          type="password"
          class="dialog-input-width"
          auto-complete="off"
          placeholder="请输入6位以上数字和字母组合"
        />
      </el-form-item>
    </el-form>

    <div slot="footer">
      <el-button type="primary" :loading="isSubmit" @click="confirm"
        >确定</el-button
      >
      <el-button @click="cancel">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { questionSecuritySettingsApi } from "../api";
import { mapActions } from "vuex";
import { USER_SIGNIN } from "../../../modules/portal/store/user";

export default {
  name: "QuestionSafetySetDialog",
  data() {
    var validatePassWeakPass = (rule, value, callback) => {
      if (this.modalForm.checkSafePassword !== "") {
        this.$refs.modalFormComp.validateField("checkSafePassword");
      }
      callback();
    };
    var validatePassWeakPass2 = (rule, value, callback) => {
      if (value !== this.modalForm.safePassword) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    const pwdRule = [
      {
        validator: (rule, value, callback) => {
          if (value && value.match(/[0-9]+/) && value.match(/[a-zA-Z]+/)) {
            callback();
          } else {
            callback(new Error("请输入数字和字母组合"));
          }
        },
        trigger: "change",
      },
      {
        required: true,
        min: 6,
        max: 16,
        message: "密码只能6-16个字符",
        trigger: "change",
      },
    ];
    return {
      modalIsShow: false,
      isSubmit: false,
      modalForm: {
        safeEnable: false,
        safePassword: "",
        checkSafePassword: "",
      },
      rules: {
        safePassword: [
          { validator: validatePassWeakPass, trigger: "blur" },
          ...pwdRule,
        ],
        checkSafePassword: [
          { validator: validatePassWeakPass2, trigger: "blur" },
          ...pwdRule,
        ],
      },
    };
  },
  methods: {
    ...mapActions([USER_SIGNIN]),
    visibleChange() {
      this.modalForm = {
        safeEnable: this.$store.state.user.safeEnable,
        safePassword: "",
        checkSafePassword: "",
      };
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    async confirm() {
      if (this.modalForm.safeEnable) {
        const valid = await this.$refs.modalFormComp.validate().catch(() => {});
        if (!valid) return;
      }

      if (this.isSubmit) return;
      this.isSubmit = true;
      const data = await questionSecuritySettingsApi(this.modalForm).catch(
        () => {}
      );
      this.isSubmit = false;

      if (!data) return;

      let user = this.$store.state.user;
      user.safeEnable = this.modalForm.safeEnable;
      this.USER_SIGNIN(user);

      this.$message.success("设置成功！");
      this.$emit("modified");
      this.cancel();
    },
  },
};
</script>
