<script setup>
import Comment from "../../../../components/Comment/index.vue";
import {reactive, ref} from "vue";
import useTableQuery from "../../../../hooks/useTableQuery.js";
import Api from "../../../../api/index.js";
import {useRoute} from "vue-router";
import MaterialLibrary from "../../components/MaterialLibrary.vue";
import AddMaterial from "../../components/AddMaterial.vue";
import AddComment from "../../components/AddComment.vue";
import XImageSmallList from "../../../../components/XImage/XImageSmallList.vue";
import ViewMaterial from "../../components/ViewMaterial.vue";
import XMention from "../../../../components/XMention/index.vue";
import {Message} from "@arco-design/web-vue";

const route = useRoute();
const AddMaterialRef = ref();
const columns = reactive([
    {
        title: '子任务编号',
        dataIndex: 'uid',
    },
    {
        title: '标题',
        dataIndex: 'title',
        slotName: 'title',
    },
    {
        title: '正文',
        dataIndex: 'content',
        slotName: 'content',
    },
    {
        title: '话题',
        dataIndex: 'tags',
        slotName: 'tags',
    },
    {
        title: '素材',
        dataIndex: 'material',
        slotName: 'material',
    },
    {
        title: '评论',
        dataIndex: 'pl',
        slotName: 'pl',
    },
]);
const po = reactive({
    id: route.query.id,
});
const vo = reactive({
    page: '',
    rows: [],
    total: 0,
    pageSize: 9,
});

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

const editMaterial = (index) => {
    AddMaterialRef.value[index].open();
}

const success = async () => {
    const {msg} = await Api.merchant.editChildrenMaterimal({
        id: vo.rows[0]?.task_id,
        data: vo.rows.map(v => v.childrenMaterial.map(k => ({
            id: k.id,
            title: k.title,
            content: k.content,
            tags: k.tags,
        }))).flat()
    });
    Message.success(msg);
    await fetchData();
}
</script>

<template>
    <!-- 批量管理素材 -->
    <a-card class="flex-grow text-[14px]">
        <div class="flex justify-between">
            <MaterialLibrary :id="po.id"></MaterialLibrary>
            <a-button type="primary" @click="success">确认修改</a-button>
        </div>

        <a-table
            :data="vo.rows"
            :loading="loading"
            :columns="columns"
            :scroll="{x: 'auto'}"
            class="w-full mt-[20px] flex-grow"
            @page-change="(e) => pagination.current = e"
            :pagination="false">
            <template v-slot:title="{record}">
                <div class="flex flex-col gap-[12px]">
                    <a-input
                        v-for="v in record.childrenMaterial"
                        placeholder="请输入标题"
                        v-model:model-value="v.title">
                    </a-input>
                </div>
            </template>
            <template v-slot:content="{record}">
                <div class="flex flex-col gap-[12px]">
                    <a-input
                        v-for="v in record.childrenMaterial"
                        placeholder="请输入正文"
                        v-model:model-value="v.content">
                    </a-input>
                </div>
            </template>
            <template v-slot:tags="{record}">
                <div class="flex flex-col gap-[12px]">
                    <x-mention
                        placeholder="请输入话题"
                        @success="(e) => v.tags = e"
                        v-for="v in record.childrenMaterial">
                    </x-mention>
                </div>
            </template>
            <template v-slot:material="{record, rowIndex}">
                <div class="flex flex-col gap-[12px]">
                    <div class="flex gap-[12px]" v-for="v in record.childrenMaterial">
                        <add-material
                            ref="AddMaterialRef"
                            @success="fetchData"
                            :id="po.id"
                            :material="v">
                            <div class="add-materials">
                                <icon-plus/>
                                <div>添加</div>
                            </div>
                        </add-material>
                        <view-material
                            @edit="editMaterial(rowIndex)"
                            :material="v"
                            :id="po.id">
                            <x-image-small-list
                                :preview="false"
                                v-if="v.material_arr.length>0"
                                :list="v.material_arr">
                            </x-image-small-list>
                        </view-material>
                    </div>
                </div>
            </template>
            <template v-slot:pl="{record}">
                <div class="flex flex-col gap-[12px]">
                    <div v-for="(v, index) in record.childrenMaterial" :key="index" class="flex gap-[12px]">
                        <add-comment
                            @success="fetchData"
                            :material="record"
                            :item="v">
                            <div class="add-materials">
                                <icon-plus/>
                                <div>添加</div>
                            </div>
                        </add-comment>
                        <comment @success="fetchData" :data="v.comment"></comment>
                    </div>
                </div>
            </template>
        </a-table>
    </a-card>
</template>

<style scoped lang="scss">
.add-materials {
    @apply size-[40px] bg-[#F2F3F5] text-[#4E5969] duration-500 flex flex-col justify-center items-center cursor-pointer;
    border: 1px dashed rgb(229, 230, 235);

    &:hover {
        @apply text-[#86909C] bg-[#F2F3F5];
        border: 1px dashed rgb(229, 230, 235);
    }
}
</style>
