<template>
   <div class="cpr_list_page">
      <CprHeader title="版权登记" :backPath="'/'" @onBack="onBack">
         <div class="h_right_btn" @click="routerJump()">版权申请</div>
      </CprHeader>
      <div class="cpr_list_tab">
         <div class="left">
            <div class="cpr_tab_item" :class="{'tab_item_active': activeTab == eActiveTab.all}" @click="changeActiveTab(eActiveTab.all)">全部</div>
            <div class="cpr_tab_item" :class="{'tab_item_active': activeTab == eActiveTab.unfinish}" @click="changeActiveTab(eActiveTab.unfinish)">进行中</div>
            <div class="cpr_tab_item" :class="{'tab_item_active': activeTab == eActiveTab.finish}" @click="changeActiveTab(eActiveTab.finish)">已完成</div>
         </div>
         <div class="right">
            <div class="cpr_tab_item" :class="{'tab_item_active': activeTab == eActiveTab.draft}" @click="changeActiveTab(eActiveTab.draft)">草稿</div>
         </div>

      </div>
      <div class="cpr_list_content">
         <CopyrightCard v-for="item in copyrightList" :key="item.id" :copyrightData="item" @onActionSelect="onActionSelect" @onClickCpyCard="onClickCpyCard"></CopyrightCard>
      </div>
      <div class="cpr_list_empty" v-show="copyrightList.length == 0 && requestStatus == eRequestStatus.FINISH">
         <div class="empty_content">
            <img src="/img/empty.png" alt="">
            暂无版权登记
         </div>
      </div>
      <Certificate v-if="showNftCer" :certificateData="certificateData" @hiddenCer="showNftCer = !showNftCer"></Certificate>
      <CprCertificate v-if="showCprCer" :CprCertificateData="CprCertificateData" @hiddenCer="showCprCer = !showCprCer"></CprCertificate>
      <van-dialog  v-model="showDialog" title="申请须知" confirm-button-text="我已知晓" @confirm="clickIKnow">
         <div class="dialog_content">
            <div>一幕影链作为湖北版权局的版权登记授权平台，将为您在一幕影链链上存证的作品代理登记作品著作权；</div>
            <!-- <div>2、点击我已知晓，则视为同意<span class="link" @click="gotoGuarantee">《权利保证书》</span></div> -->
         </div>
      </van-dialog>
   </div>
</template>

<script lang='ts'>
import Vue from 'vue'

enum eActiveTab {
   all,
   unfinish,
   finish,
   draft,
}
enum eRequestStatus {
   NONE,
   UNFINISH,
   FINISH,
}

export default Vue.extend({
   name:'',
   data(){
      return {
         activeTab: eActiveTab.all,
         eActiveTab,
         copyrightList: [] as any,
         /**请求状态NONE，UNFINISH，FINISH */
         requestStatus: eRequestStatus.NONE,
         eRequestStatus,
         showNftCer: false,
         showCprCer: false,
         showDialog: false,
         certificateData: {},
         CprCertificateData: {},
      }
   },
   components:{
      CprHeader: ()=>import('../component/CprHeader.vue'),
      CopyrightCard: ()=>import('./component/copyrightCard.vue'),
      Certificate: ()=>import('@/components/common/Certificate.vue'),
      CprCertificate: ()=>import('@/components/common/CprCertificate.vue'),
   },
   async mounted(){
         
      /**初始请求一次数据 */
      await this.getCopyrightList(this.activeTab)
   },
   methods:{
      /**退出 */
      onBack(){
         this.$router.push('/Mine')
      },
      /**改变搜索类型并搜索 */
      changeActiveTab(type: number){
         if(this.activeTab == type) return
         this.activeTab = type
         this.getCopyrightList(this.activeTab)
      },
      /**请求版权认证列表,包括草稿列表 */
      async getCopyrightList(type: number){
         this.requestStatus = eRequestStatus.UNFINISH
         if(type == eActiveTab.draft) {
            const draftList = await this.$service.copyrightService.getDraftList()
            if(draftList && Array.isArray(draftList)) {
               this.copyrightList = draftList.reverse() 
            }
         }else {
            const copyrightList = await this.$service.copyrightService.getCopyrightList(type)
            if(copyrightList && Array.isArray(copyrightList)) {
               this.copyrightList = copyrightList.reverse() 
            }
         }
         this.requestStatus = eRequestStatus.FINISH
      },
      /**三个点的选项选择完后 */
      async onActionSelect(payload: {id: string, selected: {name: string, value: Number}, state: string, hash: string, serialNum: number}){
         /**10为草稿，草稿接口和其他不一样，单独处理 */
         if(payload.state == '草稿'){
            if(payload.selected.name == '删除') {
               await this.$service.copyrightService.deleteDraft(Number(payload.id))
               await this.getCopyrightList(this.activeTab)
            }else {
               this.$router.push({path:'/Copyright/Step', query: {draftId: payload.id}})
            }
         /**其他类型因为接口一致，统一处理 */
         }else if(payload.selected.name == '编辑') {
            this.$router.push({path:'/Copyright/Step', query: {editId: payload.id}})
         }else if(payload.selected.name == '重新申请'){
            this.$router.push({path:'/Copyright/Step', query: {editId: payload.id, reApply: 'true'}})
         }else if(payload.selected.name == '删除') {
            await this.$service.copyrightService.deleteCopyrightApply(Number(payload.id))
            await this.getCopyrightList(this.activeTab)
         }else if(payload.selected.name == '查看详情') {
            this.$router.push({path:'/Copyright/Step', query: {editId: payload.id, check: 'true'}})
            this.$store.commit('copyright/changeCurrentStep', 5)
         }else if(payload.selected.name == '撤回') {
            await this.$service.copyrightService.withdrawCopyrightApply(Number(payload.id))
            await this.getCopyrightList(this.activeTab)
         }else if(payload.selected.name == '查看存证证书') {
            const res = await this.$service.copyrightService.getCprCertificate(Number(payload.id))
            if(res) {
               this.CprCertificateData = {
                  cprHash: res.evidenceHash,
                  proofName: res.opusName,
                  proofFeature: res.opusProperty,
                  proofType: res.opusCategory,
                  evidenceUser: '上海艺儒投资文化有限公司',
                  evidenceTime: res.evidenceDate,
               }
               this.showCprCer = true
            }
         }else if(payload.selected.name == '查看版权证书') {
            this.$router.push({path: '/Copyright/CopyrightCer', query: {serialNum: payload.serialNum.toString()}})
         }else if(payload.selected.name == '申请纸质证书') {
            this.$router.push('/Copyright/PaperCer')
         }
      },
      /**点击整个卡片后 */
      onClickCpyCard(payload: {id: string, state: string}){
         if(payload.state == '草稿'){
            this.$router.push({path:'/Copyright/Step', query: {draftId: payload.id}})
         }else if(payload.state == '已撤回') {
            this.$router.push({path:'/Copyright/Step', query: {editId: payload.id}})
         }else if(['待核验','提交审核','登记成功'].indexOf(payload.state) != -1) {
            this.$router.push({path: '/Copyright/res', query: {id: payload.id, state: payload.state, res: 'success' }})
         }else if(['已驳回','登记失败'].indexOf(payload.state) != -1) {
            this.$router.push({path: '/Copyright/res', query: {id: payload.id, state: payload.state, res: 'fail' }})
         }
      },
      /**跳转到版权申请，先检查有没有可用的存证*/
      async routerJump(){
         const traceList = await this.$service.copyrightService.getMyList()
         if(traceList && traceList.length >= 1) {
             this.showDialog = true
         } else {
            this.$dialog({
               title: '温馨提示',
               message: '您还没有可以申请版权的存证作品。申请版权前，请先将您的作品在一幕影链上进行存证并发行NFT。'
            })
         }
      },
      /**跳转到权利保证书 */
      gotoGuarantee(){
         this.$router.push('/Copyright/Guarantee')
      },
      /**点击我已知晓 */
      clickIKnow(){
         this.showDialog = false
         this.$router.push('/Copyright/Step')
      }
   }
})
</script>

<style lang='less'>
.cpr_list_page {
   height: 100vh;
   background-color: #fff;
   padding: 0 16px 150px;
   overflow-y: scroll;
   .h_right_btn {
      height: 23px;
      width: 81px;
      text-align: center;
      border: 1px solid #6377FF;
      border-radius: 12px;
      color: #6377FF;
      font-size: 12px;
      line-height: 23px;

   }
   .cpr_list_tab {
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      .left {
         display: flex;
         .cpr_tab_item {
            margin-right: 40px;
            color: #7388AB
         }
         .tab_item_active {
            color: #2B446C
         }
      }
      .right {
         .cpr_tab_item {
            color: #7388AB
         }
         .tab_item_active {
            color: #2B446C
         }
      }
   }
   .cpr_list_empty {
      .empty_content {
         width: 50%;
         margin: 100px auto;
         text-align: center;
         color: #2B446C;
         font-size: 12px;
         img {
            width: 100%;
            margin-bottom: 12px;
         }
      }
   }
}

.van-dialog {
   background-color: #fff;
   color: #2B446C;
   .van-dialog__message {
      background-color: #fff;
      color: #2B446C;
      text-align: left;
   }
   .van-dialog__cancel {
      background-color: #fff;
      color: #2B446C;
   }
   .van-dialog__confirm {
      background-color: #fff;
      color: #2B446C;
   }
}
.dialog_content {
   padding: 10px 20px;
   color: #2B446C;
   .link {
      color: #6377FF
   }
}
</style>
