<!-- 编辑弹窗 -->
<template>
    <ele-modal
        form
        :width="1080"
        :bodyStyle="{ 'min-height': '400px' }"
        v-model="visible"
        :title="title"
        @open="handleOpen"
    >
        <div class="flex flex-col" v-loading="loading">
            <div class="flex" v-for="dq in areaList" :key="dq.code">
                <el-checkbox
                    :label="dq.name"
                    :indeterminate="isIndeterminateShow(dq)"
                    style="min-width: 100px"
                    @change="(value) => handleDqChange(value, dq)"
                />

                <div
                    v-for="item in dq.children"
                    class="mr-6 flex items-center"
                    :key="item.code"
                >
                    <el-checkbox
                        @change="(value) => handleParentChange(value, item)"
                        :data-id="item.id"
                        v-model="item.otherSelected"
                        style="margin-right: 5px"
                        :true-value="1"
                        :false-value="0"
                        :indeterminate="
                            isIndeterCityShow(item, 'otherSelected')
                        "
                        v-if="item.otherSelected == 1"
                        disabled
                    />
                    <el-checkbox
                        @change="(value) => handleParentChange(value, item)"
                        :data-id="item.id"
                        v-model="item.mySelected"
                        style="margin-right: 5px"
                        :true-value="1"
                        :false-value="0"
                        :indeterminate="isIndeterCityShow(item, 'mySelected')"
                        v-else
                    />
                    <ele-popover
                        :width="400"
                        trigger="click"
                        :title="item.district"
                        :showArrow="false"
                        :disabled="isPopoverDisabled(item)"
                    >
                        <template #reference>
                            <div
                                class="flex items-center cursor-pointer"
                                :class="{
                                    'disabled-popover': isPopoverDisabled(item)
                                }"
                            >
                                <el-text
                                    :type="
                                        item.mySelected == 1 ? 'primary' : ''
                                    "
                                    >{{ item.district }}</el-text
                                >
                                <el-text type="warning" v-if="isShowAll(item)"
                                    >(全)</el-text
                                >
                                <el-icon>
                                    <CaretBottom />
                                </el-icon>
                            </div>
                        </template>
                        <template v-for="child in item.childInfo">
                            <el-checkbox
                                @change="
                                    (value) =>
                                        handleChildChange(value, item, child)
                                "
                                :data-id="child.id"
                                :label="child.district"
                                v-model="child.otherSelected"
                                :true-value="1"
                                :false-value="0"
                                v-if="child.otherSelected == 1"
                                disabled
                            />
                            <el-checkbox
                                v-else
                                @change="
                                    (value) =>
                                        handleChildChange(value, item, child)
                                "
                                :data-id="child.id"
                                v-model="child.mySelected"
                                :label="child.district"
                                :true-value="1"
                                :false-value="0"
                            />
                        </template>
                    </ele-popover>
                </div>
            </div>
        </div>
        <el-text type="danger"
            >灰色地区表示已经添加到其他仓库中，请先在其他仓库中去掉勾选后，再重新选择</el-text
        >

        <template #footer>
            <el-button @click="handleCancel">关闭</el-button>
            <el-button type="primary" @click="handleSubmit">确定</el-button>
        </template>
    </ele-modal>
</template>

<script setup>
    import { ref, reactive, nextTick } from 'vue';
    import request from '@/utils/request';
    import { CaretBottom, CaretTop } from '@element-plus/icons-vue';

    /** 弹窗是否打开 */
    const visible = defineModel({ type: Boolean });

    /** 关闭弹窗 */
    const handleCancel = () => {
        visible.value = false;
    };

    //计算是否禁用
    const isPopoverDisabled = computed(() => (item) => {
        let checked = item.childInfo.every((i) => i.otherSelected == 1);
        return checked;
    });

    //计算是否显示全
    const isShowAll = computed(() => (item) => {
        let checked = item.childInfo.every((i) => i.mySelected == 1);
        return checked;
    });
    //计算大区是否全选
    const isIndeterminateShow = computed(() => (dq) => {
        let len = dq.children.length;
        let length = dq.children.filter((i) => i.mySelected == 1).length;

        return length > 0 && length < len;
    });

    //计算省市是否全选
    const isIndeterCityShow = computed(() => (item, type) => {
        let len = item.childInfo.length;
        let length = item.childInfo.filter((i) => i[type] == 1).length;

        return length > 0 && length < len;
    });

    /** 弹窗打开事件 */
    const title = ref('仓库区域设置');
    const handleOpen = (row) => {
        visible.value = true;
        nextTick(() => {
            if (row && row.id) {
                title.value = row.godownName
                    ? `${row.godownName}区域设置`
                    : `仓库区域设置`;

                row && getAreaInfo(row.id);
            }
        });
    };

    let formdata = reactive({
        godownId: '',
        selectendList: [{ provinceId: '', cityId: '' }]
    });

    //获取区域基础数据信息
    let dqList = ref([
        { name: '华东', code: 'hd' },
        { name: '华北', code: 'hb' },
        { name: '华中', code: 'hz' },
        { name: '华南', code: 'hn' },
        { name: '东北', code: 'db' },
        { name: '西北', code: 'xb' },
        { name: '西南', code: 'xn' },
        { name: '港澳台', code: 'gat' },
        { name: '海外', code: 'hw' }
    ]);
    const areaList = ref([]);
    const loading = ref(false);
    const getAreaInfo = (godownId) => {
        formdata.godownId = godownId;
        loading.value = true;
        request
            .get(`/baseinfo/godown/getGodownAreaList/${godownId}`)
            .then((res) => {
                if (res.data.code == 200) {
                    areaList.value.length = 0;
                    dqList.value.forEach((item) => {
                        item.checked = false;
                        item.children = res.data.data[item.code];
                        areaList.value.push(item);
                    });

                    console.log(areaList.value, 'areaList.value');
                }
            })
            .finally(() => (loading.value = false));
    };

    //区域checkbox改变事件
    const handleDqChange = (value, dq) => {
        if (value == 1) {
            dq.children.forEach((item) => {
                if (item.otherSelected != 1) {
                    item.mySelected = 1;
                    item.childInfo.forEach((i) => {
                        if (i.otherSelected != 1) {
                            i.mySelected = 1;
                        }
                    });
                }
            });
        } else if (value == 0) {
            dq.children.forEach((item) => {
                if (item.otherSelected != 1) {
                    item.mySelected = 0;
                    item.childInfo.forEach((i) => {
                        if (i.otherSelected != 1) {
                            i.mySelected = 1;
                        }
                    });
                }
            });
        }
    };

    //父级checkbox改变事件
    const handleParentChange = (value, item) => {
        if (value == 1) {
            item.childInfo.forEach((i) => {
                i.mySelected = 1;
            });
        } else if (value == 0) {
            item.childInfo.forEach((i) => {
                i.mySelected = 0;
            });
        }
    };
    //子级checkbox改变事件
    const handleChildChange = (value, item, child) => {
        let checked = item.childInfo.some((i) => i.mySelected == 1);
        item.mySelected = checked ? 1 : 0;
    };

    //格式化选中数据
    const formatterSelected = () => {
        let arr = [];
        areaList.value.forEach((item) => {
            item.children.forEach((i) => {
                i.childInfo.forEach((j) => {
                    if (j.mySelected == 1 && j.otherSelected != 1) {
                        arr.push({
                            provinceId: i.id,
                            cityId: j.id
                        });
                    }
                });
            });
        });
        return arr;
    };

    /** 提交 */
    const handleSubmit = () => {
        formdata.selectendList = formatterSelected();
        console.log(formdata);
        let data = JSON.parse(JSON.stringify(formdata));
        request.post(`/baseinfo/godown/setGodownAreaInfo`, data).then((res) => {
            if (res.data.code == 200) {
                visible.value = false;
            }
        });
    };

    defineExpose({
        handleOpen
    });
</script>

<style lang="scss">
    .disabled-popover {
        cursor: not-allowed;

        .el-text {
            color: #909399;
        }

        .el-icon {
            color: #909399;
            fill: #909399;
        }
    }
</style>
