<!-- Created by henian.xu on 2018/8/13. -->

<template>
    <el-checkbox-group
        v-model='model'
        :disabled='disabled'
        :class='direction'
    >
        <!--        <div style='font-size: 14px;'>&#45;&#45;{{model}}&#45;&#45;</div>-->
        <el-checkbox
            v-if='enableSelectAll'
            :label='enableSelectAllVal'>{{ $$t('vmf_check_all', '全选') }}</el-checkbox>
        <el-checkbox
            v-for='(item) in listData'
            :key='item.id'
            :label='item.id'
        >
            {{ item.name }}
        </el-checkbox>
    </el-checkbox-group>
</template>

<script>
import emitter from 'element-ui/src/mixins/emitter';
import { Api } from '@/api';
import { Utils } from 'vmf';

export default {
    name: 'CheckboxGroupAndOr',
    mixins: [emitter],
    data() {
        return {
            listData: [],
            enableSelectAllVal: 0,
        };
    },
    props: {
        value: {
            type: [Number, String],
            default: 0,
            // required: true,
        },
        // 这个值是字典值的 Code1
        type: {
            type: String,
            default: '',
        },
        data: {
            type: [Array, String],
            default() {
                return null;
            },
        },
        direction: {
            type: String,
            default: 'horizontal', // vertical
        },
        enableSelectAll: {
            type: Boolean,
            default: false,
        },
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    watch: {
        data: {
            handler(val) {
                if (Utils.isArray(val)) {
                    this.listData = val || [];
                    this.enableSelectAllVal = this.listData.reduce((pre, cur) => pre | cur.id, 0);
                }
            },
            immediate: true,
        },
        dictionary: {
            handler(val) {
                if (val) this.getListData();
            },
            immediate: true,
        },
    },
    computed: {
        model: {
            get() {
                const { listData, value, enableSelectAll, enableSelectAllVal } = this;
                const res = [];
                if (!+value) return res;
                if (enableSelectAll && value === enableSelectAllVal) {
                    res.push(enableSelectAllVal);
                }
                listData.forEach(item => {
                    if (item.id & +value) {
                        res.push(item.id);
                    }
                });
                return res;
            },
            set(val) {
                let value = 0;
                if (Array.isArray(val) || val.length) {
                    let hasAll = false;
                    value = val.reduce((prev, curr) => {
                        if (this.enableSelectAll && this.enableSelectAllVal === curr) {
                            hasAll = true;
                            return prev;
                        }
                        return prev | curr;
                    }, 0);
                    if (this.enableSelectAll) {
                        if (hasAll && this.value !== this.enableSelectAllVal) {
                            value = this.enableSelectAllVal;
                        } else if (!hasAll && this.value === this.enableSelectAllVal) {
                            value = 0;
                        }
                    }
                }
                this.$emit('input', value);
                this.dispatch('ElFormItem', 'el.form.change', [value]);
            },
        },
        dictionary() {
            const { data, type } = this;
            if (type) return type;
            if (!Utils.isString(data)) return '';
            if (!/\[DICTIONARY\]/.test(data)) return '';
            const [, dic] = data.split(':');
            return dic;
        },
    },
    methods: {
        getListData() {
            return Api.Rs.Dic.entry({ dicCode: this.dictionary }, { isAxiosResponseData: true }).then(res => {
                // const str = json.data.data.reduce((prev, curr) => {
                //     prev.push({
                //         id: curr.id,
                //         name: curr.name,
                //     });
                //     return prev;
                // }, []);
                // console.log(this.type, this.$el, JSON.stringify(str));
                this.listData = res.data;
            });
        },
    },
    created() {
        const { data, type } = this;
        if (!data && !type) throw new Error('props: "type / data" 至少填写一个');
        // console.log(this.data);
    },
};
</script>

<style lang='scss'>
.el-checkbox-group {
    &.vertical {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;

        .el-checkbox {
            margin-left: 0;
        }
    }
}
</style>
