<template>
  <div class="list-box">
    <template v-for="(item, index) in data.list">
      <div class="item-box" :key="index">
        <div class="left">
          <div class="title">三级认证申请</div>
          <div :class="isClassText(item.approve_status, item.pay).class">{{ isClassText(item.approve_status, item.pay).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 && item.approve_status != -3">
            审批时间：<span>{{ item.updated_time }}</span>
          </div>
        </div>
        <div class="right">
          <template v-if="item.approve_status == -1 || item.approve_status == -3">
            <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(item.id)">支付</div>
          </template>
        </div>
        <div class="icon-yes" v-if="item.approve_status == 1"></div>
      </div>
    </template>
    <!-- <div class="btn" @click="orderPays" style="font-size:30px;position: relative;z-index: 999;">支付</div> -->
    <template v-if="data.type == 1">
      <van-empty v-if="data.list.length == 0" description="您还没有提交申请"/>
    </template>
    <template v-if="data.type == 2">
      <template v-if="isTimeFlag">
        <van-empty v-if="data.list.length == 0" description="您还没有提交申请"/>
      </template>
      <template v-else>
        <van-empty v-if="data.list.length == 0" description="数据已过期，请等待下次统一办理。"/>
      </template>
    </template>
    <div class="list-btn" @click="apply" v-if="data.type_hidden">申请三级认证</div>
    <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 {
  metaInfo: {
    title: '三级认证个人信息申请'
  },
  components: {
    [ImagePreview.name]: ImagePreview,
    [Toast.name]: Toast,
    [Empty.name]: Empty,
    [Dialog.name]: Dialog,
    h5Pay
  },
  data() {
    return {
      productId: '6734697826573352960',
      data: {},
      isTimeFlag: false
    }
  },
  mounted() {
    this.getStatus()
  },
  computed: {
    isClassText() {
      return (type, pay) => {
        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:
            if (parseInt(pay) === 0) {
              cont.text = '审批通过'
              cont.class = 'tag stu3'
            } else {
              cont.text = '已完成'
              cont.class = 'tag stu3'
            }
            break
          case -3:
            cont.text = '待上传'
            cont.class = 'tag'
            break
        }
        return cont
      }
    }
  },
  methods: {
    orderPays(id) {
      this.$refs.h5pay.pay(id)
    },
    goLook(id) {
      this.$router.push({
        path: '/attestation/upload',
        query: {
          id: id,
          edit: 1,
          look: 1
        }
      })
    },
    goEdit(id) {
      this.$router.push({
        path: '/attestation/upload',
        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
        this.isTimeFlag = this.isTime(response.start_date, response.end_date)
      })
    },
    backEdit() {
      this.$router.go(-1)
    },
    apply() {
      this.$router.push({
        path: '/attestation/form'
      })
    },
    isTime(sT, eT) {
      const dateBegin = new Date(sT)
      const dateEnd = new Date(eT)
      const dateNow = new Date()
      const beginDiff = dateNow.getTime() - dateBegin.getTime()   
      const beginDayDiff = Math.floor(beginDiff / (24 * 3600 * 1000))
      const endDiff = dateEnd.getTime() - dateNow.getTime()
      const endDayDiff = Math.floor(endDiff / (24 * 3600 * 1000))
      if (endDayDiff < 0) {
          return false
      }
      if (beginDayDiff < 0) {
          return false
      }
      return true
    }
  }
}
</script>
<style lang="scss" scoped>
.list-box{
  width: 100%;
  height: 100%;
}
.list-btn{
  position: absolute;
  bottom: 20px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  width: 80%;
  display: block;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #fff;
  background: #af1b40;
  border-radius: 20px;
  cursor: pointer;
  border: none;
}
.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>
