<template>
    <div class="info-checkbox">
        <el-checkbox
            v-if="row.allElection"
            v-model="checkAll"
            :border="row.border"
            :indeterminate="isIndeterminate"
            @change="handleCheckAllChange"
        >
            {{ $t(row.allElectionText) }}
        </el-checkbox>
        <el-checkbox-group
            v-model="checked"
            :class="{'block': row.inline !== undefined && !row.inline}"
            :size="row.size"
            :disabled="row.disabled?.()"
            @change="handleCheckedChange"
        >
            <!-- 通过 判断list 的值 不为 字符串的时候 item  是一个label value 的对象 -->
            <el-checkbox
                v-for="(item, index) of list"
                :key="index"
                :label="typeof item === 'string' ? item : item.value"
                :border="row.border"
                :disabled="item.disabled?.()"
            >
                {{ $t(item.label || item) }}
            </el-checkbox>
        </el-checkbox-group>
    </div>
</template>
<script lang="ts">
import { defineComponent, reactive, onMounted, ref, watch, PropType } from 'vue'
import useModel from '../../../script/help/useModel'
import { CheckboxInterface } from './index'
import { CheckboxValueType } from 'element-plus/es/components/checkbox/src/checkbox'

export default defineComponent({
    name: 'InfoCheckbox',
    props: {
        row: {
            type: Object as PropType<CheckboxInterface>,
            default: () => {
            }
        },
        modelData: {
            type: Object,
            default: () => {
            }
        },
        addIndex: {
            type: [Number, String],
            default: ''
        }
    },
    setup (props) {
        const { row, modelData } = props
        let checkAll = ref<boolean>(false)
        const list = reactive<any[]>(row.checkbox())
        let isIndeterminate = ref<boolean>(false)
        let checked = useModel(modelData, row.model as string, row.deepData, props.addIndex)
        const setDefaultValue = (): void => {
            let checkedCount = (checked.value as []).length
            checkAll.value = checkedCount > 0 && checkedCount === list.length
            isIndeterminate.value = checkedCount > 0 && checkedCount < list.length
        }
        const handleCheckAllChange = (val: CheckboxValueType): any => {
            let checkedList = typeof list[0] === 'string' ? list : list.map((item: Record<string, unknown>) => {
                return item.value
            })
            let disabled = typeof list[0] === 'string' ? [] : list.filter((item: Record<string, any>) => item?.disabled?.()).map((item: Record<string, unknown>) => item.value)
            checked.value = val ? checkedList : disabled
            row.methods?.(checked, 'all')
            if (disabled.length > 0 && !val) {
                isIndeterminate.value = disabled.length > 0
                return
            }
            isIndeterminate.value = false
        }
        const handleCheckedChange = (value: unknown[]): void => {
            if (row.allElection !== false) {
                let checkedCount = value.length
                checkAll.value = checkedCount === list.length
                isIndeterminate.value = checkedCount > 0 && checkedCount < list.length
            }
            row.methods?.(value)
        }
        watch(() => checked.value, () => {
            if (row.allElection !== false) {
                setDefaultValue()
            }
        })
        onMounted(() => {
            setTimeout(() => {
                if (row.allElection !== false) {
                    setDefaultValue()
                }
            }, 0)
        })
        return {
            checkAll,
            list,
            isIndeterminate,
            checked,
            handleCheckAllChange,
            handleCheckedChange
        }
    }
})
</script>
<style lang="scss" scoped>
.block {
    label.el-checkbox {
        display: flex;
    }
}
</style>
