<script setup>
import SequenceAdjustment from "../../../../../../components/SequenceAdjustment/index.vue";
import {reactive} from "vue";
import useTableQuery from "../../../../../../hooks/useTableQuery.js";
import Api from "../../../../../../api/index.js";
import AddSecondaryClassificationManagement from "./components/AddSecondaryClassificationManagement.vue";
import {Message} from "@arco-design/web-vue";

const columns = [
    {
        title: 'ID',
        dataIndex: 'id',
    },
    {
        title: '二级分类名称',
        dataIndex: 'name',
    },
    {
        title: '排序',
        dataIndex: 'sort',
        slotName: 'sort',
        width: 140,
    },
    {
        title: '操作',
        dataIndex: 'action',
        slotName: 'action',
        width: 120,
    },
];

const po1 = reactive({pid: 1});
const po2 = reactive({pid: 2});
const vo1 = reactive({
    page: '',
    rows: [],
    total: 0,
});
const vo2 = reactive({
    page: '',
    rows: [],
    total: 0,
});

const {loading: loading1, pagination: pagination1, fetchData: fetchData1} = useTableQuery({
    parameter: po1,
    api: Api.admin.getArticleCategoryList,
    callback: (data) => {
        Object.assign(vo1, data);
    }
});

const {loading: loading2, pagination: pagination2, fetchData: fetchData2} = useTableQuery({
    parameter: po2,
    api: Api.admin.getArticleCategoryList,
    callback: (data) => {
        Object.assign(vo2, data);
    }
});

const del = async (id) => {
    const {msg} = await Api.admin.delArticleCategory(id);
    Message.success(msg);
    await fetchData1();
    await fetchData2();
}
</script>

<template>
    <div class="w-full h-full flex gap-[20px]">
        <div class="flex-grow flex flex-col gap-[20px]">
            <div class="flex justify-between">
                <div class="title">常见问题</div>

                <AddSecondaryClassificationManagement
                    @success="fetchData1"
                    :pid="1"
                    :max-class="1">
                </AddSecondaryClassificationManagement>
            </div>

            <a-table
                @page-change="(e) => pagination1.current = e"
                :pagination="pagination1"
                :data="vo1.rows"
                :loading="loading1"
                :columns="columns"
                class="w-full h-full">
                <template v-slot:sort="{record}">
                    <SequenceAdjustment
                        :id="record.id"
                        @success="fetchData1"
                        :api="Api.admin.weighArticleCategory">
                    </SequenceAdjustment>
                </template>
                <template v-slot:action="{record}">
                    <div class="flex gap-[10px]">
                        <AddSecondaryClassificationManagement
                            @success="fetchData1"
                            :detail="record"
                            :pid="1"
                            :max-class="1">
                            <a-link :hoverable="false">编辑</a-link>
                        </AddSecondaryClassificationManagement>
                        <a-popconfirm content="确定删除吗?" @ok="del(record.id)">
                            <a-link :hoverable="false" status="danger">删除</a-link>
                        </a-popconfirm>
                    </div>
                </template>
            </a-table>
        </div>

        <div class="flex-grow flex flex-col gap-[20px]">
            <div class="flex justify-between">
                <div class="title">基础教学</div>

                <AddSecondaryClassificationManagement
                    @success="fetchData2"
                    :pid="2"
                    :max-class="2">
                </AddSecondaryClassificationManagement>
            </div>

            <a-table
                @page-change="(e) => pagination2.current = e"
                :pagination="pagination2"
                :data="vo2.rows"
                :loading="loading2"
                :columns="columns"
                class="w-full h-full">
                <template v-slot:sort="{record}">
                    <SequenceAdjustment
                        :id="record.id"
                        @success="fetchData2"
                        :api="Api.admin.weighArticleCategory">
                    </SequenceAdjustment>
                </template>
                <template v-slot:action="{record}">
                    <div class="flex gap-[10px]">
                        <AddSecondaryClassificationManagement
                            @success="fetchData2"
                            :detail="record"
                            :pid="2"
                            :max-class="2">
                            <a-link :hoverable="false">编辑</a-link>
                        </AddSecondaryClassificationManagement>
                        <a-popconfirm content="确定删除吗?" @ok="del(record.id)">
                            <a-link :hoverable="false" status="danger">删除</a-link>
                        </a-popconfirm>
                    </div>
                </template>
            </a-table>
        </div>
    </div>
</template>

<style scoped lang="scss">
.title {
    color: rgb(29, 33, 41);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0;
    text-align: left;
}
</style>
