<template>
  <div class="bing-phone part-box">
    <h3 class="reset-title">绑定手机</h3>
    <div class="reset-form">
      <Form ref="resetForm" :model="reset" :rules="resetRules">
        <FormItem prop="password">
          <Input
            size="large"
            type="password"
            v-model="reset.password"
            placeholder="请输入密码"
            clearable
          ></Input>
        </FormItem>
        <FormItem prop="phone">
          <Input
            size="large"
            v-model="reset.phone"
            placeholder="请输入新手机号"
            clearable
          ></Input>
        </FormItem>
        <FormItem prop="smscode">
          <div class="vlcode">
            <div class="vlcode-right">
              <Button
                size="large"
                long
                :type="isFetchingCode ? 'default' : 'primary'"
                @click="getsmsCode"
                :disabled="isFetchingCode"
                >{{ codeContent }}</Button
              >
            </div>
            <div class="vlcode-left">
              <Input
                size="large"
                v-model="reset.smscode"
                placeholder="请输入短信验证码"
                clearable
              ></Input>
            </div>
          </div>
        </FormItem>
        <FormItem>
          <Button size="large" type="primary" @click="submit('resetForm')"
            >确定</Button
          >
        </FormItem>
      </Form>
    </div>
  </div>
</template>

<script>
import { password, phone, smscode } from "@/plugins/formRules";

const codeWaitingTime = 60; // 再次获取验证的等待时间
const nameWaitTime = "bindphoneWaiting"; // 本地记录等待时间的标志名称

export default {
  name: "bind-phone",
  data() {
    return {
      isFetchingCode: false,
      codeContent: "获取验证码",
      time: codeWaitingTime,
      reset: {
        password: "",
        phone: "",
        smscode: ""
      },
      resetRules: {
        password,
        phone,
        smscode
      }
    };
  },
  mounted() {
    this.setWaitingTime();
  },
  methods: {
    submit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          console.log(111);
          // TODO: bind phone api
        } else {
          this.$Message.error("Fail!");
        }
      });
    },
    setWaitingTime() {
      let codetime = this.$ls.get(nameWaitTime);
      if (codetime) {
        let num = Math.floor((codetime.expire - new Date().getTime()) / 1000);
        if (num > 0) {
          this.time = num;
          this.isFetchingCode = true;
          this.changeContent();
        }
      }
    },
    getsmsCode() {
      // TODO: get smscode api
      this.isFetchingCode = true;
      this.changeContent();
    },
    changeContent() {
      let that = this;
      if (!that.isFetchingCode) return;
      that.codeContent = "倒计时" + that.time + "s";
      let circleTime = time => {
        let t = setInterval(() => {
          if (time > 1) {
            time--;
            let expire = new Date().getTime() + time * 1000;
            that.$ls.set(
              nameWaitTime,
              {
                time,
                expire
              },
              expire
            );
            that.codeContent = "倒计时" + time + "s";
          } else {
            that.time = codeWaitingTime;
            that.$ls.remove(nameWaitTime);
            that.codeContent = "获取验证码";
            that.isFetchingCode = false;
            clearInterval(t);
          }
        }, 1e3);
      };
      circleTime(that.time);
    }
  }
};
</script>
