<template>
    <div style="height:300px;">
        <!-- <div class="selectRole">选择角色</div> -->
        <el-transfer v-model="selectRoleData" :data="allRoleData" class="elTransfer" :titles="['所有角色', '演员角色']" @change="handleChange">
            <span slot-scope="{option}">
                <span>{{option.role+(option.name==undefined?'':option.name)}}</span>
                <el-radio-group v-model="option.gender" size="mini" class="sexGroup" @change="changeSex($event,option.key)">
                    <el-radio-button label="Male">男</el-radio-button>
                    <el-radio-button label="Female">女</el-radio-button>
                </el-radio-group>
            </span>
        </el-transfer>
    </div>
</template>
<script>
    import Vue from 'vue';
    import ConstConfig from '@/scripts/ConstConfig';
    import {getScriptPlayMember,getScriptMemberData,cancleScriptMembers,selectScriptMembers,modifyScriptMemberSex} from '@/api/simulation';
    export default {
        name: 'addRole',
        props: {
            group: {
                type: String,
                required: true
            },
        },
        data() {
            return {
                allRoleData:[],
                selectRoleData:[],
                sexGroup:"男",
            }
        },
        mounted(){
            this.initData();
        },
        methods:{
            initData(){
                let group=this.$props.group;
                getScriptMemberData(group).then(response=>{
                    let lastData=JSON.stringify(response.data);
                    this.allRoleData=this.coverData(lastData);
                    getScriptPlayMember(group).then(response=>{
                        let last=response.data;
                        let data=[];
                        last.forEach(function(element){data.push(element.id)});
                        this.selectRoleData=data;
                    })
                })
            },
            coverData(data){
                let roleTypeList=ConstConfig.ConstSelect.roleType;
                let lastData=data.replace(new RegExp('id','g'),'key');
                roleTypeList.forEach(function(element){
                    let rolename=element.value;
                    lastData=lastData.replace(new RegExp(rolename,'g'),element.label);
                });
                lastData=JSON.parse(lastData);
                return lastData;
            },
            handleChange(value, direction, movedKeys) {
                switch(direction)
                {
                    case 'right':{
                        let group=this.$props.group;
                        let data=movedKeys;
                        selectScriptMembers(group,data).then(response=>{
                            this.$message.success('选择剧本角色成功');
                            this.$parent.$parent.$refs['addBehavior'].initData();
                        })
                        .catch(error => {
                            this.$messageBox(`选择剧本角色失败: ${error.message}`);
                            return false;
                        });
                        break;
                    }
                    case 'left':{
                        let group=this.$props.group;
                        let data=movedKeys;
                        cancleScriptMembers(group,data).then(response=>{
                            this.$parent.$parent.$refs['addBehavior'].initData();
                            this.$message.success('取消剧本角色成功');
                        })
                        .catch(error => {
                            this.$messageBox(`取消剧本角色失败: ${error.message}`);
                            this.initData();
                        });
                    }
                }
            },
            resetData(data){
                // let allRoleData=this.allRoleData;
                // debugger;
                // data.forEach(function(element){
                //     allRoleData.forEach(function(select){
                //             if(select.key==element)
                //             {
                //                 select.disabled=true;
                //             }
                //     });
                // });
            },
            changeSex(event,id)
            {
                let group=this.$props.group;
                let data={"gender":event};
                modifyScriptMemberSex(group,id,data).then(response=>{
                    this.$message.success('修改剧本成员性别成功');
                })
                .catch(error => {
                    this.$messageBox(`修改剧本成员性别失败: ${error.message}`);
                });
            }
        }
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";
    .selectRole{
        font-size: 15px;
        padding: 0px 20px 15px 15px;
    }
    .elTransfer{
        margin-left:20px;
        width:700px;
    }
</style>
<style>
    .elTransfer .el-transfer-panel{
        width:300px ;
    }
    .sexGroup{
        margin-left: 10px;
    }
</style>

                
