<template>
    <div>
        <!--数据字典复选框-->
        <el-checkbox-group v-model="checkboxVal"
                           :size="size" v-if="!showText"
                           :disabled="disabled" @change="change"
                           :style="{'width':width,'height':height}"
                           :attrs="{'style':controlCss}">
            <el-checkbox v-for="item in checkboxArr" :key="item.id" :label="item.id">
                {{item.dataName}}
            </el-checkbox>
        </el-checkbox-group>
        <div v-if="showText" style="min-height:36px;">
            <span v-for="(value,index) in checkboxVal" :key="index">
              {{checkboxObj[value] + ((index == (checkboxVal.length - 1)) ? "" : ",")}}
            </span>
        </div>
    </div>
</template>

<script>
    export default {
        name: "pl-data-checkbox",
        props:{
            "value":{type:Array,default:()=>[]},
            "field":{type:String},
            "size":{type:String,default:"small"},
            "width":{type:String,default:"100%"},
            "height":{type:String,default:""},
            "controlCss":{type:String,default:""},
            "disabled":{type:Boolean,default:false},
            "typeId":{type:String,required:true},
            "parentId":{type:String,default:""},
            showText:{type:Boolean,default:false},
            rememberSysDataObj:{type:Function}
        },
        data(){
            return {
                checkboxVal:[],
                checkboxArr:[],
                checkboxObj:{}
            }
        },
        watch:{
            value(){
                this.checkboxVal = JSON.parse(JSON.stringify(this.value));
            },
            typeId(){
                this.init();
            },
            parentId(){
                this.init();
            }
        },
        created(){
            this.init();
        },
        methods:{
            change(val){
                this.$emit("input",val);
            },
            init(){
                if(!this.typeId){
                    return;
                }
                this.checkboxVal = JSON.parse(JSON.stringify(this.value));
                let proimise = this.DATA_GLOBAL.getDatas(this.typeId,this.parentId);
                if(this.showText){
                    proimise = this.DATA_GLOBAL.getDatasContainOutDate(this.typeId,this.parentId);
                }
                proimise.then(datas => {
                    this.checkboxArr = datas || [];
                    let arr = [];
                    let allArr = [];
                    this.checkboxArr.forEach(item => {
                        this.checkboxObj[item.id] = item.dataName;
                        allArr.push(item.id);
                    });
                    this.rememberSysDataObj && this.rememberSysDataObj(this.field,this.checkboxObj);
                    this.checkboxVal.split(',').forEach(key => {
                    // this.checkboxVal.forEach(key => {
                        if(allArr.indexOf(key) > -1){
                            arr.push(key);
                        }
                    });
                    this.checkboxVal = arr;
                })
            }
        }
    }
</script>

<style scoped>

</style>
