<script setup>
import XImage from "../../../../../components/XImage/Index.vue";
import {reactive, ref, watch} from 'vue';
import Api from "../../../../../api/index.ts";
import {Message} from "@arco-design/web-vue";
import Comment from "../../../../../components/Comment/index.vue";
import AddMaterial from "../../../components/AddMaterial.vue";
import AddComment from "../../../components/AddComment.vue";
import Talk from "../../../../../components/Talk/index.vue";

const emits = defineEmits(['success']);
const {task} = defineProps({
    task: {
        type: Object,
        default: {},
    }
});
const visible = ref(false);
const detail = reactive([]);
const activeKey = ref(0);

const getData = async (update) => {
    Api.merchant.getTaskChildrenInfo(task.id).then(({data}) => {
        if (update) {
            detail.forEach((v, index) => {
                v.comment = data[index].comment;
            });
        } else {
            detail.length = 0;
            detail.push(...data.map(v => ({
                ...v,
                tags: v.tags_arr
            })));
        }
    });
}

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

const passTaskChildren = async () => {
    const {code, msg} = await Api.admin.passTaskChildren(task.id);
    if (code === 1) Message.success(msg);
    visible.value = false;
    emits('success');
}

const refuseTaskChildren = async () => {
    const {code, msg} = await Api.admin.refuseTaskChildren(task.id);
    if (code === 1) Message.success(msg);
    visible.value = false;
    emits('success');
}

const update = async () => {
    const {msg} = await Api.merchant.editChildrenMaterimal({
        id: task.task_id,
        data: detail,
    });
    Message.success(msg);
    visible.value = false;
    emits('success');
}
</script>

<template>
    <a-link v-if="!$slots.default" :hoverable="false" @click="visible=true">预览</a-link>
    <div v-else @click="visible=true">
        <slot></slot>
    </div>

    <a-modal
        title-align="start"
        title="预览"
        v-model:visible="visible">
        <a-tabs v-model:active-key="activeKey" type="rounded" v-if="detail && detail.length > 0">
            <a-tab-pane v-for="(item, index) in detail" :title="`素材${index+1}`" :key="index">
                <a-form
                    layout="vertical">
                    <a-form-item label="子任务状态">
                        <a-tag v-if="task.status === 0" color="red">待上传素材</a-tag>
                        <a-tag v-if="task.status === 1" color="orangered">素材审核中</a-tag>
                        <a-tag v-if="task.status === 2" color="orangered">重新上传素材</a-tag>
                        <a-tag v-if="task.status === 3" color="gray">待领取</a-tag>
                        <a-tag v-if="task.status === 4" color="green">已领取</a-tag>
                        <a-tag v-if="task.status === 5" color="green">已结算</a-tag>
                        <a-tag v-if="task.status === 6" color="arcoblue">已终止</a-tag>
                    </a-form-item>
                    <a-form-item label="标题" v-if="item.material_type.title_limit>0">
                        <a-input
                            v-model:model-value="item.title"
                            :max-length="item.material_type.title_limit"
                            allow-clear
                            show-word-limit>
                        </a-input>
                    </a-form-item>
                    <a-form-item label="正文" v-if="item.material_type.desc_limit>0">
                        <a-textarea
                            :max-length="item.material_type.desc_limit"
                            show-word-limit
                            v-model:model-value="item.content">
                        </a-textarea>
                    </a-form-item>
                    <a-form-item label="话题" v-if="item.material_type.tags_limit>0">
                        <Talk v-model:model-value="item.tags" :limit="item.material_type.tags_limit"></Talk>
                    </a-form-item>

                    <a-form-item label="素材">
                        <div class="flex flex-wrap gap-[16px]">
                            <x-image
                                v-for="(v, index) in item.material"
                                @delete="item.material.splice(index, 1)"
                                :key="index"
                                width="60px"
                                height="60px"
                                :src="v">
                            </x-image>
                            <add-material
                                :hiddenMaterial="true"
                                @success="val => item.material = val"
                                ref="AddMaterialRef"
                                :id="task.task_id"
                                :material="item">
                                <div
                                    class="size-[60px] bg-[#F2F3F5] flex justify-center items-center flex-col rounded-[8px] cursor-pointer">
                                    <icon-plus/>
                                    <div>添加</div>
                                </div>
                            </add-material>
                        </div>
                    </a-form-item>

                    <a-form-item label="评论区内容" v-if="task.is_comment === 1">
                        <div class="flex-grow">
                            <div v-if="item.comment.length > 0" class="flex flex-col gap-[8px] w-full mb-[12px]">
                                <comment :data="item.comment" @success="getData(true)"></comment>
                            </div>
                            <add-comment
                                @success="getData(true)"
                                :material="task"
                                :item="item">
                                <a-button>
                                    <icon-plus/>
                                    <div>添加评论</div>
                                </a-button>
                            </add-comment>
                        </div>
                    </a-form-item>
                </a-form>
            </a-tab-pane>
        </a-tabs>

        <template #footer>
            <div class="flex items-center gap-[8px]">
                <template v-if="detail.check_status === 0">
                    <a-button @click="passTaskChildren" type="primary" class="ml-auto">通过
                    </a-button>
                    <a-button @click="refuseTaskChildren">拒绝</a-button>
                </template>
                <template v-else>
                    <a-button @click="visible=false" class="ml-auto">关闭</a-button>
                    <a-button
                        :disabled="task.status !== 0 && task.status !== 2"
                        @click="update"
                        class="ml-[8px]"
                        type="primary">
                        确认修改
                    </a-button>
                </template>
            </div>
        </template>
    </a-modal>
</template>

<style lang="scss" scoped>
#tag-list {
    :deep(.arco-tag) {
        color: #000;
        background-color: #fff;
        border: 1px solid rgb(229, 230, 235);
        box-sizing: border-box;
    }
}
</style>
