<template>
    <div class="shopSearch">
      <div class="shopSearch_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="titleSearch">商户入驻申请进度查询</h3>
            <div class="userInfoSearch">
              <div class="info-input">
                <Input class="phoneSearch" v-model="phone" placeholder="请输入已经申请的账号" clearable/>
                <div class="verificationCodeSearch">
                    <Input class="yzm" v-model="verification" placeholder="请输入验证码" clearable>
                      <Button slot="append" class="codeSearch" 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="submitSearch">
                    <Button class="cancel" @click="handleCancel">取消</Button>
                    <Button class="sub" type="primary" @click="searchShop">确定</Button>
            </div>
                <!-- <p>已经提交申请,确认申请进度</p> -->
                <Button class="confirmProgressSearch" type="text" ghost to="/applyShop">尚未提交入驻申请，去申请</Button>
            </div>
        </div>
      </div>

    </div>

</template>
<script>
export default {
  data () {
    return {
      phone: '',
      verification: '',
      type: '2',
      loading: true,
      count: '',
      timer: null
    }
  },
  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
              }
            }, 1000)
          }
        }
      })
    },
    handleCancel () {
      this.$router.push({ path: '/applyShop' })
    },
    searchShop () {
      console.log('查询进度')
      let phone = this.phone
      let code = this.verification
      if (phone == '' || code == '') {
        return this.$Notice.error({ title: '手机号码或者验证码不能为空' })
      }
      this.api({
        apiName: 'searchShop',
        postdata: {
          phone,
          code
        },
        success: (res) => {
          if (res) {
            console.log('成功了', res.data)
            // this.$router.push('/shopInfo')
            this.$router.push({ path: '/shopInfo', query: { code: res.data.token, phone: this.phone } })
          }
        }
      })
    }
  }
}

</script>
<style lang="less" scoped>
.shopSearch{
    background: #F7F7F7 url('../../assets/images/bg.png') no-repeat 0 0 scroll;
    width: 100%;
    overflow-y: scroll;
    height:100%;
    .shopSearch_info{
      min-width: 1300px;
      position: relative;
      min-height: 800px;
      .head{
        position: relative;
        min-width: 1200px;
        .bg{
            display: block;
            width: 100%;
            height: 10%;

        }
        .logo{
            position: absolute;
            top: 78px;
            left: 368px;
        }
        .logo_title{
            width: 220px;
            height: 30px;
            font-size: 32px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #FFFFFF;
            line-height: 46px;
            position: absolute;
            top: 86px;
            left: 360px;
        }

    }
    .main{
        width: 1200px;
        min-height:650px;
        background: #FFFFFF;
        border-radius: 10px;
        position: absolute;
        top:64%;
        left: 50%;
        transform: translate(-50%,-50%);
        .titleSearch{
            padding-top: 5%;
            font-size: 34px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #333333;
            line-height: 46px;
            text-align: center;
        }
        .userInfoSearch{
            width: 100%;
            padding: 50px;
            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;
          }
            .verificationCodeSearch{
                margin: 60px 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
              }
            }
            .submitSearch{
              width: 400px;
                // margin: 0 auto;
                margin: auto;
                display: flex;
                justify-content: space-between;
                .cancel{
                    width: 180px;
                    height: 48px;
                }
                .sub{
                    width: 180px;
                    height: 48px;
                }
            }
            .confirmProgressSearch{
                width: 214px;
                height: 19px;
                font-size: 18px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #999999;
                line-height: 24px;
                position: absolute;
                top: 90%;
                left:60%;
            }
        }
      }
    }
}

</style>
