<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 AddFrequentlyQuestions from "./components/AddFrequentlyQuestions.vue";
import XSwitch from "../../../../../../components/XSwitch/index.vue";
import {Message} from "@arco-design/web-vue";

const columns = [
    {
        title: 'ID',
        dataIndex: 'id',
        width: 120,
    },
    {
        title: '二级分类',
        dataIndex: 'name',
    },
    {
        title: '标题',
        dataIndex: 'title',
    },
    {
        title: '简介',
        dataIndex: 'content',
    },
    {
        title: '是否启用',
        dataIndex: 'isStatus',
        slotName: 'isStatus',
        width: 100,
        align: 'center',
    },
    {
        title: '是否置顶',
        dataIndex: 'isTop',
        slotName: 'isTop',
        width: 100,
        align: 'center',
    },
    {
        title: '排序',
        dataIndex: 'sort',
        slotName: 'sort',
        width: 140,
    },
    {
        title: '操作',
        dataIndex: 'action',
        slotName: 'action',
        width: 120,
    },
];
const po = reactive({
    pid: 1
});
const vo = reactive({
    page: '',
    rows: [],
    total: 0,
});

const {loading, pagination, fetchData} = useTableQuery({
    parameter: po,
    api: Api.admin.getArticleList,
    callback: (data) => {
        Object.assign(vo, data);
    }
});

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

<template>
    <AddFrequentlyQuestions
        :pid="1"
        @success="fetchData">
    </AddFrequentlyQuestions>

    <a-table
        :loading="loading"
        @page-change="(e) => pagination.current = e"
        :pagination="pagination"
        :data="vo.rows"
        :columns="columns"
        class="flex-grow mt-[20px] w-full">
        <template v-slot:isStatus="{record}">
            <x-switch
                v-model:model-value="record.status"
                :id="record.id"
                :api="Api.admin.statusArticle"
                @change="fetchData">
            </x-switch>
        </template>
        <template v-slot:isTop="{record}">
            <x-switch
                v-model:model-value="record.is_top"
                :id="record.id"
                :api="Api.admin.topArticle"
                @change="fetchData">
            </x-switch>
        </template>
        <template v-slot:sort="{record}">
            <SequenceAdjustment
                :id="record.id"
                @success="fetchData"
                :api="Api.admin.weighArticle">
            </SequenceAdjustment>
        </template>
        <template v-slot:action="{record}">
            <div class="flex gap-[20px]">
                <AddFrequentlyQuestions
                    @success="fetchData"
                    :detail="record"
                    :pid="1">
                    <a-link :hoverable="false">编辑</a-link>
                </AddFrequentlyQuestions>
                <a-popconfirm content="确认删除吗?" @ok="del(record.id)">
                    <a-link :hoverable="false" status="danger">删除</a-link>
                </a-popconfirm>
            </div>
        </template>
    </a-table>
</template>

<style scoped lang="scss">

</style>
