<template>
    <div class="cpr_step_page">
      <div class="center_container">
          <CprHeader title="著作权人信息"></CprHeader>
          <CprStepCell :cellData="verifiedType" @onActionSelect="verifiedTypeSelected" :contentText='verifiedType.contentText'></CprStepCell>
          <div class="cpr_input">
              <input type="text" placeholder="请输入著作权人" @change="inputCprOwner">
          </div>
          <CprStepCell v-show="resData.verifiedType == 0" :cellData="cerInforNaturalPerson" @onTextChange="NPCerInforInput" :contentText='cerInforNaturalPerson.contentText'></CprStepCell>
          <CprStepCell v-show="resData.verifiedType == 1" :cellData="cerInforLegalPerson" @onActionSelect="LPCerTypeSelected" :contentText='cerInforLegalPerson.contentText'></CprStepCell>
          <div class="cpr_input" v-show="resData.verifiedType == 1">
              <input type="text" placeholder="请输入统一社会信用代码" @change="LPCerInforInput">
          </div>
          <CprStepCell :cellData="isEternal" @onSingleSelectChange="onValidPeriodSelected" :contentText='isEternal.contentText'></CprStepCell>
          <CprStepCell v-if="resData.validPeriodType == 1" :cellData="validPeriodSingle" @onTimeSelect="onTimeSelect" :contentText='validPeriodSingle.contentText'></CprStepCell>
          <CprStepCell v-if="resData.validPeriodType == 0" :cellData="validPeriodRange" @onTimeSelect="onTimeSelect" :contentText='validPeriodRange.contentText'></CprStepCell>
          <CprStepCell :cellData="userPlace" @onPlaceSelect="onPlaceSelect" :contentText='userPlace.contentText'></CprStepCell>
          <CprStepCell :cellData="cerImg" >
              <div>
                  图片格式仅支持jpg/jpeg/png，大小不能超过5M
              </div>
          </CprStepCell>
          <div class="img_container" v-if="resData.verifiedType == 0">
              <ImgUpload v-for="item, key in NPImgList" :key="item.title" :xKey='key' :imgUploadData="item" @onUpload="onUpload"></ImgUpload>
              <!-- <div class="img_dowload_tip"><span class="img_dowload_link" @click="dowloadFile">《代理委托书》</span>模板点击下载.</div> -->
          </div>
          <div class="img_container" v-if="resData.verifiedType == 1">
              <ImgUpload v-for="item, key in LPImgList" :key="item.title" :xKey='key' :imgUploadData="item" @onUpload="onUpload"></ImgUpload>
              <div class="img_dowload_tip"><span class="copyBtn img_dowload_link" @click="dowloadFile">《代理委托书》</span>点击下载后，加盖单位公证，法定代表人签字后上传。</div>
          </div>
      </div>
      <div class="step_change_box">
          <div class="left" @click="cancel">上一步</div>
          <div class="right" :class="{'right_disabled': confirmDisabled}" @click="comfirmCprOwner">确定</div>
      </div>
   </div>
</template>

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

export default Vue.extend({
   name:'',
   data(){
       return {
           /**最终的数据 */
           resData: {
               verifiedType: 0,
               cprOwnerName: '',
               NPCerInfor: {value:'', type: 0},
               LPCerInfor: {value:'', type: 0},
               validPeriodType: 1,
               validPeriod: '',
               userPlace: '',
               imgList:[],
               provinceCode: 0,
               cityCode: 0,
           } as any,
           /**下面是表单 */
           verifiedType: {
                labelText: '类别',
                nessesary: true,
                tipText: '',
                placeHolder: '请选择认证类别',
                inputType: 'choose',
                contentText: '',
                actions:[{name:'自然人', id: 0},{name:'法人', id: 1}]
           },
           cerInforNaturalPerson: {
                labelText: '证件信息',
                nessesary: true,
                tipText: '',
                placeHolder: '请输入身份证号码',
                inputType: 'text',
                contentText: '',
           },
           cerInforLegalPerson: {
                labelText: '证件信息',
                nessesary: true,
                tipText: '',
                placeHolder: '请选择证件类型',
                inputType: 'choose',
                contentText: '',
                actions:[{name:'营业执照', id: 1},{name:'企业法人营业执照', id: 2},{name:'组织机构代码证书', id: 3},{name:'事业单位法人证书', id: 4},{name:'社团法人证书', id: 5},{name:'社会统一信用代码证', id: 6},{name:'其他有效证件', id: 7}]
           },
           isEternal: {
                labelText: '证件是否长期有效',
                nessesary: true,
                tipText: '',
                placeHolder: '请选择证件类型',
                inputType: 'singleSelect',
                contentText: 1,
                selectOption: [{value:1, text:'是'}, {value:0, text:'否'}]
           },
           validPeriodSingle: {
                labelText: '证件有效开始时间',
                nessesary: true,
                tipText: '',
                placeHolder: '请选择证件有效开始时间',
                inputType: 'timeSelect',
                contentText: '',
           },
           validPeriodRange: {
                labelText: '证件有效起止时间',
                nessesary: true,
                tipText: '',
                placeHolder: '请选择证件有效起止时间',
                inputType: 'timeRangeSelect',
                contentText: '',
           },
           userPlace: {
                labelText: '用户所在省市',
                nessesary: true,
                tipText: '',
                placeHolder: '请选择用户所在省市',
                inputType: 'placeSelect',
                contentText: '',
           },
           cerImg: {
                labelText: '证件照片',
                nessesary: true,
                tipText: '',
                placeHolder: '',
                inputType: '',
                contentText: '',
           },
           NPImgList: [
               {
                   title: '请上传身份证人像面',
                   bgImgUrl: require('@/assets/img/idcard_f.png'),
                   uploadInfo: {imgName: '', imgUrl: '', title: ''}
               },
               {
                   title: '请上传身份证背面照',
                   bgImgUrl: require('@/assets/img/idcard_b.png'),
                   uploadInfo: {imgName: '', imgUrl: '', title: ''}
               },
               {
                   title: '手持身份证照',
                   bgImgUrl: require('@/assets/img/idcard_h.png'),
                   uploadInfo: {imgName: '', imgUrl: '', title: ''}
               },
            //    {
            //        title: '代理委托书',
            //        bgImgUrl: require('@/assets/img/attorney.png'),
            //        uploadInfo: {imgName: '', imgUrl: '', title: ''}
            //    },
           ],
           LPImgList: [
               {
                   title: '请上传证件照',
                   bgImgUrl: require('@/assets/img/business_license.png'),
                   uploadInfo: {imgName: '', imgUrl: '', title: ''}
               },
               {
                   title: '请上传委托证明',
                   bgImgUrl: require('@/assets/img/attorney.png'),
                   uploadInfo: {imgName: '', imgUrl: '', title: ''}
               },
           ]
       }
   },
   computed: {
       confirmDisabled(): boolean{
           const resData = this.resData
           if(!resData.cprOwnerName || !resData.validPeriod || !resData.userPlace){
               return true
           } else if (resData.verifiedType == 0) {
               if(!resData.NPCerInfor.value) {
                   return true
               }
               for(let item of this.NPImgList) {
                   if(!item.uploadInfo.imgUrl) {
                       return true
                   }
               }
           } else if (resData.verifiedType == 1) {
               if(!resData.LPCerInfor.value || !resData.LPCerInfor.type) {
                   return true
               }
               for(let item of this.LPImgList) {
                   if(!item.uploadInfo.imgUrl) {
                       return true
                   }
               }
           }
           return false
       }
   },
   components: {
      CprHeader: ()=>import('../component/CprHeader.vue'),
      CprStepCell: ()=>import('@/view/NFT/Copyright/component/CprStepCell.vue'),
      ImgUpload: ()=>import("./component/imgUpload.vue")
   },
   methods: {
       /**认证类别选择*/
       verifiedTypeSelected(value: {id: number, name: string}){
           this.resData.verifiedType = value.id
           this.verifiedType.contentText = value.name
           /**更换类型重置化 */
           this.validPeriodSingle.contentText = ''
           this.validPeriodRange.contentText = ''
           this.resData.validPeriod = ''
           this.userPlace.contentText = ''
           this.resData.userPlace = ''
           if(this.resData.verifiedType == 0) {
               for(let item of this.LPImgList) {
                   item.uploadInfo = {imgName: '', imgUrl: '', title: ''}
               }
           }else if(this.resData.verifiedType == 1) {
               for(let item of this.NPImgList) {
                   item.uploadInfo = {imgName: '', imgUrl: '', title: ''}
               }
           }

       },
       /**输入版权人 */
       inputCprOwner(value: {target: {value: string}}){
           this.resData.cprOwnerName = value.target.value
       },
       /**自然人输入身份证号 */
       NPCerInforInput(value: string){
           this.resData.NPCerInfor.value = value
           this.resData.NPCerInfor.type = 'idCard'
       },
       /**法人证件类型选择 */
       LPCerTypeSelected(value: {id: number, name: string}){
           this.cerInforLegalPerson.contentText = value.name
           this.resData.LPCerInfor.type = value.id
       },
       /**法人证书信息输入 */
       LPCerInforInput(value: {target: {value: string}}){
           this.resData.LPCerInfor.value = value.target.value
       },
       /**选择完是否长期有效 */
       onValidPeriodSelected(value: number){
           this.resData.validPeriodType = value
           this.resData.validPeriod = ''
           this.validPeriodSingle.contentText = ''
           this.validPeriodRange.contentText = ''
       },
       /**时间范围选择完 */
       onTimeSelect(value: [number, number] | number){
           this.resData.validPeriod = value
           if(Array.isArray(value)) {
               this.validPeriodRange.contentText = moment(value[0]).format('YYYY-MM-DD')+' ~ '+moment(value[1]).format('YYYY-MM-DD')
           }else {
               this.validPeriodSingle.contentText = moment(value).format('YYYY-MM-DD')
           }
       },
       /**位置选择完 */
       onPlaceSelect(value: Array<{code: string, name: string}>){
           this.userPlace.contentText = value.reduce((res: string, item: {code: string, name: string})=>{ return res +' '+ item.name}, '')
           this.resData.userPlace = value
       },
       /**图片上传后保存图片信息 */
       onUpload(payload: {imgName: string, imgUrl: string, title: string}){
           if(this.resData.verifiedType == 0) {
                this.NPImgList = this.NPImgList.map((item)=>{
                    if(item.title == payload.title) {
                        item.uploadInfo = payload as any
                    }
                    return item
                })
           }else if(this.resData.verifiedType == 1) {
                this.LPImgList = this.LPImgList.map((item)=>{
                    if(item.title == payload.title) {
                        item.uploadInfo = payload as any
                    }
                    return item
                })
           }
       },
       /**下载文件 */
       async dowloadFile(){
           const res = await this.$service.copyrightService.getTemplateUrlList('1') as any
           if(res.length >= 1) {
                let link = document.createElement('a')
                link.download = res[0].fileName
                link.style.display = 'none'
                link.href = res[0].fileUrl
                document.body.appendChild(link)
                link.click()
                URL.revokeObjectURL(link.href)
                document.body.removeChild(link)
                this.$toast('下载文件成功')
           }else {
               this.$toast('没有可以下载的文件')
           }
       },
       /**最终确认把数据组织到resData里面 */
       async comfirmCprOwner(){
           if(this.confirmDisabled) return
           if(this.resData.verifiedType == 0){
               delete this.resData.LPCerInfor
               this.resData.imgList = this.NPImgList.map((item)=>{
                   return item.uploadInfo
               })
           }else if (this.resData.verifiedType == 1){
               delete this.resData.NPCerInfor
               this.resData.imgList = this.LPImgList.map((item)=>{
                   return item.uploadInfo
               })
           }
           await this.copyrightOwnerAdd()
       },
       /**发送添加著作权人 */
       async copyrightOwnerAdd(){
           const ownerData = {
	             backPhoto: this.resData.verifiedType == 0 ? this.resData.imgList[1].imgUrl : '',
	             certificatesPhoto: this.resData.verifiedType == 1 ? this.resData.imgList[0].imgUrl : '',
	             city: this.resData.userPlace[1].name,
	             effectiveEndDate: this.resData.validPeriodType == 0? this.resData.validPeriod[1] : '',
	             effectiveStartDate: this.resData.validPeriodType == 0? this.resData.validPeriod[0] : this.resData.validPeriod,
	             entrustProve: this.resData.verifiedType == 1 ? this.resData.imgList[1].imgUrl : '',
	             idNumber: this.resData.verifiedType == 0 ? this.resData.NPCerInfor.value : this.resData.LPCerInfor.value,
	             idType: this.resData.verifiedType == 0 ? 0 : this.resData.LPCerInfor.type,
	             isEffective: this.resData.validPeriodType,
	             owner: this.resData.cprOwnerName,
	             personalPhoto: this.resData.verifiedType == 0 ? this.resData.imgList[2].imgUrl : '',
	             positivePhoto: this.resData.verifiedType == 0 ? this.resData.imgList[0].imgUrl : '',
	             province: this.resData.userPlace[0].name,
	             type: this.resData.verifiedType,
                 provinceCode: this.resData.userPlace[0].code,
                 cityCode: this.resData.userPlace[1].code,
           }
           const addOwnerRes = await this.$service.copyrightService.copyrightOwnerAdd(JSON.stringify(ownerData))
           console.log(addOwnerRes)
           if(addOwnerRes) {
               this.$toast('添加著作权人成功~')
               history.go(-1)
           }
           
       },
       /**取消认证 */
       cancel(){
           history.go(-1)
       }
   }
})
</script>

<style scoped lang='less'>
.cpr_step_page {
   height: 100vh;
   padding-bottom:150px;
   background-color: #fff;
   overflow-y: scroll;
   .center_container {
      padding: 0 16px;
      .cpr_input {
          height: 40px;
          display: flex;
          align-items: center;
          color: #7388AB;
          font-size: 14px;
          border-bottom: 3px solid #f1f1f1;
      }
      .img_container {
          margin-top: 20px;
          text-align: center;
          font-size: 14px;
          .img_dowload_tip {
              margin-top: 20px;
              text-align: left;
              color: #24446f;
              font-size: 12px;
              .img_dowload_link {
                  color: #6377FF
              }
          }
      }
   }
   .step_change_box {
       position: fixed;
       bottom: 16px;
       left: 16px;
       right: 16px;
       display: flex;
       justify-content: space-between;
       align-items: center;
       text-align: center;
       .left {
           width: 48%;
           background-color: #6377FF;
           line-height: 40px;
           color: #fff;
           box-shadow: 0px 2px 6px 0px rgba(99, 119, 255, 0.4);
       }
       .right {
           width: 48%;
           background-color: #6377FF;
           line-height: 40px;
           color: #fff;
           box-shadow: 0px 2px 6px 0px rgba(99, 119, 255, 0.4);
       }
       .right_disabled {
           color: #fff;
           background: rgba(99, 119, 255, 0.2);
           box-shadow: 0px 2px 6px 0px rgba(99, 119, 255, 0.1);
       }
   }
}
</style>