<template>
  <el-dialog
    :title="isAdd ? '修改管理员账号' : '修改密码'"
    :visible.sync="dialogFormVisible"
  >
    <el-form v-if="isAdd" ref="ruleForm" :model="form" :rules="rules">
      <el-form-item
        label="密码："
        prop="password"
        :label-width="formLabelWidth"
      >
        <el-input
          style="width: 240px"
          type="password"
          placeholder="请输入密码"
          v-model="form.password"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="管理员账号"
        :label-width="formLabelWidth"
        prop="mobile"
      >
        <el-input
          placeholder="请输入账号"
          style="width: 240px; margin-right: 20px"
          v-model="form.mobile"
        ></el-input
        ><el-button @click="getCode" v-if="this.isCode" type="primary"
          >获取验证码</el-button
        >
        <el-button v-else :disabled="totalTime < 60" type="primary">{{
          this.content
        }}</el-button>
      </el-form-item>
      <el-form-item prop="code" label="验证码:" :label-width="formLabelWidth">
        <el-input
          style="width: 240px"
          placeholder="请输入验证码"
          v-model="form.code"
        ></el-input>
      </el-form-item>
    </el-form>
    <el-form v-else ref="ruleForm" :model="form" :rules="rules">
      <el-form-item
        label="旧密码："
        prop="oldPassword"
        :label-width="formLabelWidth"
      >
        <el-input
          style="width: 240px"
          type="password"
          placeholder="请输入密码"
          v-model="form.oldPassword"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="新密码"
        :label-width="formLabelWidth"
        prop="newPassword"
      >
        <el-input
          placeholder="请输入新密码"
          style="width: 240px; margin-right: 20px"
          v-model="form.newPassword"
          show-password
        ></el-input>
      </el-form-item>
      <el-form-item
        prop="isPassword"
        label="确认新密码:"
        :label-width="formLabelWidth"
      >
        <el-input
          style="width: 240px"
          placeholder="请再次输入新密码"
          v-model="form.isPassword"
          show-password
        ></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="determine">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogFormVisible: false,
      isAdd: true,
      formLabelWidth: "120px",
      form: {},
      totalTime: 60,
      content: "获取验证码",
      isCode: true,
      rules: {
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        mobile: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur",
          },
          {
            validator: function (rule, value, callback) {
              if (/^1[3456789]\d{9}$/.test(value) == false) {
                callback(new Error("请输入正确的手机号"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        code: [
          {
            required: true,
            min: 6,
            max: 6,
            message: "请输入正确的验证码",
            trigger: "blur",
          },
        ],
        oldPassword: [
          { required: true, message: "请输入密码", trigger: "blur" },
        ],
        newPassword: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            min: 8,
            max: 12,
            message:
              "密码由8-12位字母、数字、特殊符号（~、@、#、$、%、*）的组成，请重新输入",
            trigger: "blur",
          },
          {
            trigger: "blur",
            validator: (rule, value, callback) => {
              var passwordreg =
                /(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,12}/;
              if (!passwordreg.test(value)) {
                callback(
                  new Error(
                    "密码由8-12位字母、数字、特殊符号（~、@、#、$、%、*）的组成，请重新输入"
                  )
                );
              } else {
                callback();
              }
            },
          },
        ],
        isPassword: [
          {
            required: true,
            message: "请输入确认密码",
            trigger: "blur",
          },
          {
            trigger: "blur",
            validator: (rule, value, callback) => {
              if (value != this.form.newPassword) {
                callback(new Error("密码输入不一致"));
              } else {
                callback();
              }
            },
          },
        ],
      },
    };
  },
  watch: {
    dialogFormVisible(newVal, oldVal) {
      if (!newVal) {
        this.$refs.ruleForm.resetFields();
      }
    },
  },
  methods: {
    init(row) {
      if (row) {
        this.isAdd = true;
        this.form = {
          mobile: "",
          code: "",
          password: "",
        };
      } else {
        this.isAdd = false;
        console.log(row);
      }
      this.dialogFormVisible = true;
    },
    getCode() {
      console.log("发送验证码");
      if (this.form.mobile && this.form.mobile.length == 11) {
        this.$api.mer_admin
          .getCaptcha({
            mobile: this.form.mobile,
            password: this.form.password,
          })
          .then((res) => {
            console.log(res);
          });
        this.isCode = false;
        this.countDown();
      } else {
        this.$message.error("请输入正确的手机号");
      }
    },
    countDown() {
      console.log("123");
      if (this.totalTime == 0) {
        this.content = "获取验证码";
        this.totalTime = 60;
        this.isCode = true;
        return;
      }
      this.content = this.totalTime + "秒后重新获取";
      this.totalTime--;
      setTimeout(this.countDown, 1000);
    },
    determine() {
      if (this.isAdd) {
        this.$refs.ruleForm.validate((valid) => {
          console.log(valid);
          if (valid) {
            this.$api.mer_admin.editAdmin(this.form).then((res) => {
              console.log(res);
            });
          }
        });
      } else {
        this.$refs.ruleForm.validate((valid) => {
          console.log(valid);
          if (valid) {
            this.$api.mer_admin
              .changePassword({
                oldPassword: this.form.oldPassword,
                newPassword: this.form.newPassword,
              })
              .then((res) => {
                this.$message.success("修改成功");
                this.dialogFormVisible = false;
              });
          }
        });
      }
    },
  },
};
</script>

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