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

const columns = [
    {
        title: '任务编号',
        dataIndex: 'code',
    },
    {
        title: '任务名称',
        dataIndex: 'goods_name',
    },
    {
        title: '子任务编号',
        dataIndex: 'uid',
    },
    {
        title: '领取时间',
        dataIndex: 'accept_time',
        align: 'center',
    },
    {
        title: '沟通进度',
        dataIndex: 'gtjd',
        slotName: 'gtjd',
        align: 'center',
    },
    {
        title: '达人账号',
        dataIndex: 'account',
        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: 'name',
        type: 'input',
        label: '任务名称',
        placeholder: '请输入任务名称'
    },
    {
        key: 'is_pay',
        type: 'select',
        label: '支付状态',
        placeholder: '请选择支付状态',
        api: async () => ({
            data: [
                {
                    id: 1,
                    name: '已支付',
                },
                {
                    id: 0,
                    name: '未支付',
                },
            ]
        })
    },
    {   // 占位
        key: 'wd',
        type: 'custom',
        label: '',
    },
    {
        key: 'code',
        type: 'input',
        label: '任务编号',
        placeholder: '请输入任务编号'
    },
    {
        key: 'childrencode',
        type: 'input',
        label: '子任务编号',
        placeholder: '请输入子任务编号'
    },
    {
        key: 'account',
        type: 'input',
        label: '达人账号',
        placeholder: '请输入达人账号'
    },
]);
const state = reactive({
    showChat: false,
    task: null,
})
const po = reactive({
    status: 0,
});
const vo = reactive({
    page: '',
    rows: [],
    total: 0,
});
const {loading, pagination, initFetchData, fetchData} = useTableQuery({
    parameter: po,
    api: Api.merchant.findTask,
    callback: (data) => {
        Object.assign(vo, data);
    }
});
</script>

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

            <a-tabs class="pt-[20px]" type="rounded" v-model:active-key="po.status" @change="initFetchData">
                <a-tab-pane title="待回复" :key="0">
                    <template v-slot:title v-if="vo.count1">
                        <a-badge :count="vo.count1" :offset="[15,-10]">
                            待回复
                        </a-badge>
                    </template>
                </a-tab-pane>
                <a-tab-pane title="已完成" :key="1">
                    <template v-slot:title v-if="vo.count2">
                        <a-badge :count="vo.count2" :offset="[15,-10]">
                            已完成
                        </a-badge>
                    </template>
                </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" v-if="po.status === 0">
                            <div class="bg-[#165DFF] w-[6px] aspect-square rounded-[50%]"></div>
                            待回复
                        </div>
                        <div class="flex items-center gap-[8px] justify-center" v-else>
                            <div class="bg-[#00B42A] w-[6px] aspect-square rounded-[50%]"></div>
                            已完成
                        </div>
                    </template>
                    <template v-slot:htsj="{record}">
                        <look-backfill-modal :item="record"></look-backfill-modal>
                    </template>
                    <template v-slot:drfk="{record}">
                        <a-badge :count="record.is_read" dot :dotStyle="{ width: '10px', height: '10px' }">
                            <a-link :hoverable="false" @click="async () => {
                                const {data} = await Api.merchant.getChildrenInfo(record.id);
                                state.showChat = true;
                                state.task = data;
                            }">沟通记录
                            </a-link>
                        </a-badge>
                    </template>
                    <template v-slot:zfzt="{record}">
                        <settlement :task="record" :disabled="!(record.is_settlement === 0 && record.status === 4)"
                                    @success="fetchData">
                            <a-link :hoverable="false" :disabled="!(record.is_settlement === 0 && record.status === 4)"
                                    status="success">
                                {{ record.settlement_text }}
                            </a-link>
                        </settlement>
                    </template>
                </a-table>
            </div>
        </a-card>
    </div>

    <Chat
        :task="state.task"
        v-model:visible="state.showChat">
    </Chat>
</template>

<style lang="scss">
.arco-tabs-nav {
    overflow: visible;

    .arco-tabs-nav-tab {
        overflow: visible;
    }
}
</style>
