<template>
  <div class="list-box">
    <template v-for="(item, index) in data">
      <div class="item-box" :key="index">
        <div class="left">
          <div class="title">三级认证申请</div>
          <div :class="isClassText(item.approve_status).class">{{ isClassText(item.approve_status).text }}</div>
          <div class="xx" v-if="item.approve_status == 0">
            审批备注：<span>{{ item.approve_remark }}</span>
          </div>
          <div class="xx" v-if="item.approve_status != -1">
            审批时间：<span>{{ item.updated_time }}</span>
          </div>
        </div>
        <div class="right">
          <template v-if="item.approve_status == -1">
            <div class="btn" @click="goEdit(item.id)">编辑</div>
            <div class="btn" @click="revoke(item.id)">撤销</div>
          </template>
          <template v-if="item.approve_status == 0">
            <div class="btn" @click="goLook(item.id)">查看</div>
            <div class="btn" @click="revoke(item.id, '删除成功')">删除</div>
          </template>
          <template v-if="item.approve_status == 1">
            <div class="btn" @click="goLook(item.id)">查看</div>
            <div class="btn" v-if="item.pay == 0" @click="orderPays">支付</div>
          </template>
        </div>
        <!-- <div class="icon-yes" v-if="item.approve_status"></div> -->
      </div>
    </template>
    <!-- <div class="btn" @click="orderPays" style="font-size:30px;position: relative;z-index: 999;">支付</div> -->
    <template v-if="data.length == 0">
      <van-empty description="您还没有提交申请"/>
      <div class="list-btn" v-if="data.length == 0" @click="apply">申请三级认证</div>
    </template>
    <h5-pay :productId="productId" ref="h5pay"></h5-pay>
  </div>
</template>
<script>
import h5Pay from './buy/components/h5Pay.vue'
import { ImagePreview, Toast, Empty, Dialog } from 'vant'
import * as api from '@/api/attestation'
export default {
  components: {
    [ImagePreview.name]: ImagePreview,
    [Toast.name]: Toast,
    [Empty.name]: Empty,
    [Dialog.name]: Dialog,
    h5Pay
  },
  data() {
    return {
      productId: '6734697826573352960',
      data: []
    }
  },
  mounted() {
    this.getStatus()
  },
  computed: {
    isClassText() {
      return (type) => {
        const types = parseInt(type)
        const cont = {
          class: '待审核',
          text: 'tag'
        }
        switch(types) {
          case -1:
            cont.text = '待审批'
            cont.class = 'tag'
            break
          case 0:
            cont.text = '审批驳回'
            cont.class = 'tag stu2'
            break
          case 1:
            cont.text = '审批通过'
            cont.class = 'tag stu3'
            break
        }
        return cont
      }
    }
  },
  methods: {
    orderPays() {
      this.$refs.h5pay.pay()
    },
    goLook(id) {
      this.$router.push({
        path: '/attestation/upload',
        query: {
          id: id,
          edit: 1,
          look: 1
        }
      })
    },
    goEdit(id) {
      this.$router.push({
        path: '/attestation/printing',
        query: {
          id: id,
          edit: 1
        }
      })
    },
    revoke(id, msg) {
      Dialog.confirm({
        message: '你确定要撤回申请吗？撤回后，需要重新填写资料提交申请。'
      }).then(() => {
        // const id = window.sessionStorage.dataId
        if (id) {
          api.revoke(id, { status: -2 }).then(response => {
            if (response.success) {
              msg ? Toast(msg) : Toast('撤销成功')
              window.sessionStorage.removeItem('dataId')
              window.sessionStorage.removeItem('dataUrl')
              setTimeout(() => {
                this.$router.go(0)
              }, 1000)
            }
          })
        }
      })
    },
    getStatus() {
      api.getAttestationStatus().then(response => {
        this.data = response
      })
    },
    backEdit() {
      this.$router.go(-1)
    },
    apply() {
      this.$router.push({
        path: '/attestation/form'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.list-box{
  width: 100%;
  height: 100%;
}
.list-btn{
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  width: 80%;
  height: 40px;
  line-height: 40px;
  background: linear-gradient(180deg, #FF9B96 0%, #CE3E3A 100%);
  border-radius: 5px;
  font-weight: bold;
  color: #FFFFFF;
  text-align: center;
  margin-bottom: 10px;
}
.item-box{
  position: relative;
  width: 90%;
  background: #FFFFFF;
  box-shadow: 0px 3px 20px 0px rgba(0, 0, 0, 0.05);
  margin: 15px auto;
  display: flex;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
  .left{
    .title{
      line-height: 100%;
      font-size: 15px;
      font-weight: bold;
      color: #222222;
    }
    .tag{
      font-size: 12px;
      font-weight: bold;
      color: #999999;
      line-height: 100%;
      margin-top: 30px;
      &.stu1{
        color: #FFC224;
      }
      &.stu2{
        color: #AB2824;
      }
      &.stu3{
        color: #24AB55;
      }
    }
    .xx{
      font-size: 12px;
      color: #999999;
      margin-top: 10px;
      span{
        color: #333333;
      }
    }
  }
  .right{
    margin-left: auto;
    .btn{
      text-align: center;
      line-height: 25px;
      width: 60px;
      height: 25px;
      border-radius: 5px;
      border: 0.5px solid #999999;
      font-size: 10px;
      color: #666;
      &:nth-child(1) {
        margin-bottom: 15px;
      }
    }
  }
}
.icon-yes{
  position: absolute;
  top: 50%;
  right: 85px;
  -webkit-transform: translateY(-50%);
  width: 75px;
  height: 57px;
  background: url(https://zws-imgs-pub.ezijing.com/static/public/ddd8126a0d9074b0408d3af5960db1f8.png);
  background-size: 100% 100%;
}
</style>
