<template>
    <!-- 复选框组件 -->
    <div class="checkbox">
        <el-checkbox-group
            v-model="activeItem"
            :size="size"
            :text-color="activeTextColor"
            :fill="fillColor"
            :class="[{ fatherClass: isShowCheck }]"
        >
            <el-checkbox
                v-for="it in checkList"
                :key="it[fieldName[1]]"
                :label="it[fieldName[1]]"
                :border="border"
                >{{ it[fieldName[0]] }}</el-checkbox
            >
        </el-checkbox-group>
    </div>
</template>

<script>
export default {
    /**
     * @value v-model绑定值
     * @size 大小
     * @border 边框
     * @isShowCheck 是否展示复选框
     * @checkList 复选框数据 {label}显示内容 {value}实际值
     * @activeTextColor 高亮文本色
     * @fillColor 高亮填充色+边框色
     */
    props: {
        value: { type: String, default: '' },
        size: { type: String, default: 'medium' },
        border: { type: Boolean, default: true },
        isShowCheck: { type: Boolean, default: true },
        checkList: {
            type: Array,
            default() {
                return []
            },
        },
        fieldName: {type: Array, default() {return ['name', 'id']}},
        activeTextColor: { type: String, default: '#409EFF' },
        fillColor: { type: String, default: '#ecf3fd' },
    },
    data() {
        return {
            activeItem: [],
        }
    },
    watch: {
        // 复选框变化同步v-model
        activeItem: {
            handler(newval, oldval) {
                const str = newval.join(',')
                this.$emit('input', str)
            },
        },
        // 复选框回填
        value: {
            handler(newval, oldval) {
                if (newval) {
                    const arr = newval.split(',')
                    this.activeItem = arr
                }
            },
            immediate: true,
        },
    },
    methods: {},
}
</script>

<style scoped>
.checkbox {
    width: 100%;
    box-sizing: border-box;
}
.fatherClass >>> .el-checkbox__input {
    display: none;
}
.checkbox >>> .el-checkbox {
    width: 110px;
    height: 34px !important;
    background: #ffffff;
    border: 1px solid #ebebeb;
    margin-right: 20px;
    margin-bottom: 10px;
    margin-left: 0px !important;
    line-height: 34px;
    text-align: center;
    box-sizing: border-box;
}
.checkbox >>> .is-checked {
    background: #ecf3fd;
    border: none;
}
.checkbox >>> .el-checkbox.is-bordered.el-checkbox--medium {
    border-radius: 2px;
    padding: 0;
}
.checkbox >>> .el-checkbox__label {
    padding: unset;
    font-size: 15px !important;
}
</style>
