<template>
  <LayoutApp>
    <div class="wrapper">
    <template v-if="value === 1">
      <div class="image waiting"></div>
      <div class="pane-body">
        <h1>审核中</h1>
        <p class="desc">您的资料已提交审核，认证成功后我们将会第一时间通知您。</p>
      </div>

        <div class="footer" @click="onFinishClick">返回</div>
    </template>

    <template v-if="value === 2">
      <div class="image fail"></div>
      <div class="pane-body">
        <h1>审核不通过</h1>
        <p class="desc">您提交的姓名和身份证不匹配。</p>
      </div>

        <div class="footer" @click="onRepeatClick">重新提交</div>
    </template>

    <template v-if="value === 3">
      <div class="pane-body">
        <div class="image success"></div>
        <h1>审核通过</h1>
        <p class="desc">您的资料已审核通过，现您可以商家入驻。</p>
      </div>

        <div class="footer" @click="onCashClick">商家入驻</div>
    </template>
    </div>
  </LayoutApp>
</template>

<script>
import LayoutApp from '../../components/layout/layout-app';
import FixedBottom from '../components/fixed-bottom';

export default {
  props: {
    value: {
      type: Number,
      default() {
        return 1;
      }
    }
  },
  data() {
    return { };
  },
  methods: {
    onFinishClick() {
      this.$yoho.finishPage({});
    },
    onRepeatClick() {
      var url = window.location.protocol + '//m.yohobuy.com/mapp/auth/form.html';

      this.$yoho.goNewPage({url});
    },
    onCashClick() {

    }
  },
  components: {
    LayoutApp,
    FixedBottom
  }
};
</script>

<style lang="scss" scoped>

  h1 {
    font-size: 40px;
    margin: 20px 0;
  }

  .footer {
    position: absolute;
    bottom: 40%;
    width: 600px;
    height: 100px;
    color: white;
    text-align: center;
    line-height: 100px;
    font-size: 32px;
    background-color: #002b47;
  }

  .pane-body {
    height: 100%;
    overflow: scroll;
    text-align: center;
  }

  .image {
    width: 120px;
    height: 120px;
    margin: 40px auto;

    &.success {
      background-image: url("~statics/image/auth/success.png");
      background-size: 100% 100%;
    }

    &.waiting {
      background-image: url("~statics/image/auth/waiting.png");
      background-size: 100% 100%;
    }

    &.fail {
      background-image: url("~statics/image/auth/fail.png");
      background-size: 100% 100%;
    }
  }

  .desc {
    font-size: 28px;
    line-height: 1.5;
  }

  .wrapper {
    padding: 100px 76px 0;
    text-align: center;
  }
</style>