<script setup>
import {defineEmits, reactive, ref} from "vue";
import XModal from "../../../components/XModal.vue";
import rback from "../../../static/icons/rout-back.png";
import XButton from "../../../components/XButton.vue";
import {showToast, uploadFile} from "../../../utils/uils.js";
import Api from "../../../api/index.js";
import {debounce} from "lodash";
import useUploadLength from "../../../hooks/useUploadLength.js";
import XImage from "../../../components/XImage.vue";

const emits = defineEmits(['success']);
const {data, backId, intervention, pattern, logId} = defineProps({
    data: {
        type: Object,
        default: {},
    },
    backId: {
        type: Number,
        default: null,
    },
    logId: {
        type: Number,
        default: null,
    },
    pattern: {
        type: Number,
        default: null,
    },
    intervention: {
        type: Boolean,
        default: false,
    }
});
const show = ref(false);
const form = reactive({
    id: data.children.id,
    content: null,
    images: [],
});

const upload = async () => {
    const res = await uploadFile({
        count: 5,
    });
    const data = res.map(v => v.data);
    form.images.push(...data);
}

useUploadLength({
    array: form.images,
    length: 5,
})

const success = debounce(async () => {
    const api = intervention ? Api.system.interventionV2 : Api.system.addExchangeLog;
    const {msg} = await api({...form, backfill_id: backId, pattern: pattern, log_id: logId});
    showToast(msg);
    form.images.length = 0;
    form.content = null;
    form.pattern = 0;
    show.value = false;
    emits('success');
}, 1000);
</script>

<template>
    <x-button v-if="!$slots.default" class="flex-grow !flex gap-[16rpx]" @click="show=true">
        <image :src="rback" class="!w-[22rpx]" mode="widthFix"></image>
        回复
    </x-button>
    <view v-else @click="show=true">
        <slot></slot>
    </view>

    <x-modal
        v-model:show="show">
        <view class="w-full px-[32rpx] py-[40rpx] !flex flex-col items-start">
            <view @click="upload" class="bg-[#E8F3FF] text-[var(--primary-color)] px-[32rpx] py-[8rpx] rounded-[4rpx]">
                <tui-icon name="plus" color="var(--primary-color)" :size="18"></tui-icon>
                添加图片
            </view>

            <view class="!flex gap-[20rpx] flex-wrap !mt-[20rpx]">
                <view class="!size-[100rpx] relative" v-for="(v, index) in form.images">
                    <x-image
                        :cur="index"
                        :style="{
                            width: '100rpx',
                            height: '100rpx',
                        }"
                        :src="v"
                        :list="form.images">
                    </x-image>
                    <view
                        @click="form.images.splice(index, 1)"
                        class="!size-[48rpx] bg-[#1D2129] rounded-[50%] absolute right-0 top-0 !flex justify-center items-center">
                        <tui-icon name="plus" color="#ffffff" :size="18" style="transform: rotate(45deg)"></tui-icon>
                    </view>
                </view>

                <!--                <view class="!size-[100rpx] image-box relative" v-for="(v, index) in form.images">-->
                <!--                    <image :src="v" class="!size-full" mode="aspectFit"></image>-->

                <!--                    <view-->
                <!--                        @click="form.images.splice(index, 1)"-->
                <!--                        class="!size-[48rpx] bg-[#1D2129] rounded-[50%] absolute right-0 top-0 !flex justify-center items-center">-->
                <!--                        <tui-icon name="plus" color="#ffffff" :size="18" style="transform: rotate(45deg)"></tui-icon>-->
                <!--                    </view>-->
                <!--                </view>-->
            </view>

            <view class="!mt-[20rpx] bg-[#F2F3F5] rounded-[4rpx] py-[16rpx] px-[30rpx] w-full">
                <textarea
                    v-model="form.content"
                    class="!w-full"
                    :placeholder="intervention ? '请输入申诉内容' : '请输入内容'">
                </textarea>
            </view>

            <view class="text-[#86909C] test-24r !mt-[20rpx]">提示：请确认内容无误后提交，提交虚假回复会封号</view>

            <view class="w-full h-[1px] bg-[rgba(136,144,155,.3)] !mt-[40rpx] !mb-[12rpx]"></view>

            <tui-button height="80rpx" @click="success">提交</tui-button>
        </view>
    </x-modal>
</template>

<style scoped lang="scss">
.image-box {
    border: 1px solid rgb(229, 230, 235);
    border-radius: 2px;
}
</style>
