<script setup>
import {computed} from "vue";
import Api from "../../api/index.js";
import {Message} from "@arco-design/web-vue";
import {useSystemStore} from "../../pinia/SystemStore/index.js";
import XImage from "../XImage/Index.vue";

const emits = defineEmits(['success']);
const SystemStore = useSystemStore();
const {data, hideDelete} = defineProps({
    data: {
        type: Object,
        default: {}
    },
    hideDelete: {
        type: Boolean,
        default: false,
    }
});
const list = computed(() => data?.flatMap(v => v.children ? [v, ...v.children] : [v]));
const del = async (id) => {
    const api = SystemStore.isRoot ? Api.admin.delChildrenComment : Api.merchant.delChildrenComment;
    const {msg} = await api(id);
    Message.success(msg);
    emits('success');
}
</script>

<template>
    <div v-for="(item, index) in list" :key="item.id" class="flex items-center">
        <div class="mr-[5px] min-w-[15px]">{{ index + 1 }}.</div>
        <div class="box">
            <div class="flex items-center whitespace-nowrap" v-if="item.pid>0">
                <img class="size-[9px] mr-[5px]" src="../../assets/images/back.png" alt=""/>
                回复{{ list.findIndex(k => k.pid === item.pid) }}:
            </div>
            <x-image v-if="item.image" :src="item.image" width="32px" height="32px" hideDelete></x-image>
            <div class="whitespace-nowrap ellipsis w-[370px]">{{ item.intro }}</div>
        </div>
        <a-popconfirm content="确认删除吗?" @ok="del(item.id)" v-if="!hideDelete">
            <a-button size="mini" shape="circle" type="text">
                <icon-delete/>
            </a-button>
        </a-popconfirm>
    </div>
</template>

<style scoped lang="scss">
.box {
    @apply p-[4px] bg-[#F2F3F5] flex items-center gap-[10px] pr-[15px] mr-[10px] min-h-[40px] flex-grow;
}
</style>
