<template>
    <!-- 全局复选框 -->
    <view class="checkbox" :style="getStyle">
        <up-checkbox-group
            v-model="checkboxValue"
            :placement="placement"
            @change="checkboxChange"
            :disabled="disabled"
            :activeColor="activeColor"
            :labelSize="labelSize"
            :labelColor="labelColor"
            :borderBottom="borderBottom"
        >
            <up-checkbox
                :customStyle="getCustomStyle"
                v-for="(item, index) in getColumns"
                :key="index"
                :label="item.label"
                :name="item.value"
            ></up-checkbox>
        </up-checkbox-group>
    </view>
</template>

<script setup>
import { computed, ref, watch } from 'vue'
import * as dictData from 'mocp/hooks/use-dict/dict-data'
import { cloneDeep } from 'lodash'

const es = defineEmits(['update:modelValue', 'change'])
const ps = defineProps({
    //显示为空的value值
    emptyValue: {
        type: [String, Number],
        default: ''
    },
    dictkey: {
        type: String,
        default: ''
    },
    modelValue: {
        type: String,
        default: ''
    },
    options: {
        type: Array,
        default: () => {
            return []
        }
    },
    labelField: {
        type: String,
        default: 'label'
    },
    valueField: {
        type: String,
        default: 'value'
    },
    valueSplit: {
        type: String,
        default: ','
    },
    checkboxAlign: {
        type: String,
        default: 'left'
    },
    disabled: {
        type: Boolean,
        default: false
    },
    customStyle: {
        type: Object,
        default: () => {
            return {}
        }
    },
    activeColor: {
        type: String,
        default: '#165dff'
    },
    // row|column
    placement: {
        type: String,
        default: 'row'
    },
    labelSize: {
        type: String,
        default: '28rpx'
    },
    labelColor: {
        type: String,
        default: '#1D2129'
    },
    borderBottom: {
        type: Boolean,
        default: false
    }
})
const checkboxValue = ref([])
//获取复选框样式
const getStyle = computed(() => {
    let checkboxAlign = 'flex-start'
    if (ps.checkboxAlign == 'center') {
        checkboxAlign = 'center'
    } else if (ps.checkboxAlign == 'right') {
        checkboxAlign = 'flex-end'
    }
    return {
        justifyContent: checkboxAlign
    }
})
const getCustomStyle = computed(() => {
    const _style = {
        ...ps.customStyle
    }
    if (ps.placement == 'row') {
        _style.marginLeft = '16rpx'
    }
    return _style
})
//获取下拉框的内容Columns
const getColumns = computed(() => {
    if (ps.dictkey) {
        return cloneDeep(dictData[ps.dictkey])
    } else {
        if (ps.options && Object.prototype.toString.call(ps.options[0]) == '[object Object]') {
            return ps.options
        } else {
            return ps.options.map((item) => {
                return {
                    [ps.labelField]: item,
                    [ps.valueField]: item
                }
            })
        }
    }
})
//监听设置默认值
watch(
    [() => ps.modelValue, () => ps.options],
    () => {
        ps.modelValue.split(ps.valueSplit).forEach((item) => {
            let option = getColumns.value.find((option) => String(option[ps.valueField]) === String(item))
            if (option) {
                checkboxValue.value.push(option[ps.valueField])
            }
        })
    },
    { immediate: true }
)
const checkboxChange = (value) => {
    es('update:modelValue', value.join(ps.valueSplit))
    es('change', value.join(ps.valueSplit))
}
</script>
<style lang="scss" scoped>
.checkbox {
    display: flex;
}
</style>
