<script setup>
import {onMounted, reactive, useTemplateRef} from 'vue';
import Api from "../../../../../api/index.js";
import XImage from "../../../../../components/XImage/Index.vue";
import UploadButton from "../../../../../components/upload/UploadButton.vue";
import {Message} from "@arco-design/web-vue";

const {taskId} = defineProps({
    taskId: {
        type: Number,
        default: null,
    }
});
const form = reactive({
    common_refund_ids: [],
    diy_refund_ids: [],
    refund_images: [],
    other_refund: null,
});
const emits = defineEmits(['success']);
const formRef = useTemplateRef('formRef');
const rules = reactive({
    refund_images: [{
        required: true,
        message: '拒绝原因截图不完整',
        validator: (value, callback) => {
            if (value.length === 0) {
                callback('拒绝原因截图');
            }
        }
    }],
});
const CommonRefund = reactive([]);
const DiyRefund = reactive([]);

const success = async () => {
    const res = await formRef.value.validate();
    if (res) {
        const firstKey = Object.keys(res)[0];
        Message.warning(res[firstKey].message);
        throw new Error(res[firstKey].message);
    } else {
        return form;
    }
}

onMounted(() => {
    Api.merchant.getCommonRefund().then(({data}) => {
        CommonRefund.length = 0;
        CommonRefund.push(...data);
    });
    Api.merchant.getDiyRefund({
        id: taskId
    }).then(({data}) => {
        DiyRefund.length = 0;
        DiyRefund.push(...data);
    });
});

defineExpose({
    success,
});
</script>

<template>
    <a-form layout="vertical" ref="formRef" :model="form" :rules="rules">
        <a-form-item label="常见拒绝原因">
            <a-checkbox-group v-model:model-value="form.common_refund_ids">
                <div class="grid grid-cols-3 gap-[10px]">
                    <a-checkbox v-for="v in CommonRefund" :value="v.id">{{ v.name }}</a-checkbox>
                </div>
            </a-checkbox-group>
        </a-form-item>

        <a-form-item label="自定义拒绝原因">
            <a-checkbox-group v-model:model-value="form.diy_refund_ids">
                <a-checkbox v-for="v in DiyRefund" :value="v.id">{{ v.name }}</a-checkbox>
            </a-checkbox-group>
        </a-form-item>

        <a-form-item label="其他原因">
            <a-textarea
                show-word-limit
                :max-length="300"
                :auto-size="{minRows: 3}"
                v-model:model-value="form.other_refund"
                placeholder="在此输入拒绝的原因，方便达人理解">
            </a-textarea>
        </a-form-item>

        <a-form-item label="拒绝原因截图" field="refund_images">
            <div class="flex gap-[12px]">
                <x-image
                    class="flex-shrink-0"
                    v-for="(v, index) in form.refund_images"
                    @delete="form.refund_images.splice(index, 1)"
                    :key="index"
                    width="60px"
                    height="60px"
                    :src="v">
                </x-image>
                <upload-button @success="v=>form.refund_images.push(v)" :api="Api.system.uploadFile2">
                    <template v-slot:upload-button>
                        <div
                            style="border: 1px dashed rgb(229, 230, 235)"
                            class="size-[60px] bg-[#F2F3F5] flex justify-center items-center flex-col rounded-[4px] cursor-pointer">
                            <icon-plus/>
                            <div>添加</div>
                        </div>
                    </template>
                </upload-button>
            </div>
        </a-form-item>
    </a-form>
</template>

<style scoped>

</style>
