<template>
    <div class="shop">
      <div class="head">
            <img class="bg" src="../../assets/images/bg.png" alt="">
            <!-- <img class="logo" src="../../assets/images/logo_1.png" alt=""> -->
            <!-- <p class="logo_title">一幕数字藏品商户平台</p> -->
        </div>
        <div class="main">
          <h3 class="title">忘记密码，重新设置新密码</h3>
          <Steps :current="status" class="step">
              <Step title="验证身份"></Step>
              <Step title="设置新密码"></Step>
              <Step title="完成"></Step>
          </Steps>
          <div class="userInfo" v-if="status ==0">
            <div class="info-input">
              <Input class="phone" v-model="phone" placeholder="请输入登录手机号" clearable/>
              <div class="verificationCode">
                  <Input class="verification" v-model="verification" placeholder="请输入验证码" clearable v-if="status ==0">
                    <Button slot="append" class="code" type="primary" v-show="loading" @click="sendAuthSms">发送</Button>
                    <Button slot="append" class="code" type="primary" v-show="!loading">{{count}}</Button>
                  </Input>
              </div>
            </div>
            <div class="submit">
                  <Button class="cancel"  @click="handleCancel">取消</Button>
                  <Button class="sub" type="primary" @click="registeredNumber">提交</Button>
            </div>
          </div>
          <div class="userInfo" v-if="status ==1">
            <div class="info-input">
              <Input class="phone" type="password" v-model="newPwd" placeholder="请输入密码" clearable style="width: 400px" />
            </div>
            <div style=" margin: 40px 0;">
                <Input type="password" v-model="newPwd2" placeholder="请再次输入密码" clearable style="width: 400px" />
              </div>
            <div class="submit">
              <Button class="cancel" @click="handleCancel">取消</Button>
              <Button class="sub" type="primary" @click="resetPwd">提交</Button>
            </div>
          </div>
          <div class="tologin" v-if="status ==2">
            <p>您已经成功重新设置了登录密码，请妥善保管</p>
            <Button type="primary" to="/login" class="login">去登录</Button>
          </div>
        </div>

    </div>

</template>
<script>
import { setLocalStorage } from '@/libs/util'
export default {
  data () {
    return {
      phone: '',
      verification: '',
      loading: true,
      count: '',
      timer: null,
      // statu:0,
      status: 0,
      newPwd: '',
      newPwd2: '',
      type: 3
    }
  },
  // computed:{
  //     sta(){
  //          let statu = sessionStorage.getItem("status") || 0
  //         return statu
  //     }
  // },
  methods: {
    // 发送验证码
    sendAuthSms () {
      let phone = this.phone
      let type = 4 // 忘记密码
      console.log('验证码', phone)
      if (phone == '') {
        return this.$Notice.error({ title: '手机号码不能为空' })
      }
      this.api({
        apiName: 'sendAuthSms',
        postdata: {
          phone,
          type
        },
        success: (res) => {
          const TIME_COUNT = 60
          if (!this.timer) {
            this.count = TIME_COUNT
            this.loading = false
            this.timer = setInterval(() => {
              if (this.count > 0 && this.count <= TIME_COUNT) {
                this.count--
              } else {
                this.loading = true
                clearInterval(this.timer)
                this.timer = null
              }
            }, 1000)
          }
        }
      })
    },
    // 验证身份
    registeredNumber () {
      // console.log('查询进度')
      let phone = this.phone
      let code = this.verification
      if (phone == '' || code == '') {
        return this.$Notice.error({ title: '手机号码或者验证码不能为空' })
      }
      this.api({
        apiName: 'authentication',
        postdata: {
          phone,
          code
        },
        success: (res) => {
          if (res) {
            console.log('成功了', res.data)
            sessionStorage.setItem('Temporarytoken', res.data)
            sessionStorage.setItem('phone', this.phone)
            // sessionStorage.setItem("status", this.status = 1)
            this.status = 1
          }
        }
      })
    },
    // 重置密码
    resetPwd () {
      let newPwd = this.newPwd
      let newPwd2 = this.newPwd2
      let phone = sessionStorage.getItem('phone')
      let token = sessionStorage.getItem('Temporarytoken')
      let type = this.type
      if (newPwd == '' || newPwd2 == '') {
        return this.$Notice.error({ title: '新密码不能为空' })
      } else if (newPwd !== newPwd2) {
        return this.$Notice.error({ title: '请您保持两次输入的密码一致' })
      }
      this.api({
        apiName: 'resetPwd',
        postdata: {
          newPwd,
          newPwd2,
          phone,
          token
        },
        success: (res) => {
          if (res) {
            console.log('修改密码成功')
            this.status = 2
            sessionStorage.clear()
          }
        }
      })
    },
    handleCancel () {
      this.$router.push('/')
    }
  }
}

</script>

<style lang="less" scoped>
.shop{
    min-width: 1200px;
    overflow-y: scroll;
    height:100%;
    background: #F7F7F7;
    position: relative;
    .head{
      position: relative;
      .bg{
          display: block;
          width: 100%;
          height: 10%;
      }
      .logo{
          position: absolute;
          top: 78px;
          left: 368px;
      }
      .logo_title{
          font-size: 32px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #FFFFFF;
          line-height: 46px;
          position: absolute;
          top: 86px;
          left: 20%;
      }
    }
    .main{
      width: 60%;
      min-height:700px;
      background: #FFFFFF;
      border-radius: 10px;
      position: absolute;
      top: 160px;
      left: 20%;
      .title{
        margin-top: 5%;
        font-size: 34px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #333333;
        line-height: 46px;
        text-align: center;
      }
      .step{
        width: 80%;
        margin: 0 auto;
        padding: 50px 0 0 14%;
      }
      /deep/
      .ivu-steps-title{
        line-height: 26px;
      }
      .userInfo{
        width: 100%;
        padding: 60px;
        text-align: center;
        position: relative;
        .info-input {
          width: 400px;
          margin: auto;
          .phone {
            width: 100%;
          }
        }
        /deep/
        .ivu-input{
          height: 48px;
        }
        /deep/
        .ivu-input-icon {
          line-height: 48px;
        }
        .verificationCode{
            margin: 40px 0;
            width: 400px;
            height: 48px;
            .verification{
                width: 400px;
                height: 48px;
            }
            /deep/.ivu-input-group-append{
                width: 90px;
                // height: 48px;
                background-color: #2d8cf0;
                border-color:#2d8cf0;
                color:#fff
            }
        }
        .submit{
              width: 400px;
              // margin: 0 auto;
              margin: auto;
              display: flex;
              justify-content: space-between;
              .cancel{
                  width: 180px;
                  height: 48px;
              }
              .sub{
                  width: 180px;
                  height: 48px;
              }
          }
      }
    }
  }

.tologin{
          font-size: 20px;
          text-align: center;
          margin: 150px;
          .login{
            margin: 50px;
            width: 90px;
              height: 48px;
              padding: 15px;
          }
        }
</style>
