<script setup>
import Comment from "../../../../components/Comment/index.vue";
import {computed, 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 Talk from "../../../../components/Talk/index.vue";
import {Message} from "@arco-design/web-vue";

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

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

const updateTable = async () => {
    const {data} = await Api.merchant.getTaskChildrenList(po);
    vo.rows.forEach((v, v_index) => {
        v.childrenMaterial.forEach((k, k_index) => {
            k.comment = data.list[v_index].childrenMaterial[k_index].comment;
        });
    });
}

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.filter(v => v.status !== 1).map(v => v.childrenMaterial.map(k => ({
            id: k.id,
            title: k.title,
            material: k.material,
            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
                        :disabled="record.status !== 0 && record.status !== 2"
                        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
                        :disabled="record.status !== 0 && record.status !== 2"
                        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]">
                    <div class="flex gap-[12px]" v-for="v in record.childrenMaterial">
                        <Talk v-model:model-value="v.tags"
                              :disabled="record.status !== 0 && record.status !== 2"></Talk>
                    </div>
                </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
                            v-if="record.status === 0 || record.status === 2"
                            ref="AddMaterialRef"
                            @success="val => v.material = val"
                            :id="po.id"
                            :material="v">
                            <div class="add-materials">
                                <icon-plus/>
                                <div>添加</div>
                            </div>
                        </add-material>
                        <view-material
                            :disabled="record.status !== 0 && record.status !== 2"
                            @edit="editMaterial(rowIndex)"
                            :material="v"
                            :id="po.id">
                            <x-image-small-list
                                :preview="false"
                                v-if="v.material.length>0"
                                :list="v.material">
                            </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
                            v-if="record.status === 0 || record.status === 2"
                            @success="updateTable"
                            :material="record"
                            :item="v">
                            <div class="add-materials">
                                <icon-plus/>
                                <div>添加</div>
                            </div>
                        </add-comment>
                        <comment
                            :hide-delete="record.status !== 0 && record.status !== 2"
                            @success="updateTable"
                            :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>
