<script setup>
import Filter from "../../../../components/Filter/index.vue";
import {reactive, computed} from "vue";
import useTableQuery from "../../../../hooks/useTableQuery.js";
import Api from "../../../../api/index.js";
import LookBackfillModal from "./components/look-backfill-modal.vue";

const columns = [
    {
        title: '任务编号',
        dataIndex: 'name',
    },
    {
        title: '任务名称',
        dataIndex: 'name',
    },
    {
        title: '子任务编号',
        dataIndex: 'name',
    },
    {
        title: '领取时间',
        dataIndex: 'name',
        align: 'center',
    },
    {
        title: '沟通进度',
        dataIndex: 'gtjd',
        slotName: 'gtjd',
        align: 'center',
    },
    {
        title: '达人账号',
        dataIndex: 'name',
        align: 'center',
    },
    {
        title: '回填数据',
        dataIndex: 'htsj',
        slotName: 'htsj',
        align: 'center',
    },
    {
        title: '达人反馈',
        dataIndex: 'drfk',
        slotName: 'drfk',
        align: 'center',
    },
    {
        title: '支付状态',
        dataIndex: 'zfzt',
        slotName: 'zfzt',
        align: 'center',
    },
];
const FilterConfig = computed(() => [
    {
        key: 'wd',
        type: 'input',
        label: '任务名称',
        placeholder: '请输入任务名称'
    },
    {
        key: 'wd',
        type: 'select',
        label: '支付状态',
        placeholder: '请选择支付状态'
    },
    {   // 占位
        key: 'wd',
        type: 'custom',
        label: '',
    },
    {
        key: 'wd',
        type: 'input',
        label: '任务编号',
        placeholder: '请输入任务编号'
    },
    {
        key: 'wd',
        type: 'input',
        label: '子任务编号',
        placeholder: '请输入子任务编号'
    },
    {
        key: 'wd',
        type: 'input',
        label: '达人账号',
        placeholder: '请输入达人账号'
    },
]);
const po = reactive({
    wd: null,
});
const vo = reactive({
    page: '',
    rows: [],
    total: 0,
});
const {loading, pagination, initFetchData} = useTableQuery({
    parameter: po,
    api: Api.system.getData,
    callback: (data) => {
        Object.assign(vo, data);
        console.log(vo);
    }
});
</script>

<template>
    <!-- 沟通中心 -->
    <div id="Item-View">
        <a-card>
            <Filter v-model:from="po" :config="FilterConfig" @search="initFetchData"></Filter>

            <a-tabs class="pt-[20px]" type="rounded">
                <a-tab-pane title="待回复" :key="1">
                </a-tab-pane>
                <a-tab-pane title="已完成" :key="2">
                </a-tab-pane>
            </a-tabs>

            <div class="flex-grow">
                <a-table
                    class="h-full"
                    @page-change="(e) => pagination.current = e"
                    :pagination="pagination"
                    :loading="loading"
                    :columns="columns"
                    :data="vo.rows">
                    <template v-slot:gtjd>
                        <div class="flex items-center gap-[8px] justify-center">
                            <div class="bg-[#165DFF] w-[6px] aspect-square rounded-[50%]"></div>
                            待回复
                        </div>
                    </template>
                    <template v-slot:htsj>
                        <look-backfill-modal></look-backfill-modal>
                    </template>
                    <template v-slot:drfk>
                        <a-badge :count="9" dot :dotStyle="{ width: '10px', height: '10px' }">
                            <a-link :hoverable="false">沟通记录</a-link>
                        </a-badge>
                    </template>
                    <template v-slot:zfzt="{rowIndex}">
                        <a-link v-if="rowIndex%2===0" :hoverable="false" status="success">确认结算</a-link>
                        <a-link v-else :hoverable="false" status="success" disabled>已结算</a-link>
                    </template>
                </a-table>
            </div>
        </a-card>
    </div>
</template>

<style scoped>

</style>
