<template>
  <div class="to-review">
    <div class="logo-bg">
      <img v-if="false" src="../../../public/images/logo_white_sm.png" alt="">
    </div>
    <el-card class="box-card">
      <div slot="header" class="clearfix steps">
        <el-steps :active="3" align-center finish-status="success" process-status="error">
          <el-step title="注册账号"></el-step>
          <el-step title="填写主体信息"></el-step>
          <el-step title="填写店铺信息"></el-step>
          <el-step title="提交入驻审核"></el-step>
        </el-steps>
      </div>
      <div class="main">
        <div class="main-con">
          <p>
            <img src="../../../public/images/entry/reviewFail.png" alt="">
          </p>
          <p>非常抱歉，您的资料审核不通过！</p>
          <p>不通过原因：{{ msg }}！请您重新提交认证资料！</p>
          <p>如果您有其它的问题，可以拔打我们的服务电话与我们联系</p>
<!--          <p>服务电话：4000-188-199</p>-->
          <p style="padding-top: 40px;"><el-button type="primary" @click="reSubmit">重新提交</el-button></p>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
  import { getInfo,getShopInf } from '@/api/module/entry';
  export default {
    name: "ReviewFail",
    data() {
      return {
        msg: '具体原因，请联系售后'
      }
    },
    created() {
      if(this.$route.params.msg) {
        this.msg = this.$route.params.msg;
      }
      /** 页面刷新，更新 客户审核状态 */
      getInfo().then(res=> {
        if (res.code == 1 && res.data.user) {
          if (res.data.user.state == 1) {
            this.$router.push({path: '/index'});
          }
          if (res.data.user.state == 2) {
            this.$router.push({path: '/reviewing'})
          }
          if (res.data.user.state == 3) {
            this.$router.push({path: '/reviewFail'});
            getShopInf().then(res=> {
              if (res.code == 1 && res.data.Apply.content != '') {
                this.msg = res.data.Apply.content;
              }
            });
          }
        }
      });
    },
    mounted() {
      /** 禁止 浏览器 后退 */
      history.pushState(null,null,document.URL);
      window.addEventListener('popstate', function () {
        history.pushState(null, null, document.URL);
      })
    },
    methods: {
      // 重新提交审核
      reSubmit() {
        this.$router.push({path: '/process'});
      }
    }
  }
</script>

<style lang="scss" type="text/stylus" scoped>
  .to-review {
    font-size : 16px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    .logo-bg {
      height: 60px;
      background: #1890ff;
      img {
        height: 44px;
        margin: 8px 0 8px 20px;
      }
    }
    .box-card {
      width: 80%;
      margin: 30px auto 30px;
      height: calc(100% - 120px);

    }
    .steps {
      height: 70px;
      width: 60%;
      margin: 20px auto 20px;
    }
    .el-step >>> .el-step__title {
      font-size: 16px;
      line-height: 18px;
      padding-top: 20px;
      color: #333;
    }
    //#13ce66

    .el-step >>> .el-step__head.is-success {
      color: #1890ff;
      border-color: #1890ff;

      .el-step__line {
        background-color: #1890ff;
      }
    }

    .el-step >>> .el-step__head.is-process {
      color: red;
    }
    .el-step >>> .el-step__title.is-process {
      color: red;
      font-weight : 400;
    }
    .el-steps >>> .el-step.is-horizontal .el-step__line {
      background-color: red;
    }

    .el-step >>> .el-step__title.is-success {
      color: #000;
    }

    .el-step >>> .el-step__title.is-error {
      color: red;
      font-weight : 400;
    }

    .main {
      width: 100%;
      height: calc(66% - 120px);
      display:table;
      .main-con {
        display:table-cell;
        vertical-align:middle;
        p {
          text-align : center;
        }
        //p:nth-child(1) {
        //  img {
        //    widht: 50px;
        //    height: 50px;
        //  }
        //}
        p:nth-child(2) {
          font-size: 24px;
          font-weight : bold;
          padding: 0px 0;
        }
      }
    }
  }
</style>