<template>   
     <el-table :data="tableDatas" border @cell-click="onCellClick" :header-cell-style="{ 'text-align': 'center' }">
        <el-table-column prop="name" label="状态"/> 
        <el-table-column :prop="preKey+o.id" :label="o.name" v-for="(o,index) in options" :key="index" >
            <template #default="scope">
                 <el-space class="center">
                    <icon v-if="scope.row[preKey+o.id]=='0'" icon="ep:close" color="red"/>
                    <span v-else-if="scope.row[preKey+o.id]=='~~'">~~</span>
                    <span v-else>&nbsp;</span>
                </el-space>
            </template>
        </el-table-column>
     </el-table>
     <div class="footer">
        <el-button @click="save" type="primary" icon="finished">保存</el-button>
     </div>
</template>

<script>   

export default {
    name:'MdpMetaState',  
    props:{
        itemId:{
            type: String,
            default:''
        },
    },
    watch:{ 
        itemId(){
            this.getOptions()
        }
    },
    data() {
        return {
            load:{list:false},  
            options:[],
            tableDatas:[],
            preKey:'ooo_',//防止字段重叠
        }
    },
    methods: {
           optionsToTableDatas(){
            this.tableDatas=this.options.map(k=>{
                let d={id:k.id,name:k.name,itemId:k.itemId,oldUnTargets:k.unTargets}
                let unTargets=k.unTargets?k.unTargets.split(","):[]
                this.options.forEach(o=>{
                    d[o.id]='1'
                    if(o.id==k.id){
                        d[this.preKey+o.id]='~~'
                    }else{
                        if(unTargets.some(u=>u==o.id)){
                            d[this.preKey+o.id]='0'
                        }else{
                            d[this.preKey+o.id]='1'
                        }
                    }
                })
                return d;
            })
           },
           getOptions(){
            if(!this.itemId){
                this.options=[]
                this.tableDatas=[]
                return;
            }
            this.$mdp.listItemOption({itemId:this.itemId}).then(res=>{ 
                this.options=res.data
                this.optionsToTableDatas()
            })
           },
           onCellClick(row,col,el,$event){ 
            if(col.property=='name'){
                return;
            }else{
                if(row[col.property]=='1'){
                    row[col.property]='0'
                }else if(row[col.property]=='0'){
                    row[col.property]='1'
                }else{
                    return;
                }
            }
           },
           save(){
            let datas=this.tableDatas.map(k=>{
                let d={itemId:k.itemId,id:k.id,oldUnTargets:k.unTargets}
                let unTargets=[]
                Object.keys(k).forEach(i=>{
                    if(k[i]==='0' && i.indexOf(this.preKey)==0){
                        unTargets.push(i.substring(this.preKey.length))
                    }
                })
                if(unTargets.length>0){
                    d.unTargets=unTargets.join(",")
                }else{
                    d.unTargets=""
                } 
                return d
            })
            datas=datas.filter(d=>{
                    if(!d.oldUnTargets && !d.unTargets){
                        return false;
                    }else if(d.oldUnTargets==d.unTargets){
                        return false
                    }else{
                        return true;
                    }
                
            })
            this.$mdp.unTargets(datas).then(res=>{
                let tips= res.tips
                if(tips.isOk){
                    this.$emit('submit')
                    this.$notify.success({message:"保存成功",position:'bottom-left'})
                }else{  
                    this.$notify.error({message:"保存成功",position:'bottom-left'}) 
                }
            })
           }
    },
    mounted() {  
        this.getOptions()
    }
}

</script>