<template>
    <!-- 归档配置 -->
    <div class="app-container">
        <el-card class="section-card">
            <div class="section-header">
                <div class="section-title">
                    <i class="el-icon-notebook-2" /> 定期归档配置
                    <el-switch v-model="periodicEnabled" />
                </div>
            </div>

            <el-form label-width="80px" :inline="false" class="section-form">
                <el-form-item label="周期周期"> 
                    <el-select v-model="periodicCycle" placeholder="请选择">
                        <el-option label="每天" value="daily" />
                        <el-option label="每周" value="weekly" />
                        <el-option label="每月" value="monthly" />
                    </el-select>
                </el-form-item>

                <!-- 每天 -->
                <el-form-item v-if="periodicCycle==='daily'" label="">
                    <el-time-picker
                        v-model="dailyTime"
                        placeholder="选择时间"
                        format="HH:mm"
                        value-format="HH:mm"
                        :clearable="false"
                        />
                </el-form-item>

                <!-- 每周 -->
                <el-form-item v-if="periodicCycle==='weekly'" label="">
                    <el-time-picker
                        v-model="weeklyTime"
                        placeholder="选择时间"
                        format="HH:mm"
                        value-format="HH:mm"
                        :clearable="false"
                        style="margin-right: 10px;"
                        />
                    <el-select v-model="weeklyDay" style="width: 120px;">
                        <el-option label="星期一" value="1" />
                        <el-option label="星期二" value="2" />
                        <el-option label="星期三" value="3" />
                        <el-option label="星期四" value="4" />
                        <el-option label="星期五" value="5" />
                        <el-option label="星期六" value="6" />
                        <el-option label="星期日" value="7" />
                    </el-select>
                </el-form-item>

                <!-- 每月 -->
                <el-form-item v-if="periodicCycle==='monthly'" label="">
                    <el-date-picker
                        v-model="monthlyDateTime"
                        type="datetime"
                        placeholder="选择日期时间"
                        format="yyyy-MM-dd HH:mm"
                        value-format="yyyy-MM-dd HH:mm"
                        :clearable="false"
                    />
                </el-form-item>
            </el-form>
        </el-card>

        <el-card class="section-card">
            <div class="section-header">
                <div class="section-title">
                    <i class="el-icon-collection" /> 不定期归档配置
                    <el-switch v-model="nonPeriodicEnabled" />
                </div>
            </div>

            <div class="section-body">
                <el-date-picker
                    v-model="nonPeriodicDateTime"
                    type="datetime"
                    placeholder="选择日期时间"
                    format="yyyy-MM-dd HH:mm"
                    value-format="yyyy-MM-dd HH:mm"
                    :clearable="false"
                />
            </div>
        </el-card>

        <div class="actions">
            <el-button type="primary" icon="el-icon-check" @click="handleSave">保存</el-button>
        </div>
    </div>
    
</template>

<script>
export default {
    name: 'ArchiveSetting',
    data() {
        return {
            // 定期归档
            periodicEnabled: true,
            periodicCycle: 'daily', // daily | weekly | monthly
            dailyTime: '00:00',
            weeklyTime: '00:00',
            weeklyDay: '1',
            monthlyDateTime: '',
            // 不定期归档
            nonPeriodicEnabled: true,
            nonPeriodicDateTime: ''
        }
    },
    watch: {
        periodicCycle(newVal) {
            if (newVal === 'daily' && !this.dailyTime) this.dailyTime = '00:00'
            if (newVal === 'weekly') {
                if (!this.weeklyTime) this.weeklyTime = '00:00'
                if (!this.weeklyDay) this.weeklyDay = '1'
            }
            if (newVal === 'monthly' && !this.monthlyDateTime) {
                // 默认今天 00:00
                const now = new Date()
                now.setHours(0, 0, 0, 0)
                this.monthlyDateTime = this.formatDateTime(now)
            }
        }
    },
    methods: {
        formatDateTime(date) {
            const y = date.getFullYear()
            const m = String(date.getMonth() + 1).padStart(2, '0')
            const d = String(date.getDate()).padStart(2, '0')
            const hh = String(date.getHours()).padStart(2, '0')
            const mm = String(date.getMinutes()).padStart(2, '0')
            return `${y}-${m}-${d} ${hh}:${mm}`
        },
        handleSave() {
            // 这里只做前端演示，实际应调用后端接口保存
            const payload = {
                periodicEnabled: this.periodicEnabled,
                periodicCycle: this.periodicCycle,
                dailyTime: this.dailyTime,
                weeklyTime: this.weeklyTime,
                weeklyDay: this.weeklyDay,
                monthlyDateTime: this.monthlyDateTime,
                nonPeriodicEnabled: this.nonPeriodicEnabled,
                nonPeriodicDateTime: this.nonPeriodicDateTime
            }
            console.log('保存归档配置: ', payload)
            this.$message.success('保存成功')
        },
        
    }
}
</script>

<style scoped>
.section-card {
    margin-bottom: 16px;
}
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.section-title {
    font-weight: 600;
    color: #606266;
}
.section-title i {
    margin-right: 6px;
}
.section-title .el-switch {
    margin-left: 8px;
}
.section-form {
    padding-left: 8px;
}
.section-body {
    padding-left: 8px;
}
.actions {
    margin-top: 8px;
}
</style>