<template>
   <div>
       <div class="author_title" >
           <div>作者{{xkey+1}}</div>
           <div @click="deleteAuthor">
               <Icon name="icon-shanchu" size="14px" color="#ffffff" ></Icon>
           </div>
       </div>
       <div class="author_name">
           <div class="author_name_label">作者名称</div>
           <div class="author_name_value">
               <input type="text" placeholder="请输入作者名称" :value="authorCard.name" @change="onNameChange">
           </div>
       </div>
       <div class="author_name_type">
           <div class="name_type_label">署名</div>
           <div class="name_type_value" @click="showActionSheet=true">
               <div>{{authorCard.aliasType.name || ''}}</div>
               <Icon name="icon-xiayibu" color="#A7B5CD" size="20px"></Icon>
           </div>
       </div>
       <div class="author_name">
           <div class="author_name_label">作者名称</div>
           <div class="author_name_value">
               <input type="text" placeholder="请输入作者署名" :value="authorCard.alias" @change="onAliasChange">
           </div>
       </div>
       
       <van-action-sheet v-model="showActionSheet" :actions="actions" cancel-text="取消" @select="onSelect" @cancel="showActionSheet=false" />
   </div>
</template>

<script lang='ts'>
/**框架*/
import Vue from 'vue'
/**工具库*/
/**类型*/
/**组件*/
import Icon from "@/components/common/Icon.vue"
/**自定义方法*/
interface AuthorCardType {
    id: number;
    name?: string;
    aliasType?: any;
    alias?: string;
}
export default Vue.extend({
   name:'',
   props: {
       authorCard: {
           default: ()=>{return {} as AuthorCardType } 
       },
       xkey: {
           type: Number
       }
   },
   data(){
       return {
           actions: [{name: '本名'},{name:'别名'},{name:'匿名'}],
           showActionSheet: false,
           aliasTypeSelected: {},
           name:'',
           alias:'' 
       }
   },
   mounted(){
       console.log(this.xkey)
   },
   components: {
       Icon
   },
   methods: {
       /**名称改变 */
       onNameChange(e: { target: HTMLInputElement }){
           this.name = e.target.value
           this.$emit('onPeopleDataChange', {
               id: this.authorCard.id,
               name: this.name,
               type: 'name',
           })
       },
       /**类型选择 */
       onSelect(selected?: any){
           this.aliasTypeSelected = selected
           this.showActionSheet = false
           this.$emit('onPeopleDataChange', {
               id: this.authorCard.id,
               aliasType: this.aliasTypeSelected,
               type: 'aliasType',
           })
       },
       /**别名改变 */
       onAliasChange(e: { target: HTMLInputElement }){
           this.alias = e.target.value
           this.$emit('onPeopleDataChange', {
               id: this.authorCard.id,
               alias: this.alias,
               type: 'alias',
           })
       },
       /**删除作者 */
       deleteAuthor(){
           this.$emit('deleteAuthor', this.authorCard.id)
       }
   }
})
</script>

<style scoped lang='less'>
.author_title {
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 23px;
    font-size: 12px;
    color: #fff;
    background-color: #6377FF;
    border-radius: 10px 10px 0px 0px;
}
.author_name {
    border: 1px solid #F5F5F5;
    height: 45px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 10px;
    color: #7388AB;
    .author_name_label {
        font-size: 12px;
    }
    .author_name_value {
        font-size: 14px;
        input {
            text-align: right;
        }
    }
}
.author_name_type {
    padding: 0px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    border: 1px solid #F5F5F5;
    color: #7388AB;
    .name_type_value {
       font-size: 14px;
       display: flex;
       justify-content: space-between;
       align-items: center;
    }
}

// 更改弹出层样式
.van-action-sheet__cancel, .van-action-sheet__item {
    background-color: #fff;
    color: #2B446C;
}
.van-action-sheet__item:active {
  background-color: #F5F5F5;
}
.van-action-sheet__gap {
    background-color: #2B446C;
    height: 2px;
}
</style>