<script setup>
import Api from "../../../../../api/index.js";
import XSelect from "../../../../../components/XSelect/index.vue";
import XTimePicker from "../../../../../components/XTimePicker/XTimePicker.vue";
import {dayjs} from "@arco-design/web-vue/es/_utils/date.js";
import FastSetting from "../../../components/FastSetting.vue";
import {useTemplateRef} from "vue";
import {Message} from "@arco-design/web-vue";

const {form, index} = defineProps({
    form: {
        type: Object,
        default: {}
    },
    index: {
        type: Number,
        default: null
    }
});
const formRef = useTemplateRef('formRef');
const po = defineModel('po');
const rules = {
    start_time: [{
        required: true,
        message: '回填时间不完整',
    }],
    end_time: [{
        required: true,
        message: '回填时间不完整',
    }],
    content_id: [{
        required: true,
        message: '回填内容不能为空',
    }]
}

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(form.start_time).date()) {
        return {
            disabledHours: () => type === 'start' ? range(0, dayjs(form.start_time).hour()) : range(0, 0),
            disabledMinutes: () => type === 'start' ? range(0, dayjs(form.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];
}

const validate = 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);
    }
}

defineExpose({
    validate
});
</script>

<template>
    <div id="block">
        <a-form
            ref="formRef"
            :model="po"
            :rules="rules"
            :auto-label-width="true">
            <a-form-item label="回填时间" field="end_time">
                <x-time-picker
                    @select="selectPicker"
                    :disabledDate="(current) => dayjs(current).add(1, 'day').isBefore(dayjs(form.start_time))"
                    :disabledTime="getDisabledTime"
                    v-model:start="po.start_time"
                    v-model:end="po.end_time">
                </x-time-picker>
                <div class="ml-[6px]">之间</div>
                <FastSetting :start-time="form.start_time" :end-time="form.end_time" @success="(val) => {
                    po.start_time = val.startTime;
                    po.end_time = val.endTime;
                }">
                    <a-button type="primary" class="ml-[38px]">一键快速设置</a-button>
                </FastSetting>
            </a-form-item>

            <a-form-item label="回填内容" field="content_id">
                <XSelect
                    class="w-auto"
                    :init="true"
                    :disabled="index === 0 && form.is_comment === 1"
                    :api-po="{id: form.platform_id}"
                    v-model:model-value="po.content_id"
                    :api="Api.merchant.getChooseContent">
                </XSelect>
            </a-form-item>
        </a-form>
    </div>
</template>

<style lang="scss" scoped>
#block {
    box-sizing: border-box;
    border: 1px solid rgb(232, 232, 232);
    border-radius: 4px;
    background: rgb(250, 250, 250);
    padding: 20px;
}
</style>
