<template>
  <div class="wrapper">
    <template v-if="status == 0">
      <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-else-if="status == 1">
      <div class="pane-body">
        <div class="image success"></div>
        <h1>审核通过</h1>
        <p class="desc">您的资料已审核通过，现您可以商家入驻。</p>
      </div>

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

    <template v-else-if="status == 2">
      <div class="image fail"></div>
      <div class="pane-body">
        <h1>审核不通过</h1>
        <p class="desc">{{message}}</p>
      </div>

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

    <template v-else>
      <div class="image waiting"></div>
      <div class="pane-body">
        <h1>未提交</h1>
        <p class="desc">您的资料尚未提交审核。</p>
      </div>

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

  </div>
</template>

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

const { mapState, mapActions, mapMutations } = createNamespacedHelpers(
  'license/form'
);

export default {
  props: {},
  data() {
    return {};
  },
  computed: {
    ...mapState(['status', 'message'])
  },
  methods: {
    ...mapActions(['getStoreStatus']),
    onFinishClick() {
      this.$yoho.finishPage({});
    },
    onRepeatClick() {
      this.$store.commit('license/form/FETCH_UFO_STATUS_SUCCESS', {status: -1});
    },
    async onCashClick() {
      const result = await this.getStoreStatus();

      if (result.data === true || result.data.isStoredSeller) {
        this.$yoho.goPage('go.ufo', {
          pagename: 'merchantsSettled',
          isnavhidden: 1,
        });
      } else if (result.data.storedBefore) {
        this.$createToast({
          txt: '您已退出入驻，没有入驻资格',
          type: 'warn',
        }).show();
      } else {
        this.$yoho.goPage('go.ufo', { pagename: 'MerchantEntry' });
      }
    }
  },
  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>