<script setup>
import {reactive, ref} from "vue";
import useTableQuery from "../../../../hooks/useTableQuery.js";
import Api from "../../../../api/index.js";
import XImageSmallList from "../../../../components/XImage/XImageSmallList.vue";
import XTagSelect from "../../../../components/XSelect/XTagSelect.vue";
import {Message} from "@arco-design/web-vue";

const columns = [
    {
        title: 'ID',
        dataIndex: 'key',
        width: 120,
    },
    {
        title: '达人ID',
        dataIndex: 'uid',
        width: 120,
    },
    {
        title: '投诉截图',
        dataIndex: 'image',
        slotName: 'image',
    },
    {
        title: '投诉内容',
        dataIndex: 'intro',
    },
    {
        title: '联系方式',
        dataIndex: 'mobile',
        width: 150,
    },
    {
        title: '状态',
        dataIndex: 'action',
        slotName: 'action',
        width: 120,
    },
];
const selectedKeys = ref([]);
const rowSelection = reactive({
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false,
});
const po = reactive({});
const vo = reactive({
    page: '',
    rows: [],
    total: 0,
});

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

const getActionList = () => Promise.resolve({
    data: [
        {
            id: 0,
            name: '待处理',
            color: 'cyan',
        },
        {
            id: 1,
            name: '已处理',
            color: 'green',
        },
    ]
});

const changeStatus = async (item) => {
    const {msg} = await Api.admin.editComplaintStatus({
        ids: [item.id],
        status: item.status,
    });
    Message.success(msg);
    await fetchData();
}

const handleStatus = async (status) => {
    const {msg} = await Api.admin.editComplaintStatus({
        ids: selectedKeys.value,
        status: status,
    });
    Message.success(msg);
    await fetchData();
    selectedKeys.value.length = 0;
}
</script>

<template>
    <!-- 团队投诉 -->
    <a-card>
        <div class="title">
            团队投诉
        </div>

        <div class="flex gap-[16px] mb-[16px]">
            <a-button type="primary" @click="handleStatus(1)">
                <template #icon>
                    <icon-check/>
                </template>
                批量已处理
            </a-button>
            <a-button type="primary" @click="handleStatus(0)">
                <template #icon>
                    <icon-clock-circle/>
                </template>
                批量未处理
            </a-button>
        </div>

        <a-table
            :loading="loading"
            v-model:selectedKeys="selectedKeys"
            :row-selection="rowSelection"
            @page-change="(e) => pagination.current = e"
            :pagination="pagination"
            :data="vo.rows"
            :columns="columns"
            class="flex-grow">
            <template v-slot:image="{record}">
                <x-image-small-list
                    :list="record.images_arr">
                </x-image-small-list>
            </template>
            <template v-slot:action="{record}">
                <x-tag-select
                    @change="changeStatus(record)"
                    :api="getActionList"
                    :init="true"
                    v-model:model-value="record.status">
                </x-tag-select>
            </template>
        </a-table>
    </a-card>
</template>

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