<!--
 - MineAdmin is committed to providing solutions for quickly building web applications
 - Please view the LICENSE file that was distributed with this source code,
 - For the full copyright and license information.
 - Thank you very much for using MineAdmin.
 -
 - @Author X.Mo<root@imoi.cn>
 - @Link   https://gitee.com/xmo/mineadmin-vue
-->
<template>
    <a-drawer v-model:visible="visible" width="800px" :on-before-ok="save" ok-text="保存绑定">
        <template #title>绑定接口</template>
        <a-spin :loading="loading" tip="数据加载中..." class="w-full h-full">
            <div class="w-full">
                <a-space>
                    <a-button type="primary" @click="selectAll">
                        <template #icon><icon-select-all /></template>全选</a-button
                    >
                    <a-button type="primary" @click="flushAll"
                        ><template #icon><icon-eraser /></template>清除</a-button
                    >
                </a-space>

                <div
                    v-for="(group, index) in apiGroupData"
                    :key="index"
                    class="mt-5 p-3 rounded flex flex-col"
                    style="border: 1px solid var(--color-border-2)"
                >
                    <a-space>
                        {{ group.name }}
                        <a-checkbox v-model="checkAll[index]" @change="handleCheckAllChange(index, group.apis)"
                            >全选</a-checkbox
                        >
                    </a-space>
                    <a-checkbox-group class="mt-3" v-model="apiGroupCheckList[index]" v-if="group.apis.length > 0">
                        <a-checkbox v-for="(item, key) in group.apis" :key="key" :value="item.id">
                            {{ item.name }}
                        </a-checkbox>
                    </a-checkbox-group>
                    <a-empty v-else>暂无接口</a-empty>
                </div>
            </div>
        </a-spin>
    </a-drawer>
</template>

<script setup>
import { ref } from "vue"
import { uniq } from "lodash"
import apiGroup from "@/api/system/apiGroup"
import app from "@/api/system/app"
import { Message } from "@arco-design/web-vue"

const visible = ref(false)
const loading = ref(true)
const appId = ref()
const apiGroupData = ref([])
const apiGroupCheckList = ref([])
const checkAll = ref([])

const open = async (id) => {
    appId.value = id
    visible.value = true
    //解决多次打开抽屉数据全选问题
    apiGroupCheckList.value = []
    await requestApiList()
    await setBindData()
    loading.value = false
}

const save = async (done) => {
    const ids = []
    apiGroupCheckList.value.map((item) => ids.push(...item))
    if (appId.value) {
        const response = await app.bind(appId.value, { apiIds: uniq(ids) })
        if (response.success) {
            Message.success(response.message)
            done(true)
            return
        }
        done(false)
    }
    done(false)
}

const requestApiList = async () => {
    const response = await apiGroup.getSelectList({ getApiList: true })
    apiGroupData.value = response.data
    apiGroupData.value.forEach((_) => {
        apiGroupCheckList.value.push([])
        checkAll.value.push(false)
    })
}

const setBindData = async () => {
    const response = await app.getBindApiList({ id: appId.value })
    if (response.success && response.data.length > 0) {
        response.data.map((id) => {
            apiGroupData.value.map((rows, index) => {
                rows.apis.map(async (item) => {
                    if (item.id == id) {
                        apiGroupCheckList.value[index].push(item.id)
                    }
                })
                if (apiGroupCheckList.value[index].length == rows.apis.length) {
                    checkAll.value[index] = true
                }
            })
        })
    }
}

// 分组全选
const handleCheckAllChange = (index, rows) => {
    if (!checkAll.value[index]) {
        apiGroupCheckList.value[index] = []
    } else {
        rows.map((row) => {
            apiGroupCheckList.value[index].push(row.id)
        })
    }
}

const selectAll = () => {
    apiGroupData.value.map((row, index) => {
        checkAll.value[index] = true
        handleCheckAllChange(index, row.apis)
    })
}

const flushAll = () => {
    apiGroupData.value.map((row, index) => {
        checkAll.value[index] = false
        apiGroupCheckList.value[index] = []
    })
}

defineExpose({ open })
</script>
