<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";
import dayjs from "dayjs";

const {taskId} = defineProps({
    taskId: {
        type: Number,
        default: 0
    }
});
const taskDetail = reactive({});
const Suggestion = reactive([]);
const form = reactive({
    is_suggestion: 1,
    suggestion_id: 0,
    other_suggestion: null,
    is_backfill: 1,
    back_time: null,
    other_images: [],
    back_content: null,
});
const formRef = useTemplateRef('formRef');
const rules = reactive({
    is_backfill: {
        required: true,
        message: '其他原因截图不完整',
        validator: (value, callback) => {
            if (!form.back_time) {
                callback('时间不能为空');
                return;
            }
            if (value === 0 && !form.back_content) {
                callback('回复内容不能为空');
            }
        }
    }
});

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.getSuggestion().then(({data}) => {
        Suggestion.length = 0;
        Suggestion.push(...data);
    });
    Api.merchant.getTaskInfo(taskId).then(({data}) => {
        Object.assign(taskDetail, data);
        console.log(taskDetail);
    });
})

function range(start, end) {
    const result = [];
    for (let i = start; i < end; i++) {
        result.push(i);
    }
    return result;
}

let selectDateTime = null;

const getDisabledTime = (date, type) => {
    if (dayjs(selectDateTime).date() === dayjs(taskDetail.start_time).date()) {
        return {
            disabledHours: () => type === 'start' ? range(0, dayjs(taskDetail.start_time).hour()) : range(0, 0),
            disabledMinutes: () => type === 'start' ? range(0, dayjs(taskDetail.start_time).add(1, 'minute').minute()) : range(0, 0),
        }
    } else {
        return {
            disabledHours: () => range(0, 0),
            disabledMinutes: () => range(0, 0),
        }
    }

}

const selectPicker = (value) => {
    selectDateTime = value[0];
}

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

<template>
    <a-form layout="vertical" ref="formRef" :model="form" :rules="rules">
        <a-form-item label="是否提供修改建议">
            <a-radio-group v-model:model-value="form.is_suggestion">
                <a-radio :value="1">是</a-radio>
                <a-radio :value="0">否（拒绝达人本次回填，也无需达人进行后续的回填）</a-radio>
            </a-radio-group>
        </a-form-item>

        <template v-if="form.is_suggestion===1">
            <a-form-item label="修改建议">
                <div class="w-full">
                    <a-radio-group v-model:model-value="form.suggestion_id" direction="vertical">
                        <a-radio v-for="v in Suggestion" :value="v.id">{{ v.name }}</a-radio>
                        <a-radio :value="0">其他</a-radio>
                    </a-radio-group>

                    <div v-if="form.suggestion_id === 0">
                        <a-textarea
                            show-word-limit
                            :max-length="300"
                            :auto-size="{minRows: 3}"
                            v-model:model-value="form.other_suggestion"
                            placeholder="在此输入拒绝的原因，方便达人理解">
                        </a-textarea>
                        <div class="flex gap-[12px]">
                            <x-image
                                class="flex-shrink-0"
                                v-for="(v, index) in form.other_images"
                                @delete="form.other_images.splice(index, 1)"
                                :key="index"
                                width="60px"
                                height="60px"
                                :src="v">
                            </x-image>
                            <upload-button @success="v=>form.other_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>
                    </div>
                </div>
            </a-form-item>

            <a-form-item label="*是否要求达人重新回填当前《回填数据1》" field="is_backfill">
                <a-radio-group v-model:model-value="form.is_backfill">
                    <a-radio :value="1">
                        是&nbsp;&nbsp;&nbsp;请最晚于
                        <a-date-picker
                            @select="selectPicker"
                            :disabledDate="(current) => dayjs(current).isBefore(dayjs(taskDetail.start_time))"
                            :disabledTime="getDisabledTime"
                            v-if="form.is_backfill===1"
                            v-model="form.back_time"
                            format="YYYY-MM-DD HH:mm:ss"
                            show-time>
                        </a-date-picker>
                        <a-date-picker
                            v-else
                            format="YYYY-MM-DD HH:mm:ss"
                            show-time>
                        </a-date-picker>
                        之前，完成重新回填
                    </a-radio>
                    <div class="info ml-[30px] mb-[15px]">如果给达人提供的修改建议导致回填数据有变动，请点击此项</div>
                    <a-radio :value="0">
                        <div class="flex whitespace-nowrap items-center gap-[4px]">
                            否&nbsp;&nbsp;&nbsp;请最晚于
                            <a-date-picker
                                @select="selectPicker"
                                :disabledDate="(current) => dayjs(current).isBefore(dayjs(taskDetail.start_time))"
                                :disabledTime="getDisabledTime"
                                v-if="form.is_backfill===0"
                                v-model="form.back_time"
                                format="YYYY-MM-DD HH:mm:ss"
                                show-time>
                            </a-date-picker>
                            <a-date-picker
                                v-else
                                format="YYYY-MM-DD HH:mm:ss"
                                show-time>
                            </a-date-picker>
                            之前，在我的回填中回复
                            <a-input v-model:model-value="form.back_content" class="w-auto"
                                     placeholder="请输入"></a-input>
                        </div>
                    </a-radio>
                </a-radio-group>
            </a-form-item>
        </template>
    </a-form>
</template>

<style lang="scss" scoped>
.info {
    color: rgb(134, 144, 156);
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0;
    text-align: left;
}
</style>
