<script setup>
import XSelect from "../../../components/XSelect/index.vue";
import {reactive, ref} from "vue";
import UploadAvatar from "../../../components/upload/UploadAvatar.vue";
import Api from "../../../api/index.js";
import {Message} from "@arco-design/web-vue";
import {useSystemStore} from "../../../pinia/SystemStore/index.js";

const SystemStore = useSystemStore();
const emits = defineEmits(['success']);
const {item, material} = defineProps({
    item: {
        type: Object,
        default: null,
    },
    material: {
        type: Object,
        default: null,
    }
});
const form = reactive({
    is_reply: 0,
    pid: null,
    files: [],
    intro: null,
});
const visible = ref(false);
const success = async () => {
    const api = SystemStore.isRoot ? Api.admin.addChildrenComment : Api.merchant.addChildrenComment;
    const {msg} = await api({
        id: material.id,
        material_id: item.id,
        pid: form.pid,
        image: form.files,
        intro: form.intro,
        is_reply: form.is_reply,
    });
    Message.success(msg);
    Object.keys(form).forEach(key => form[key] = null);
    form.files = [];
    form.is_reply = 0;
    visible.value = false;
    emits('success');
}
</script>

<template>
    <a-button v-if="!$slots.default" type="primary" @click="visible=true">
        添加评论
    </a-button>
    <div @click="visible=true" v-else>
        <slot></slot>
    </div>

    <a-modal
        title-align="start"
        title="添加评论"
        v-model:visible="visible"
        @ok="success">
        <a-form layout="vertical">
            <a-form-item label="是否回复之前评论" v-if="item.comment.length !== 0">
                <a-radio-group v-model:model-value="form.is_reply" @change="form.pid=null">
                    <a-radio :value="0">否</a-radio>
                    <a-radio :value="1">是</a-radio>
                </a-radio-group>
            </a-form-item>
            <a-form-item label="需要回复的评论" v-if="item.comment.length !== 0">
                <x-select
                    :disabled="form.is_reply===0"
                    v-model:model-value="form.pid"
                    :apiPo="item.id"
                    :api="SystemStore.isRoot ? Api.admin.getChildrenComment : Api.merchant.getChildrenComment">
                </x-select>
            </a-form-item>
            <a-form-item label="添加图片">
                <UploadAvatar
                    :multiple="false"
                    v-model:files="form.files"
                    :api="SystemStore.isRoot ? Api.system.uploadFile : Api.system.uploadFile2">
                </UploadAvatar>
            </a-form-item>
            <a-form-item label="添加文字">
                <a-textarea v-model:model-value="form.intro" placeholder="请输入评论内容"></a-textarea>
            </a-form-item>
        </a-form>
    </a-modal>
</template>

<style scoped lang="scss">

</style>
