<template>
    <div class="shop">
      <div class="shop_info">
        <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="shop_title">商户入驻申请</h3>
            <Steps :current="0" class="step">
                <Step title="注册账号"></Step>
                <Step title="完善信息"></Step>
                <Step title="平台审核"></Step>
                <!-- <Step title="缴纳费用"></Step> -->
                <Step title="设置密码"></Step>
                <Step title="完成"></Step>
            </Steps>
            <div class="userInfo">
              <div class="info-input">
                <Input class="phone" v-model="phone" placeholder="请输入注册的手机号" clearable/>
                <div class="verificationCode">
                    <Input class="yzm" v-model="verification" placeholder="请输入验证码" clearable>
                      <Button slot="append" class="code" type="primary" v-show="loading" @click="verificationCode">发送</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 type="primary" @click="registeredNumber" class="sub" :loading="submitLoading">提交</Button>
            </div>
              <!-- <p>已经提交申请,确认申请进度</p> -->
              <!-- <Button class="confirmProgress" type="text" ghost to="/searchShop">已经提交申请,确认申请进度</Button> -->
              <!-- <div class="agreement">
                您提交入驻申请，即代表您同意 <Button type="text">《一幕影链商户服务协议》</Button> 与 <Button type="text">《一幕影链商户隐私协议》 </Button>
              </div> -->
            </div>
        </div>
      </div>
    </div>

</template>
<script>
// import {setLocalStorage } from '@/libs/util'
export default {
  data () {
    return {
      phone: '',
      verification: '',
      type: '1',
      loading: true,
      count: '',
      timer: null,
      submitLoading: false
    }
  },
  methods: {
    // 发送验证码
    verificationCode () {
      let phone = this.phone
      let type = this.type
      if (phone == '') {
        return this.$Notice.error({ title: '手机号码不能为空' })
      }
      // console.log('验证码', phone)
      this.api({
        apiName: 'sendVerification',
        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
                this.submitLoading = false
              }
            }, 1000)
          }
        }
      })
    },
    handleCancel () {
      this.$router.push({ path: '/' })
    },
    // 注册账号
    registeredNumber () {
      let phone = this.phone
      let code = this.verification
      if (phone == '' || code == '') {
        return this.$Notice.error({ title: '手机号码或者验证码不能为空' })
      }
      this.submitLoading = true
      // console.log('注册账号', phone, code)
      this.api({
        apiName: 'registeredNumber',
        postdata: {
          phone,
          code

        },
        success: (res) => {
          if (res) {
            this.submitLoading = false
            // console.log('成功了')
            // localStorage.setItem('shopId', JSON.stringify(res.data))
            // this.$router.push('/shopInfo')
            //  this.$router.push({name:'shopInfo',params: {id:res.data}});
            this.$router.push({ path: '/shopInfo', query: { code: res.data.token, phone } })
          }
        },
        complete: () => {
          this.submitLoading = false
          this.loading = true
        }
      })
    },
    // 查询进度
    searchShop () {
      console.log('查询进度')
    }
  }
}

</script>

<style lang="less" scoped>
*{
    margin: 0;
    padding: 0;
}

.shop{
    background: #F7F7F7 url('../../assets/images/bg.png') no-repeat 0 0 scroll;
    width: 100%;
    overflow-y: scroll;
    height:100%;
    padding: 15px;
    // box-sizing: border-box;
    // position: relative;
    .shop_info{
      min-width: 1300px;
      position: relative;
      min-height: 800px;
      .head{
        position: relative;
        min-width: 1200px;
        // min-width:80%;
        // max-width:80%;
        // height: 300px;
        .bg{
            display: block;
            width: 100%;
            height: 10%;
        }
        .logo{
            position: absolute;
            // top: 78px;
            // left: 368px;
            top: 78px;
            left: 368px;
        }
        .logo_title{
            width: 280px;
            height: 30px;
            font-size: 32px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #FFFFFF;
            line-height: 46px;
            position: absolute;
            top: 86px;
            left: 18%;
        }
      }
      .main{
        // min-width:60%;
        // max-width:80%;
        width: 1200px;
        min-height:650px;
        background: #FFFFFF;
        border-radius: 10px;
        // margin: 0 auto;
        // margin-top: 200px;
        position: absolute;
        top:54%;
        left: 50%;
        transform: translate(-50%,-50%);
        // padding-bottom: 20px;
        .shop_title{
            padding-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 9%;
        }
        /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;
              /deep/
              .yzm{
                  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;
              }
          }
          .confirmProgress{
            width: 214px;
            height: 19px;
            font-size: 18px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #999999;
            line-height: 24px;
            position: absolute;
            top: 86%;
            left: 60%;
          }
          .agreement{
            // width: 600px;
            width: 400px;
            margin: 30px auto;
            height: 19px;
            font-size: 14px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #999999;
            line-height: 24px;
            // position: absolute;
            // top: 100%;
            // left: 40%;
          }
        }
      }
    }
}

</style>
