<template>
  <div class="page-layout">
    <div class="center">
      <div class="header">
        <div class="reg_logo">
          <img src="../../../static/images/logo.png" />
        </div>
        <div class="reg_title">{{title}}</div>
        <a class="reg_btn" @click=" returnClick" target="_self">[返回]</a>
      </div>
      <div class="content">
        <div class="from-block">
          <div class="step-content">
            <a-steps :current="current">
              <a-step> <span slot="title">验证手机号</span></a-step>
              <a-step> <span slot="title">设置密码</span></a-step>
              <a-step> <span slot="title">成功</span></a-step>
            </a-steps>
          </div>
          <a-form-model v-if="current == 0" ref="formData" :model="formData" :rules="rules" :label-col="{ span: 2 }" :wrapper-col="{ span: 22 }" key="1">
            <a-row>
              <a-col :span="24">
                <a-form-model-item ref="mobile" label="手机号" prop="mobile" :label-col="{ span: 2 }" :wrapper-col="{ span: 22 }">
                  <a-input ref="Mobile" v-model="formData.mobile" @blur="() => {$refs.mobile.onFieldBlur(); }" style="width:200px;" />
                  <span style="margin-left: 5px;"></span>
                  <a-button @click="verification()" :disabled="Disabled">{{Content}}</a-button>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="24">
                <a-form-model-item ref="vCode" label="验证码" prop="vCode" :label-col="{ span: 2 }" :wrapper-col="{ span: 22 }">
                  <a-input v-model="formData.vCode" @blur="() => {$refs.vCode.onFieldBlur(); }" style="width:150px;" />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="24" style="text-align: center;">
                <a-button type="primary" @click="next">下一步</a-button>
              </a-col>
            </a-row>
          </a-form-model>
          <a-form-model v-if="current == 1" ref="formPwd" :model="formPwd" :rules="pwdRules" :label-col="{ span: 2 }" :wrapper-col="{ span: 22 }" key="2">
            <a-row>
              <a-col :span="24">
                <a-form-model-item label="新密码" prop="newPassword">
                  <a-input type="password" placeholder="请输入新密码" v-model="formPwd.newPassword" style="width:300px;" />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="24">
                <a-form-model-item label="确认密码" prop="checkPwd">
                  <a-input type="password" placeholder="请确认新密码" v-model="formPwd.checkPwd" style="width:300px;" />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="24" style="text-align: center;">
                <a-button type="primary" @click="submit">确定</a-button>
              </a-col>
            </a-row>
          </a-form-model>
          <a-result v-if="current == 2" status="success" title="" :sub-title="subMsg">
          </a-result>
          <a-modal v-model="showCode" title="验证" class="sc_modal" :width="'300px'" :dialog-style="{ top: '35%' }" :maskClosable="false" :footer="null" destroyOnClose>
            <div style="line-height: 60px;">
              <a-row>
                <a-col :span="24" style="text-align: center;">
                  <img :src="codeUrl" @click="getCode">
                  <a-input v-model="verifiCode" style="width:100px;margin-left: 10px;" />
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="24" style="text-align: center;">
                  <a-button type="primary" @click="verifiClick()">确定</a-button>
                </a-col>
              </a-row>
            </div>
          </a-modal>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { isEmptyParams, checkPhone } from "@/views/utils/common"
import moment from 'moment'
import UnitTreeSelect from '@/views/components/common/unitTreeSelect'

export default {
  name: "PersonRegister",
  components: {
     UnitTreeSelect
  },
  data () {
    return {
      current: 0,
      Content: '获取验证码',
      Time: 60,
      Disabled: false,
      showCode: false,
      codeUrl: null,
      uuid: null,
      verifiCode: null,
      title: process.env.VUE_APP_SYSTEM_TITLE,
      formData: {
        mobile: null, vCode: null
      },
      formPwd: { uuid: null, newPassword: null, checkPwd: null, },
      rules: {
        mobile: [],
        vCode: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
      },
      pwdRules: {
        newPassword: [
          { required: true, message: '请输入新密码' },
          {
            validator: (rule, value, callback) => {
              if (value == '' || value == undefined) {
                callback()
              }
              let ckPwd = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,10}$/;
              if (ckPwd.test(value)) {
                callback()
              } else {
                callback(new Error('密码只能由数字加字母组成，长度为6-10位~'));
              }
            }
          },
        ],
        checkPwd: [
          { required: true, message: '请确认新密码' },
          {
            validator: (rule, value, callback) => {
              if (value == '' || value == undefined) {
                callback()
              }
              if (value == this.formPwd.newPassword) {
                callback()
              } else {
                callback(new Error('与新密码不一致！'));
              }
            },
          },
        ],
      },
      subMsg: "重置成功请使用新密码登录！",
    }
  },
  props: {

  },
  created () {
    this.initData()
  },
  methods: {
    moment,
    initData () {
      this.rules.mobile = [
        { required: true, message: '请输入手机号', trigger: 'blur' },
        {
          validator: (rule, value, callback) => {
            if (value == '' || value == undefined) {
              callback()
            }
            var ckPhone = /^1(?:3[0-9]|4[5-9]|5[0-9]|6[12456]|7[0-8]|8[0-9]|9[0-9])[0-9]{8}$/;
            if (ckPhone.test(value)) {
              let pars = { mobile: value, type: 'reset' }
              this.$api.base.checkMobile(pars).then(({ data = {} }) => {
                if (data) {
                  callback()
                }
                callback(new Error('手机号不存在'));
              })
            } else {
              callback(new Error('请输入正确的手机号'));
            }
          }
        },
      ]
    },
    onBirthdayChange (date, dateString) {
      this.formData.birthday = dateString;
    },
    closeWindow () {
      this.$emit('close', 'close')
    },
    returnClick () {
      this.$router.push('/')
    },
    verification () {
      this.verifiCode = null
      this.$refs.formData.validateField('mobile', (error) => {
        if (!error) {
          this.showCode = true
          this.getCode()
        }
      })
    },
    getCode () {
      this.verifiCode = null
      this.$api.base.getCode().then(({ data = {} }) => {
        if (data) {
          this.uuid = data.uuid
          this.codeUrl = data.img
        }
      }).catch(() => { })
    },
    verifiClick () {
      if (this.verifiCode) {
        let par = { uuid: this.uuid, code: this.verifiCode, mobile: this.formData.mobile }
        this.$api.base.sendVerificationCode(par).then(({ data = {} }) => {
          if (data) {
            this.uuid = null
            this.verifiCode = null
            this.showCode = false
            this.countStart()
          } else {
            this.getCode()
          }
        }).catch(() => {
          this.getCode()
        })
      } else
        this.$message.error('请填写验证码')
    },
    countStart () {
      this.Disabled = true
      let time = setInterval(() => {
        if (this.Time < 1) {
          clearInterval(time)
          this.Content = '获取验证码'
          this.Time = 60
          this.Disabled = false
        } else {
          this.Time--
          this.Content = this.Time + 's后重新发送'
        }
      }, 1000)
    },
    next () {
      this.$refs.formData.validate(valid => {
        if (valid) {
          let pars = isEmptyParams(this.formData)
          this.$api.base.resetCheck(pars).then(({ data = {} }) => {
            if (data) {
              this.formPwd.uuid = data
              this.current = 1
            }
          }).catch(() => {
            this.$message.error('失败，请稍后重试！')
          })
        } else { return false }
      })
    },
    submit () {
      this.$refs.formPwd.validate(valid => {
        if (valid) {
          let pars = isEmptyParams(this.formPwd)
          this.$api.base.resetPwd(pars).then(({ data = {} }) => {
            if (data) {
              this.current = 2
            } else {
              this.current = 0
              this.formData.vCode = null
            }
          }).catch(() => {
            this.$message.error('失败，请稍后重试！')
          })
        } else { return false }
      })
    },
  },
}
</script>
<style lang="less" scoped>
.page-layout {
  height: 100vh;
  overflow: auto;
  font-family: "Microsoft YaHei";
  color: #333;
  background-color: #ffffff;
  font-size: 16px;
  background-image: url(../../../static/images/htmlbg.jpg);
}
.center {
  width: 900px;
  height: 100vh;
  margin: 0 auto;
  overflow: auto;
  padding: 0px 20px 0px 20px;
  background-color: #ffffff;
  padding: 0px 20px 0px 20px;
}
.header {
  position: relative;
  border-bottom: 1px solid #b1afaf;
  height: 80px;
  text-align: right;
  box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
  .reg_logo {
    bottom: 0px;
    left: 0px;
    width: 40px;
    height: 60px;
    line-height: 60px;
    position: absolute;
  }

  .reg_logo img {
    width: 40px;
    height: 40px;
  }

  .reg_title {
    height: 60px;
    line-height: 60px;
    position: absolute;
    bottom: 0px;
    left: 45px;
    width: 500px;
    color: #595959;
    text-align: left;
    font-size: 25px;
  }
  a.reg_btn {
    position: absolute;
    top: 48px;
    right: 6px;
    display: inline-block;
    width: 50px;
    height: 34px;
    line-height: 34px;
    // background: url(../../../static/images/ico.a07a352b.png) no-repeat left -1005px;
    color: #38bcd5;
    font-size: 15px;
  }
}
.content {
  .ant-result-title {
    margin-left: 20px !important;
  }
  .ant-result .ant-result-title {
    margin-left: 20px !important;
  }
  .footer {
    background: #f1f1f1;
    margin-top: 20px !important;
    padding: 20px 0 !important;
    width: 100%;
  }
  .code {
    width: 33%;
    display: inline-block;
    height: 38px;
    img {
      cursor: pointer;
      vertical-align: middle;
    }
  }
}
.from-block {
  margin-top: 20px;
  padding: 5px;
  border: 1px solid #ece7e7;
}
.step-content {
  padding: 5px 30px 20px 10px;
}
</style>