<script setup>
import {reactive, ref} from "vue";
import {Message} from "@arco-design/web-vue";
import dayjs from "dayjs";

const visible = ref(false);
const emits = defineEmits(['success']);
const {startTime, endTime} = defineProps({
    startTime: {
        type: String,
        default: null
    },
    endTime: {
        type: String,
        default: null
    },
});

const form = reactive({
    startTime: null,
    type: 0,
    diff: 30,
    endTime: null,
});

const setTime = () => {
    const unit = form.type === 0 ? 'minute' : 'hour';
    form.startTime = dayjs(startTime).add(form.diff, unit).format('YYYY-MM-DD HH:mm');
    form.endTime = dayjs(endTime).add((form.diff), unit).format('YYYY-MM-DD HH:mm');
}

const open = () => {
    if (startTime === null || endTime === null) {
        Message.warning('请先设置任务时间段');
        return;
    }
    visible.value = true;
    setTime();
}

const success = () => {
    emits('success', form);
}
</script>

<template>
    <div @click="open">
        <slot></slot>
    </div>

    <a-modal
        @ok="success"
        title="快速设置"
        title-align="start"
        v-model:visible="visible">
        <a-form layout="vertical">
            <a-form-item label="任务可接时间段">
                <a-input disabled
                         :model-value="`${dayjs(startTime).format('MMDD-HH:mm')} - ${dayjs(endTime).format('MMDD-HH:mm')}`"></a-input>
            </a-form-item>
            <a-form-item label="在任务可接时段的开始时间和结束时间，各自增加">
                <div class="flex w-full gap-3">
                    <a-input-number :precision="0" :min="0" v-model:model-value="form.diff"
                                    @change="setTime"></a-input-number>
                    <a-radio-group type="button" class="flex-shrink-0" v-model:model-value="form.type"
                                   @change="setTime">
                        <a-radio :value="0">分钟</a-radio>
                        <a-radio :value="1">小时</a-radio>
                    </a-radio-group>
                </div>
            </a-form-item>
            <a-form-item label="回填时间段为">
                <a-input
                    :model-value="`${dayjs(form.startTime).format('MMDD-HH:mm')} - ${dayjs(form.endTime).format('MMDD-HH:mm')}`"></a-input>
            </a-form-item>
        </a-form>
    </a-modal>
</template>

<style scoped lang="scss">

</style>
