<script setup>
import {reactive, ref, watch} from "vue";
import Api from "../../../../../api/index.js";
import {Message} from "@arco-design/web-vue";
import {findSwappedIds} from "../../../../../utils/index.js";

const visible = ref(false);
const emits = defineEmits(['success']);
const loading = ref(false);
const columns = [
    {
        title: '模板备注',
        key: 'remark',
        dataIndex: 'remark',
    },
    {
        title: '任务名称',
        key: 'goods_name',
        dataIndex: 'goods_name',
    },
    {
        title: '任务渠道',
        key: 'platform_name',
        dataIndex: 'platform_name',
    },
    {
        title: '包含子任务',
        key: 'children_num',
        dataIndex: 'children_num',
    },
    {
        title: '子任务单价',
        key: 'children_price',
        dataIndex: 'children_price',
    },
    {
        title: '发布次数',
        key: 'fb_num',
        dataIndex: 'fb_num',
    },
    {
        title: '是否评论',
        key: 'is_comment',
        dataIndex: 'is_comment',
        slotName: 'is_comment',
    },
    {
        title: '回填内容',
        key: 'content',
        dataIndex: 'content',
        slotName: 'content',
    },
    {
        title: '保留时间',
        key: 'retention_time',
        dataIndex: 'retention_time',
        slotName: 'retention_time',
    },
    {
        title: '操作',
        key: 'action',
        dataIndex: 'action',
        slotName: 'action',
    },
];
const po = reactive({});
const vo = reactive([]);

const gatData = async () => {
    loading.value = true;
    const {data} = await Api.merchant.getModeList();
    vo.length = 0;
    vo.push(...data);
    loading.value = false;
}

watch(
    () => visible.value,
    (val) => {
        if (val) gatData();
    },
    {deep: true}
)

const success = async (id) => {
    const {msg} = await Api.merchant.TemplateToTask({
        id: id
    });
    Message.success(msg);
    emits('success');
    visible.value = false;
}

const delTaskTemplate = async (id) => {
    const {msg} = await Api.merchant.delTemplate({
        id: id
    });
    Message.success(msg);
    await gatData();
}

const handleChange = async (data) => {
    const [id, other_id] = findSwappedIds(vo, data);
    await Api.merchant.weighTemplate({
        id: id,
        other_id: other_id
    });
    await gatData();
}
</script>

<template>
    <div @click="visible=true">
        <slot></slot>
    </div>

    <a-modal
        :width="1200"
        title-align="start"
        v-model:visible="visible">
        <template v-slot:title>
            <div class="flex gap-[20px]">
                从模板快速创建
                <div class="text-[14px] text-[#4E5969]">模板已创建 {{ vo.length }} / 20</div>
            </div>
        </template>
        <div class="text-[14px] text-[#4E5969] mb-2">选择模板</div>
        <a-table
            :loading="loading"
            @change="handleChange"
            :draggable="{type: 'handle',fixed: true}"
            class="min-h-[500px]"
            :data="vo"
            :pagination="false"
            :columns="columns">
            <template v-slot:is_comment="{record}">
                {{ record.is_comment === 1 ? '是' : '否' }}
            </template>
            <template v-slot:content="{record}">
                <div v-for="v in record.content">{{ v }}</div>
            </template>
            <template v-slot:retention_time="{record}">
                {{ record.retention_time }}{{ record.retention_type === 2 ? 'h' : 'm' }}
            </template>
            <template v-slot:action="{record}">
                <div>
                    <a-link @click="success(record.id)">使用</a-link>
                    <a-popconfirm @ok="delTaskTemplate(record.id)" content="确定删除吗?">
                        <a-link status="danger">删除</a-link>
                    </a-popconfirm>
                </div>
            </template>
        </a-table>
    </a-modal>
</template>

<style scoped lang="scss">

</style>
