<template>
  <el-form ref="form" :model="form" :rules="rules" label-width="100px">
    <el-form-item label="手机号码" prop="mobile">
      <el-input v-model="user.phonenumber" placeholder="请输入手机号码" type="text" :disabled="true" />
    </el-form-item>
   <!-- <el-form-item prop="status">
      <JcRange ref="jcr" status="status" :successFun="onMpanelSuccess" :errorFun="onMpanelError"></JcRange>
    </el-form-item> -->
    <el-form-item label="验证码" prop="authCode">
      <el-row>
        <el-col :span="24">
             <el-input ref="authCode" v-model="form.authCode" type="text" placeholder="请输入短信验证码" name="authCode" abindex="2"
              maxlength="6" auto-complete="off" style="width: 55%;float: left;">
             <!-- <svg-icon slot="prefix" icon-class="validCode" /> -->
            </el-input>
            <span style="float: left; padding-left: 10px;">
              <el-button :loading="sending" :disabled="sendDisabled" size="medium" @click="onSendSms">
                {{ sendButtonText }}
              </el-button>
            </span>
        </el-col>
      </el-row>
    </el-form-item>
    <el-form-item label="新密码" prop="newPassword">
      <el-input v-model="form.newPassword" placeholder="请输入新密码" type="password" show-password/>
    </el-form-item>
    <el-form-item label="确认密码" prop="confirmPassword">
      <el-input v-model="form.confirmPassword" placeholder="请确认密码" type="password" show-password/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" size="mini" @click="submit">保存</el-button>
      <el-button type="danger" size="mini" @click="close">关闭</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { updateUserPwd,resetPwd } from "@/api/system/user";
import {sendSms} from "@/api/login";
import JcRange from "@/components/JcRange/index.vue";
import Cookies from "js-cookie";

export default {
  components: {
    JcRange
  },
  props: {
    user: {
      type: Object
    }
  },
  data() {
    const equalToPassword = (rule, value, callback) => {
      if (this.form.newPassword !== value) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };
    return {
      sending: false,
      sendDisabled: false,
      timer: 0,
      test: "1test",
      status: false,
      form: {
        messageId:'',
        authCode: undefined,
        newPassword: undefined,
        confirmPassword: undefined
      },
      // 表单校验
      rules: {
        authCode: [
          { required: true, message: "验证码不能为空", trigger: "blur" }
        ],
        newPassword: [
          { required: true, message: "新密码不能为空", trigger: "blur" },
          { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }
        ],
        confirmPassword: [
          { required: true, message: "确认密码不能为空", trigger: "blur" },
          { required: true, validator: equalToPassword, trigger: "blur" }
        ]
      }
    };
  },
  computed: {
    sendButtonText() {
      if (this.timer === 0) {
        this.sendDisabled = false
        return "发送验证码";
      } else {
        return `${this.timer}秒后重发`;
      }
    }
  },
  watch: {
    timer(num) {
      if (num > 0) {
        setTimeout(() => {
          this.timer = --num;
        }, 1000);
      }
    }
  },
  methods: {

    // 发送短信
    onSendSms() {
      if(this.user.phonenumber){
        // if(!this.status){
        //   this.$message.warning("请拖住滑块，拖动到最右边");
        //   return false;
        // }
        this.sending = true;
        this.sendDisabled = true
        const mobile = this.user.phonenumber;
        sendSms(mobile)
          .then(res => {
            this.timer = 60;
            this.form.messageId = res.data;
            this.$message.success("短信发送成功，请注意查收");
            Cookies.set("last-send-time", new Date());
          })
          .catch(e => {
            this.$message.error("网络异常");
            this.timer = 0;
            this.sendDisabled = false;
            // console.log(e);
          })
          .finally(() => (this.sending = false));
      }else{
         this.$message.success("发送失败，手机号码异常，请联系管理员");
      }

    },

    onMpanelSuccess(){
      // console.log("onMpanelSuccess 验证成功 =====")
      this.status = true
    },
    onMpanelError(){
       // console.log("onMpanelError 验证失败 =====")
       this.status = false
    },

    submit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          resetPwd(this.form.messageId,this.form.authCode, this.form.newPassword).then(
            response => {
              this.msgSuccess("修改成功");
            }
          );
        }
      });
    },
    close() {
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.push({ path: "/index" });
    }
  }
};
</script>
