<template>
   <div>
       <CprStepCell :key="uploadCommissionFile.labelText" :cellData="uploadCommissionFile" @fileListUpdata="commissionfileListUpdata">
           <div>
               <div class="copyBtn dowloadLink mt-1"  @click="downloadFile('6')">《作品登记委托书》附件下载</div>
               <FileCard class=" mt-3" v-for="item in pageData.commissionFileList"  :key="item.fileHash" :fileData="item" @deleteFile="deleteCommissionFile" @addFileUrl="addCommissionFileUrl" :limit="false"></FileCard>
           </div>
       </CprStepCell>

       <CprStepCell :key="traceChooseCell.labelText" :cellData="traceChooseCell" @onActionSelect="onActionSelect" :contentText='traceName'></CprStepCell>
       <CprStepCell :key="uploadWorkCell.labelText" :cellData="uploadWorkCell" @fileListUpdata="fileListUpdata">
           <FileCard class=" mt-3" v-for="item in pageData.fileList" :key="item.fileHash" :fileData="item" @deleteFile="deleteFile" @addFileUrl="addFileUrl" :limit="true"></FileCard>
       </CprStepCell>
       <div class="tipText">
           上传要求：<br/>
           1、上传的作品必须包含您存证过的作品<br/>
           2、单文件大小不超过200M，最多上传5个文件<br/>
           3、支持文件格式，分别如下：<br/>
           图片类：JPG、JPEG、GIF、BMP、PNG；<br/>
           视频类：MP4、WMV；<br/>
           音频类：MP3、WAV；<br/>
           文件类：DOC、DOCX、XLS、XLSX、PPT、PPTX、PDF.
       </div>

   </div>
</template>

<script lang='ts'>
/**框架*/
import Vue from 'vue'
/**工具库*/
/**类型*/
/**组件*/
/**自定义方法*/
interface PageDataType {
    trace: any;
    fileList: any;
    commissionFileList: any
}
export default Vue.extend({
   name:'',
   data(){
       return {
            traceChooseCell: {
                labelText: '选择存证',
                nessesary: true,
                tipText: '一幕影链将会为您的存证进行版权登记。版权登记成功后，版权信息将会在一幕影链上进行增量存证，可溯源查询存证记录。',
                placeHolder: '请选择存证',
                inputType: 'choose',
                actions:[]
            },
            uploadWorkCell: {
                labelText: '上传作品',
                nessesary: true,
                tipText: '',
                placeHolder: '请选择作品',
                inputType: 'file',
                fileListMaxCount: 5,
                fileTypeArray: ['JPG','JPEG','GIF','BMP','PNG','MP4','WMV','MP3','WMV','MP3','WAV','DOC','DOCX','XLS','XLSX','PPT','PPTX','PDF']
            },
            uploadCommissionFile: {
                labelText: '作品登记代理委托书',
                nessesary: true,
                tipText: 
`1、您的作品将委托一幕影链进行代理登记，需要提交《作品登记代理委托书》\n。
2、《作品登记代理委托书》需要加盖公章，法定代表人签字。文件请上传jpg、png、jpeg、pdf、word、docx格式。\n`,
                placeHolder: '请上传《作品登记委托书》',
                inputType: 'file',
                fileListMaxCount: 1,
                fileTypeArray: ['JPG', 'PNG', 'JPEG', 'PDF', 'WORD', 'DOCX']
            },
       }
   },
   mounted(){
       this.getMyTrace()
   },
   computed: {
       pageData(): PageDataType{
           return this.$store.state.copyright.eachPageData[0]
       },
       traceName(): string{
           return this.$store.state.copyright.eachPageData[0].trace.name
       }
   },
   components:{
       CprStepCell: ()=>import('@/view/NFT/Copyright/component/CprStepCell.vue'),
       FileCard: ()=>import('@/view/NFT/Copyright/component/FileCard.vue')
   },
   methods: {
       /**获取我的存证 */
       async getMyTrace(){
           const traceList = await this.$service.copyrightService.getMyList()
           if(traceList) {
               this.traceChooseCell.actions = traceList
           }
       },
       /**选择完存证后 */
       onActionSelect(selected: any){
           this.$store.commit('copyright/firstPageSelected', selected)
       },
       /**新增文件 */
       fileListUpdata(fileData: {fileName: string, fileHash: string, type: string, file: File}){
           this.$store.commit('copyright/updataFirstPageFileList', fileData)
       },
       /**删除文件 */
       deleteFile(fileHash: string){
           this.$store.commit('copyright/updataFirstPageFileList', fileHash)
       },
       /**上传完文件后 */
       addFileUrl(payload: {fileHash: string, fileUrl: string}){
           this.$store.commit('copyright/addUrlFirstPageFileList', payload)
       },

       /**代理委托书文件相关*/
       /**新增文件 */
       commissionfileListUpdata(fileData: {fileName: string, fileHash: string, type: string, file: File}){
           this.$store.commit('copyright/updataCommissionFileList', fileData)
       },
       /**删除文件 */
       deleteCommissionFile(fileHash: string){
           this.$store.commit('copyright/updataCommissionFileList', fileHash)
       },
       /**上传完文件后 */
       addCommissionFileUrl(payload: {fileHash: string, fileUrl: string}){
           this.$store.commit('copyright/addUrlCommissionFileList', payload)
       },
       /**下载文件 */
       async downloadFile(type: string, count:number = 0){
           const res = await this.$service.copyrightService.getTemplateUrlList(type) as any
           if(res.length >= 1) {
                let link = document.createElement('a')
                link.download = res[count as number].fileName
                link.style.display = 'none'
                link.href = res[count as number].fileUrl
                document.body.appendChild(link)
                link.click()
                URL.revokeObjectURL(link.href)
                document.body.removeChild(link)
           }else {
               this.$toast('没有可以下载的文件')
           }
       }
   }
})
</script>

<style scoped lang='less'>
.tipText {
    margin-top: 20px;
    color: #7388AB;
    font-size: 12px;
    line-height: 20px;
}

.dowloadLink {
    color: #6377FF
}

</style>