<template>
    <bml-cells :title="title">
        <div v-if="direction=='vertical'">
            <bml-cell v-if="muti" :value="item.name" :iconClass="item.checked ? 'ion-android-checkbox' : 'ion-android-checkbox-outline-blank'"
                @click="select(item)"
                :key="index"  :index="index" v-for="item in newItems">
            </bml-cell>
            <bml-cell v-if="!muti" :value="item.name" :iconClass="item.value==value ? 'ion-android-radio-button-on' : 'ion-android-radio-button-off'" 
                @click="select(item)"
                :key="index" :index="index" v-for="item in items">
            </bml-cell>
        </div>
        <div v-if="direction=='horizontal'">
            <bml-cell :first="true" extClass="bml-cell-body">
                <div class="bml-cell-checkbox-body">
                    <bml-cell-option v-if="muti"  :value="item.name" :iconClass="item.checked ? 'ion-android-checkbox' : 'ion-android-checkbox-outline-blank'"
                        @click="select(item)"
                        :key="index"  :index="index" v-for="item in newItems">
                    </bml-cell-option>
                    <bml-cell-option v-if="!muti" :value="item.name" :iconClass="item.value==value ? 'ion-android-radio-button-on' : 'ion-android-radio-button-off'" 
                        @click="select(item)"
                        :key="index" :index="index" v-for="item in items">
                    </bml-cell-option>
                </div>
            </bml-cell>
        </div>
    </bml-cells>
</template>

<script>
    import bmlCells from './bml-cells.vue';
    import bmlCell from './bml-cell.vue';
    import bmlCellOption from './bml-cell-option.vue';
    
    module.exports = {
        name: 'bml-cell-checkbox',
        components: {bmlCell,bmlCells,bmlCellOption},
        props: {
            items: {
                type: Array
            },
            title: {
                type: String
            },
            // 是否多选
            muti: {
                type: Boolean,
                default: false
            },
            // 是否可选
            disabled: {
                type: Boolean,
                default: false
            },
            value: {
                type: Object
            },
            direction: {
                type: String,
                default: 'vertical' // horizontal | vertical
            }
        },
        data () {
            return {
                newItems: this.initList()
            }
        },
         watch: {
            value (){
                this.newItems = this.initList();
            }
        },
        computed: {
            changeDirection(){
                return this.direction=="horizontal"? "flex-row":"flex-column";
            },
            leftColumn(){
                return this.direction=="horizontal" ? false : true
            }
        },
        created () {
        },
        methods: {
            //数据赋值
            initList () {
                let selectedCount = 0;
                let that = this;
                
                const newItems = this.items.map((item, i) => {
                    let { disabled } = item;
                    disabled = !!disabled;
                    // disabled为true时认为selected无效，同时单选模式下只认为第一个selected为true的为有效值
                    // selected = !disabled && !!selected && (!single || selectedCount === 0);
                    // 指定值时依据值进行设置，否则语句标记进行更新数据
                    if(this.value && this.value instanceof Array){
                        if (this.value.indexOf(item.value) != -1) {
                            Vue.set(item,'checked',true);
                            selectedCount += 1;
                        }else{
                            Vue.set(item,'checked',false);
                        }
                    }
                    return item;
                });
                this.selectedCount = selectedCount;
                return newItems;
            },
            //点击筛选操作
            select(v){
                if(this.disabled) return;
                if(this.muti){
                    if(v.checked){
                        v.checked = !v.checked
                    }else{
                        v.checked = true
                    }
                    if(this.value && this.value instanceof Array){
                        let index = this.value.indexOf(v.value)
                        if (index != -1) {
                            // 已经存在，则将其删除
                            this.value.splice(index, 1);
                        } else {
                            // 不存在，则添加
                            this.value.push(v.value)
                        }
                        this.$emit("input", this.value);
                        this.$emit("change", v);
                    }else{
                        this.$emit("change", v);
                    }
                }else{
                    this.value = v.value
                    this.$emit("input", this.value);
                    this.$emit("change", v);
                }
            }
        }
    }
</script>

<style lang="scss" src="../css/checkbox.scss"/>