<template>
  <div class="font-700 text-blue-5 mb-20px text-30px">报警联动</div>
  <el-card class="w-400px">
    <div class="flex justify-between">
      <div>是否报警时顺便录像</div>
      <el-switch v-model="recordVideo" />
    </div>
    <div class="flex justify-between">
      <div>是否报警时顺便抓拍图片</div>
      <el-switch v-model="captureImage" />
    </div>
    <div class="flex justify-between">
      <div>是否报警时发短信提醒</div>
      <el-switch v-model="sendSMS" />
    </div>
    <div class="flex justify-between">
      <div class="flex-4">收短信的手机号</div>
      <div><el-input v-model="phoneNumber" size="small" /></div>
    </div>
    <div class="flex justify-end mt-30px">
      <el-button type="primary" @click="handleSave">确认保存</el-button>
    </div>
  </el-card>
  <div class="font-700 text-blue-5 mb-20px text-20px">智能空开联动</div>
  <el-card class="w-400px">
    <div class="flex justify-between">
      <div>是否报警时顺便关闭智能空开联动开关</div>
      <el-switch v-model="closeSmartBreaker" />
    </div>
    <div class="flex justify-end mt-30px">
      <el-button type="primary" @click="handleSave">确认保存</el-button>
    </div>
  </el-card>
</template>

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

// 定义响应式变量
const recordVideo = ref(true);
const captureImage = ref(true);
const sendSMS = ref(true);
const phoneNumber = ref('');
const closeSmartBreaker = ref(true);

// 处理保存操作
const handleSave = () => {
  ElMessage.success('保存成功');
};
</script>
