<template>
   <div class="apply_res_page">
      <CprHeader title="版权登记">
      </CprHeader>
      <div class="apply_success" v-if="resStatus == 'success'">
         <img class="apply_res_img" src="@/assets/img/apply_success.png" alt="">
         <div class="apply_success_tip">{{statusText.value || status}}</div>
         <!-- <div class="apply_account">流水号：11111111111111</div> -->
         <div class="apply_text">{{statusText.msg || text}}</div>
         <div class="apply_after_btn" @click="goCheck">查看登记</div>
      </div>
      <div class="apply_fail" v-if="resStatus == 'fail'">
         <img class="apply_res_img" src="@/assets/img/apply_fail.png" alt="">
         <div class="apply_fail_tip">{{statusText.value || status}}</div>
         <!-- <div class="apply_account">流水号：11111111111111</div> -->
         <div class="apply_text">{{statusText.msg || text}}</div>
         <div class="apply_after_btn" @click="reApply">重新提交</div>
      </div>
   </div>
</template>

<script lang='ts'>
/**框架*/
import Vue from 'vue'
/**工具库*/
/**类型*/
/**组件*/
/**自定义方法*/

export default Vue.extend({
   name:'',
   components: {
       CprHeader: ()=>import('../component/CprHeader.vue'),
   },
   data(){
       return {
           id: this.$route.query.id,
           resStatus: this.$route.query.res,
           status: this.$route.query.state,
           statusText: {} as {code: number, msg: string, value: string},
       }
   },
   computed:{
       text(): string{
           switch(this.status){
               case '待核验':
                   return '您的版权申请已提交，等待一幕影链初审';
               case '已驳回':
                   return '';
               case '提交审核':
                   return '您的版权申请已提交湖北版权局，受理成功后将在15个工作日内完成登记';
               case '登记成功':
                   return '恭喜您，您的版权申请登记成功';
               case '登记失败':
                   return '';
               default:
                   return ''
           }
       }
   },
   mounted(){
       this.getApplyState(this.id as string)
   },
   methods: {
       /**获取状态文字 */
       async getApplyState(id:string){
           const res = await this.$service.copyrightService.getApplyState(id)
           if(res) this.statusText = res
       },
       /**查看申请记录 */
       goCheck(){
           this.$router.push({path:'/Copyright/Step', query: { editId: this.id, check: 'true'}})
           this.$store.commit('copyright/changeCurrentStep', 5)
       },
       /**重新提交 */
       reApply(){
           this.$router.push({path:'/Copyright/Step', query: { editId: this.$route.query.id, reApply: 'true'}})
       }
   }
})
</script>

<style scoped lang='less'>
.apply_res_page {
   height: 100vh;
   background-color: #fff;
   overflow-y: scroll;
   padding: 0 16px 150px;
   .apply_success, .apply_fail {
      position: fixed;
      top: 45%;
      left: 50%;
      width: 80%;
      transform: translate(-50%, -50%);
      text-align: center;
      .apply_res_img {
         width: 70%;
         margin: 0 auto;
      }
      .apply_success_tip {
         margin-top: 15px;
         color: #2B446C;
         font-size: 14px;
      }
      .apply_fail_tip {
         color: #F68585;
      }
      .apply_text {
         margin-top: 15px;
         color: #7388AB;
         font-size: 14px;
      }
      .apply_after_btn {
         margin-top: 15px;
         color: #ffffff;
         background-color: #6377FF;
         width: 100%;
         height: 40px;
         line-height: 40px;
         box-shadow: 0px 2px 6px 0px rgba(99, 119, 255, 0.35);
      }
   }
}
</style>