<template>
   <div>
      <CprStepCell :cellData="copyrightOwner" @onAddPeople="onAddAuthor">
         <CopyrightOwnerCard class="mt-2" v-for="copyrightOwner, index in copyrightOwnerList" :key="index" :xKey="index" :cprOwnerCard="copyrightOwner" @onDeleteCopyrightOwner="onDeleteCopyrightOwner"></CopyrightOwnerCard>
      </CprStepCell>
      <CprStepCell :cellData="author" @onAddPeople="onAddAuthor">
         <AuthorCard class="mt-2" v-for="author, index in authorList" :key="index" :authorCard="author" :xkey="index"  @onPeopleDataChange="onAuthorDataChange" @deleteAuthor="onDeleteAuthorData"></AuthorCard>
      </CprStepCell>
      <CprStepCell :cellData="rightSelect" @onSingleSelectChange="rightSelectTypeChange" :contentText="rightSelectType">
      </CprStepCell>
      <div class="right_list">
         <div class="right_item" :class="{'right_item_selected': item.selected}" v-for="item in allRightList" :key="item.name" @click="changeRightSelected(item.name)">
            {{item.name}}
            <img class="selected_icon" src="@/assets/img/gouxuan.svg" alt="">
         </div>
      </div>
   </div>
</template>

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

export default Vue.extend({
   name:'',
   computed:{
      authBelongWay(){
         return this.$store.state.copyright.eachPageData[2].authBelongWay.value
      },
      copyrightOwnerList(){
         return this.$store.state.copyright.eachPageData[3].copyrightOwnerList
      },
      authorList(){
         return this.$store.state.copyright.eachPageData[3].authorList
      },
      rightList(){
         return this.$store.state.copyright.eachPageData[3].rightList
      },
      rightSelectType(){
         return this.$store.state.copyright.eachPageData[3].rightSelectType
      },
   },
   data(){
      return {
         copyrightOwner: {
                labelText: '著作权人',
                nessesary: true,
                tipText: '',
                placeHolder: '添加著作权人',
                inputType: 'addPeople',
                contentText: '',
                jumpPath: '/Copyright/AddCprOwner',
         },
         author: {
                labelText: '作者',
                nessesary: true,
                tipText: '',
                placeHolder: '新增作者',
                inputType: 'addPeople',
                contentText: '',
                jumpPath: '',
         },
         rightSelect: {
              labelText: '权利拥有情况',
              nessesary: true,
              tipText: '',
              placeHolder: '',
              inputType: 'singleSelect',
              selectOption: [{value:0, text:'全部'}, {value:1, text:'部分'}]
         },
         allRightList: [
             {name: '发表权', selected: false, value: 1}, 
             {name: '署名权', selected: false, value: 2}, 
             {name: '修改权', selected: false, value: 3},
             {name: '保护作品完整权', selected: false, value: 4},
             {name: '复制权', selected: false, value: 5},
             {name: '发行权', selected: false, value: 6},
             {name: '出租权', selected: false, value: 7},
             {name: '展览权', selected: false, value: 8},
             {name: '表演权', selected: false, value: 9},
             {name: '放映权', selected: false, value: 10},
             {name: '广播权', selected: false, value: 11},
             {name: '信息网络传播权', selected: false, value: 12},
             {name: '摄制权', selected: false, value: 13},
             {name: '改编权', selected: false, value: 14},
             {name: '翻译权', selected: false, value: 15},
             {name: '汇编权', selected: false, value: 16},
             {name: '其他', selected: false, value: 17},
         ]
      }
   },
   components: {
      CprStepCell: ()=>import('@/view/NFT/Copyright/component/CprStepCell.vue'),
      CopyrightOwnerCard: ()=>import('@/view/NFT/Copyright/component/CopyrightOwnerCard.vue'),
      AuthorCard: ()=>import('@/view/NFT/Copyright/component/AuthorCard.vue')
   },
   async mounted(){
      /**初始化制作权人列表 */
      await this.initCopyRightList()
      /**初始化权利选择列表 */
      this.initRightList()
   },
   methods: {
      /**著作权人相关 */
      /**这里是为了以防，当两个草稿同时使用一个著作权人，如果其中删了一个，其他的草稿也会收到影响，需要初始的时候先用草稿的著作权人与全部著作权人比对，如果已经删了，则不显示 */
      async initCopyRightList(){
         await this.$store.dispatch('copyright/getAllCprOwnerList')
         this.$store.commit('copyright/comfirmCprOwner')
      },
      onDeleteCopyrightOwner(id: number){
         this.$store.commit('copyright/onDeleteCopyrightOwner', id)
      },
      /**作者相关 */
      /**添加作者 */
      onAddAuthor(){
         if(this.authBelongWay == 0 && this.authorList.length >= 1) {
            this.$toast('个人作品只有一个作者')
            return
         }
         this.$store.commit('copyright/onAddAuthor', {
            id: Math.ceil(Math.random()*10000),
            name: '',
            aliasType: {},
            alias: ''
         })
      },
      /**改变作者内容 */
      onAuthorDataChange(payload: {id: number, type: string, name?: string, alias?: string, aliasType?: any}){
         this.$store.commit('copyright/onAuthorDataChange', payload)
      },
      /**删除作者 */
      onDeleteAuthorData(id: number){
         this.$store.commit('copyright/onDeleteAuthorData', id)
      },
      /**权利拥有情况 */
      rightSelectTypeChange(selectedType: number){
         this.$store.commit('copyright/changeRightSelectType', selectedType)
         if(this.rightSelectType == 0) {
            for(let item of this.allRightList) {
                  item.selected = true
            }
            this.$store.commit('copyright/changeRightList', this.allRightList)
         }
      },
      /**先根据store里面的list处理allRightList, store里的list只有已经选择的权利 */
      initRightList(){
         for(let item of this.allRightList){//组件的list
            for(let i of this.rightList) {//store的list
               if(item.name == i.name) {
                  item.selected = true
               }
            }
         }
         if(this.rightSelectType == 0){
            this.rightSelectTypeChange(0)
         }
      },
      /**改变权利选择情况 */
      changeRightSelected(name: string){
         if(this.rightSelectType == 0) return
         for(let item of this.allRightList) {
            if(item.name == name) {
               item.selected = !item.selected
            }
         }
         const resList = this.allRightList.filter((item: {name: string, selected: boolean})=>{
            return item.selected == true
         })
         this.$store.commit('copyright/changeRightList', resList)
      }
      
   }
})
</script>

<style scoped lang='less'>
.right_list {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   .right_item {
      height: 30px;
      line-height: 30px;
      font-size: 12px;
      width: 32%;
      text-align: center;
      margin-top: 10px;
      border: 1px solid #7388AB;
      color: #7388AB;
      .selected_icon {
         display: none;
      }
   }
   .right_item_selected {
      position: relative;
      border: 1px solid #6377FF;
      .selected_icon {
         display: block;
         position: absolute;
         right: -1px;
         top: -1px;
      }
   }
}
</style>