<template>
    <div class="mta-formFieldset fsize-m4-l">
        <fieldset class="re_fieldset">
            <legend class="bt_legend"><i></i>{{list.name}}</legend>
<!--            :indeterminate="isIndeterminate"  未全选中状态-->
            <el-checkbox v-if="list.name !== '首页'" class="qx_box"  v-model="checkAll"
                         @change="handleCheckAllChange">全选
            </el-checkbox>
            <el-checkbox v-else class="qx_box"  v-model="checkAll"
                         @change="handleCheckAllChange">首页
            </el-checkbox>
            <div class="group_box">
                <el-checkbox-group v-model="checkedList" @change="handleCheckedChange">
                    <el-checkbox v-for="child in list.children" :label="child.menuId" :key="child.menuId">
                        {{child.name}}
                    </el-checkbox>
                </el-checkbox-group>
            </div>
        </fieldset>
    </div>
</template>

<script>
    export default {
        name: "FormFieldset",
        props: {
            list: { // 标题数据
                type: Object,
                default: () => {
                },
            },
            OriginCheckedList: { // 每项checkbox数据
                type: Array,
                default: () => [],
            },
        },
        data() {
            return {
                isIndeterminate: true,
                checkAll: false,
                checkedList: this.OriginCheckedList,
                backListData: {},
            };
        },
        methods: {
            checkForm() {
                this.checkAll = this.list.checked.length === this.list.children.length+1;
            },
            handleCheckedChange(value) {

                if (value.includes(this.list.menuId)){
                    value.splice(value.indexOf(this.list.menuId),1)
                }
                const checkedCount = value.length;
                this.checkAll = checkedCount === this.list.children.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.list.children.length;
                this.backListData = {
                    checkedMenuListFromChild: value,
                    originList: this.list.children.map((item) => item.menuId),
                };
                if (this.backListData.checkedMenuListFromChild.length > 0 && !this.backListData.checkedMenuListFromChild.includes(this.list.menuId)) {
                    this.backListData.checkedMenuListFromChild.push(this.list.menuId);
                }
                if (this.backListData.checkedMenuListFromChild.length === 1 && this.backListData.checkedMenuListFromChild.includes(this.list.menuId)) {
                    this.backListData.checkedMenuListFromChild = [];
                }
                if (this.backListData.checkedMenuListFromChild.length === 0 ) {
                    const checkedListArr = this.list.children.map((item) => item.menuId);
                    checkedListArr.push(this.list.menuId);
                    this.backListData = {
                        checkedMenuListFromChild: [],
                        originList: checkedListArr,
                    };
                }
                this.$emit('checkedRAMIChild', this.backListData);
            },
            handleCheckAllChange(val) {
                const checkedListArr = this.list.children.map((item) => item.menuId);
                checkedListArr.push(this.list.menuId);
                this.checkedList = val ? checkedListArr : [];
                this.isIndeterminate = false;
                this.backListData = {
                    checkedMenuListFromChild: this.checkedList,
                    originList: checkedListArr,
                };
                this.$emit('checkedRAMIChild', this.backListData);
            },
        },
        created() {
            this.checkForm();
        }
    }
</script>

<!--<style lang="scss" scoped>
    .mta-formFieldset {
        display: block;

        fieldset {
            padding: 10px;
        }

        .qx_box {
            width: 60px;
            float: left;
            margin-right: 10px;
        }

        .bt_legend {
            /*font-family: PingFangSC-Regular;*/
            font-size: 16px;
            /*color: #333333;*/
        }

        .group_box {
            margin-left: 70px;
        }

        .el-checkbox {
            margin-bottom: 8px;
        }

        .bt_legend i {
            width: 4px;
            height: 11px;
            //background: #2196f5;
            display: block;
            margin-right: 10px;
            float: left;
            margin-top: 4px;
        }

        .re_fieldset {
            border: 0;
        }

    }
</style>-->
