<template>
    <el-dialog
        v-model="visible"
        title="检测上新"
        width="600px"
        :close-on-click-modal="false"
        @closed="handleClosed"
    >
        <div class="check-new-container">
            <div class="check-period">
                <el-radio-group
                    v-model="selectedPeriod"
                    @change="handlePeriodChange"
                >
                    <el-radio :value="7">近7日</el-radio>
                    <el-radio :value="15">近15日</el-radio>
                    <el-radio :value="30">近30日</el-radio>
                </el-radio-group>
            </div>

            <div class="time-range">
                <el-date-picker
                    v-model="timeRange"
                    type="datetimerange"
                    range-separator="到"
                    start-placeholder="建单时间（开始时间）"
                    end-placeholder="建单时间（结束时间）"
                    format="YYYY-MM-DD HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss"
                />
            </div>

            <div class="dialog-footer">
                <el-button @click="visible = false">关闭</el-button>
                <el-button type="primary" @click="handleConfirm"
                    >确定</el-button
                >
            </div>
        </div>
    </el-dialog>
</template>

<script setup>
    import { ref, watch } from 'vue';
    import { ElMessage } from 'element-plus';
    import request from '@/utils/request';
    import dayjs from 'dayjs';

    const visible = ref(false);
    const selectedPeriod = ref(7);
    const timeRange = ref(null);
    const emit = defineEmits(['refresh']);
    const handleOpen = () => {
        visible.value = true;
        handlePeriodChange(7);
    };

    const handlePeriodChange = (period) => {
        const end = dayjs();
        const start = dayjs().subtract(period, 'day');
        timeRange.value = [
            start.format('YYYY-MM-DD HH:mm:ss'),
            end.format('YYYY-MM-DD HH:mm:ss')
        ];
    };

    const handleConfirm = async () => {
        if (!timeRange.value || !timeRange.value[0] || !timeRange.value[1]) {
            ElMessage.warning('请选择时间范围');
            return;
        }

        const params = {
            startTime: timeRange.value[0],
            endTime: timeRange.value[1]
        };

        request
            .get(
                '/book/stock/syncbookInfo?startTime=' +
                    params.startTime +
                    '&endTime=' +
                    params.endTime
            )
            .then((res) => {
                if (res.data.code === 200) {
                    ElMessage.success(res.data.msg + ',' + res.data.data);
                    visible.value = false;
                    emit('refresh');
                } else {
                    ElMessage.error(res.data.msg);
                }
            });
    };

    const handleClosed = () => {
        timeRange.value = null;
        selectedPeriod.value = 7;
    };

    defineExpose({
        handleOpen
    });
</script>

<style scoped>
    .check-new-container {
        padding: 20px;
    }

    .check-period {
        margin-bottom: 20px;
    }

    .time-range {
        margin-bottom: 20px;
    }

    .dialog-footer {
        text-align: right;
        margin-top: 20px;
    }

    :deep(.el-date-picker) {
        width: 100%;
    }
</style>
