<script setup>
import {computed, reactive, ref} from 'vue';
import RefuseModal from "../../task-center/components/RefuseModal.vue";
import OriginTag from "../../../../../components/OriginTag/index.vue";
import Api from "../../../../../api/index.js";
import {Message} from "@arco-design/web-vue";
import {useSystemStore} from "../../../../../pinia/SystemStore/index.js";
import {openUrl} from "../../../../../utils/index.js";

const SystemStore = useSystemStore();
const columns = computed(() => {
    const temp = [
        {
            title: '回传数据',
            dataIndex: 'backData',
            slotName: 'backData'
        },
        {
            title: '操作',
            dataIndex: 'action',
            slotName: 'action',
        },
        {
            title: '回传数据状态',
            dataIndex: 'backStatus',
            slotName: 'backStatus',
        },
    ];
    if (SystemStore.isRoot) temp.splice(1, 1);
    return temp;
});
const {item} = defineProps({
    item: {
        type: Object,
        default: () => ({})
    }
});
const visible = ref(false);
const data = reactive([]);

const getData = async () => {
    const api = SystemStore.isRoot ? Api.admin.getBackinfo : Api.merchant.getBackinfo;
    const id = SystemStore.isRoot ? item.tc_id : item.id;
    const {data: _data} = await api({id: id});
    data.length = 0;
    data.push(..._data);
}

const passTask = async (id, task_backfill_id) => {
    const {msg} = await Api.merchant.passTask({
        id: id,
        task_backfill_id: task_backfill_id,
    });
    Message.success(msg);
    await getData();
}
</script>

<template>
    <a-link :hoverable="false" @click="() => {
        visible=true;
        getData();
    }">查看回填
    </a-link>

    <a-modal
        title-align="start"
        title="查看回填"
        :width="800"
        v-model:visible="visible">
        <a-table
            :pagination="false"
            :data="data"
            :columns="columns">
            <template v-slot:backData="{record}">
                <div class="flex flex-col">
                    <template v-if="record?.back?.material_type === 1">
                        <div v-for="v in record?.back?.content_data" class="!flex items-center gap-[12px]">
                            <div class="flex-shrink-0">
                                <a-image width="30" height="30" :src="v.content" fit="cover"></a-image>
                            </div>
                            <a-link @click="openUrl(v)" :hoverable="false">
                                {{ v.name }}
                            </a-link>
                        </div>
                    </template>
                    <template v-if="record?.back?.material_type === 2">
                        <a-link v-for="v in record?.back?.content_arr" @click="openUrl(v)" :hoverable="false">
                            {{ v }}
                        </a-link>
                    </template>
                    <template v-if="record?.back?.material_type === 3">
                        <div v-for="v in record?.back?.content_arr">
                            {{ v }}
                        </div>
                    </template>
                </div>
            </template>

            <template v-slot:action="{record}">
                <div class="flex gap-[16px] justify-center items-center">
                    <a-popconfirm content="确定通过吗?" @ok="passTask(item.id, record.back.id)">
                        <a-link :hoverable="false" status="success"
                                :disabled="!(record.back_status===2)">通过
                        </a-link>
                    </a-popconfirm>

                    <RefuseModal :taskId="item.id"
                                 :task="record"
                                 @success="getData"
                                 :disabled="!(record.back_status===2)"></RefuseModal>
                </div>
            </template>

            <template v-slot:backStatus="{record}">
                <div>
                    <OriginTag color="var(--color-neutral-4)" v-if="record.back_status === 0">
                        \
                    </OriginTag>
                    <OriginTag color="rgb(var(--arcoblue-6))"
                               v-if="record.back_status === 1 || record.back_status === 5">
                        {{ record.back_status_text }}
                    </OriginTag>
                    <OriginTag color="rgb(var(--success-6))" v-if="record.back_status === 2">
                        {{ record.back_status_text }}
                    </OriginTag>
                    <OriginTag color="rgb(var(--orange-6))" v-if="record.back_status === 3">
                        {{ record.back_status_text }}
                    </OriginTag>
                    <OriginTag color="rgb(var(--danger-6))" v-if="record.back_status === 4">
                        {{ record.back_status_text }}
                    </OriginTag>
                </div>
            </template>
        </a-table>
    </a-modal>
</template>

<style scoped>

</style>
