<script setup>
import { ref } from 'vue';
import { ElMessage, ElDatePicker } from 'element-plus';

// 自动备份开关
const autoBackupEnabled = ref(true);

// 备份时间点
const backupTime = ref('');

// 开启/关闭自动备份
function toggleAutoBackup() {
  if (autoBackupEnabled.value) {
    ElMessage.success('自动备份已开启');
  } else {
    ElMessage.warning('自动备份已关闭');
  }
}

// 设置备份时间点
function setBackupTime(time) {
  backupTime.value = time;
  ElMessage.success(`备份时间设置为 ${time}`);
}
</script>

<template>
  <div>
    <!-- 自动备份开关 -->
    <el-switch
        v-model="autoBackupEnabled"
        active-text="开启"
        inactive-text="关闭"
        @input="toggleAutoBackup"
    ></el-switch>

    <!-- 备份时间点 -->
    <el-form label-position="top" style="margin-top: 20px;">
      <el-form-item label="备份时间点">
        <el-date-picker
            v-model="backupTime"
            type="time"
            placeholder="选择时间"
            value-format="HH:mm"
            @change="setBackupTime"
        ></el-date-picker>
      </el-form-item>
    </el-form>
  </div>
</template>


<style scoped lang="scss">

</style>