<template>
    <div class="cpr_step_page">
      <div class="center_container">
          <CprHeader title="著作权人"></CprHeader>
          <div>
              <CprStepCell :cellData="copyrightOwner" :noHead="true">
                 <CopyrightOwnerCard class=" mt-3" v-for="copyrightOwner, index in copyrightOwnerList" 
                                     :showSelect="true"
                                     :key="index" 
                                     :xKey="index" 
                                     :cprOwnerCard="copyrightOwner" 
                                     @onDeleteCopyrightOwner="onDeleteCopyrightOwner"
                                     @changeSelected="changeSelected"></CopyrightOwnerCard>
              </CprStepCell>
          </div>
      </div>
      <div class="step_change_box">
          <div class="left" @click="cancel">取消</div>
          <div class="right" @click="comfirmCprOwner">确定</div>
      </div>
   </div>
</template>

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

export default Vue.extend({
   name:'',
   data(){
       return {
           copyrightOwner: {
                labelText: '著作权人',
                nessesary: true,
                tipText: '著作权人',
                placeHolder: '添加著作权人',
                inputType: 'addPeople',
                contentText: '',
                jumpPath: '/Copyright/Verified',  
           },
           needDeleteId: [] as number[]
       }
   },
   computed: {
       copyrightOwnerList(): any{
           return this.$store.state.copyright.allCprOwnerList
       },
   },
   components: {
      CprHeader: ()=>import('../component/CprHeader.vue'),
      CprStepCell: ()=>import('@/view/NFT/Copyright/component/CprStepCell.vue'),
      CopyrightOwnerCard: ()=>import('@/view/NFT/Copyright/component/CopyrightOwnerCard.vue'),
   },
   mounted(){
       this.getAllCprOwnerList()
   },
   methods: {
       /**初始化著作权人列表 */
       getAllCprOwnerList(){
           this.$store.dispatch('copyright/getAllCprOwnerList')
       },
       /**删除著作权人 */
       onDeleteCopyrightOwner(id: number){
           this.$store.commit('copyright/onDeleteallCprOwnerList', id)
           this.needDeleteId.push(id)
       },
       /**改变选择状态*/
       changeSelected(id: number){
           this.$store.commit('copyright/changeSelectedallCprOwnerList', id)
       },
       /**确认选择哪些版权人 */
       comfirmCprOwner(){
           this.$store.commit('copyright/comfirmCprOwner')
           this.$router.push({path:'/Copyright/Step', query: {...this.$route.query}})
           if(this.needDeleteId.length > 0) {
               for(let id of this.needDeleteId){
                   this.$service.copyrightService.deleteCopyrightOwner(id)
               }
           }
       },
       /**取消选择实名的人 */
       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;
   }
   .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);
       }
   }
}
</style>