<template>
  <div class="partyAuthSuccess" v-if="pageShow">
    <template v-if="user.partyStatusForWX == 2">
      <image src="https://cdn.cunwuyun.cn/pingchang/success.png"/>
      <h2 v-text="`认证成功！`"/>
      <div class="btn" @click="goBack" v-text="`返回`"/>
    </template>
    <template v-if="user.partyStatusForWX == 3">
      <image src="https://cdn.cunwuyun.cn/pingchang/fail.png"/>
      <h2 v-text="`党员认证审核未通过！`"/>
      <div class="feedback">
        审核意见：{{details.auditOpinion}}
      </div>
      <div class="btn" @click="rewrite">重新提交</div>
    </template>
    <div class="isReview" v-if="user.partyStatusForWX == 1">
      <image src="https://cdn.cunwuyun.cn/pingchang/review.png"/>
      <div class="result" v-text="`认证正在审核中，请耐心等待`"/>
      <div class="btn" @click="rewrite">重新提交</div>
    </div>
  </div>
</template>
<script>
import {mapState} from "vuex";

export default {
  data() {
    return {
      details: {},
      pageShow: false
    }
  },
  computed: {
    // 0未认证 1认证中 2已认证 3认证失败
    ...mapState(['user']),
  },
  onShow() {
    uni.setNavigationBarTitle({
      title: '党员认证'
    });
    if(this.user.partyStatusForWX == 3) {
      this.getDetail()
    }
    this.pageShow = true
  },
  methods: {
    rewrite() {
      uni.redirectTo({url: "./partyAuthApply"})
    },
    goBack() {
      uni.navigateBack({})
    },
    getDetail() {
      this.$instance.post(`/app/appparty/detail?id=${this.user.partyId}`).then(res=> {
        if(res?.data) {
          this.details = res.data
        }
      })
    },
  }
}
</script>
<style lang="scss">
@import "~dvcp-wui/common";

.partyAuthSuccess {
  height: 100vh;
  padding-top: 96px;
  box-sizing: border-box;
  text-align: center;
  background-color: #fff;
  overflow: hidden;

  image {
    width: 240px;
    height: 240px;
    margin-bottom: 16px;
  }

  h2 {
    margin-bottom: 16px;
    color: #333333;
    font-size: 40px;
    font-weight: 700;
  }

  .feedback {
    width: 80vw;
    margin: 0 auto;
    min-height: 192px;
    max-height: 600px;
    overflow-y: scroll;
    background: #EFF5FA;
    border-radius: 0 8px 8px 0;
    text-align: left;
    padding: 24px;
    box-sizing: border-box;
    font-size: 26px;
    color: #999999;
  }

  span {
    font-size: 28px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: bold;
    color: #333;
    margin-bottom: 40px;
    justify-content: center;

    .blue {
      color: #4181FF;
    }
  }

  .btn {
    width: 320px;
    height: 88px;
    line-height: 88px;
    margin: 48px auto 0;
    color: #fff;
    font-size: 34px;
    background: #4181FF;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.02);
    border-radius: 16px;

    &.plain {
      background: #fff;
      color: #4181FF;
      border: 2px solid #4181FF;
    }
  }

  .isReview {
    margin-top: -272px;
    padding: 224px 32px 0;
    box-sizing: border-box;
    height: calc(100vh + 272px);
    background-color: #fff;

    .image {
      width: 240px;
      height: 240px;
      margin-bottom: 16px;
    }

    .result {
      margin-bottom: 16px;
      color: #333333;
      font-size: 40px;
      font-weight: 700;
    }
  }
}
</style>
