<template>
  <div class="automation-control">
    <!-- 自动化控制排水系统开关 -->
    <div class="control-header">
      <span>自动化控制排水系统</span>
      <el-switch
        v-model="formData.status"
        active-text="已开启"
        inactive-text="已关闭"
        @change="handleStatusChange"
      ></el-switch>
    </div>

    <!-- 峰谷值时间段设置 -->
    <div class="section">
      <h3>设置峰谷值时间段</h3>
      <el-time-picker
        is-range
        v-model="timeRange"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        format="HH:mm:ss"
        value-format="HH:mm:ss"
        @change="handleTimeRangeChange"
      ></el-time-picker>
    </div>

    <!-- 液体高度设置 -->
    <div class="section">
      <h3>设置液体高度 <el-link type="primary" :underline="false">设置说明</el-link></h3>
      
      <!-- 每个水仓的设置 -->
      <div v-for="(sump, index) in formData.draPeakSumpVos" :key="sump.sumpId">
        <div class="sump-item">
          <div class="sump-header">
            <span>{{ sump.sumpName }}液位高度（m）：</span>
          </div>
          
          <div class="threshold-inputs">
            <div class="threshold-item">
              <span>A点值</span>
              <el-input v-model="sump.heghtThresholdA" placeholder="请输入A点值" size="small"></el-input>
            </div>
            <div class="threshold-item">
              <span>B点值</span>
              <el-input v-model="sump.heghtThresholdB" placeholder="请输入B点值" size="small"></el-input>
            </div>
            <div class="threshold-item">
              <span>C点值</span>
              <el-input v-model="sump.heghtThresholdC" placeholder="请输入C点值" size="small"></el-input>
            </div>
            <div class="threshold-item">
              <span>D点值</span>
              <el-input v-model="sump.heghtThresholdD" placeholder="请输入D点值" size="small"></el-input>
            </div>
          </div>
          
          <div class="pump-selection">
            <span>对应控制水泵：</span>
            <el-checkbox-group v-model="sump.selectedPumps">
              <el-checkbox
                v-for="pump in sump.draPeakPumpVos"
                :key="pump.pumpId"
                :label="pump.pumpName"
                size="small"
              >
                {{ pump.pumpName }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
        
        <el-divider v-if="index < formData.draPeakSumpVos.length - 1"></el-divider>
      </div>
    </div>

    <!-- 按钮区域 -->
    <div class="button-group">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleSave">保存设置</el-button>
    </div>
  </div>
</template>

<script>
import {peakGetDra,peakEditDra } from "@/api/tyler/sys";
export default {
  name: 'AutomationControl',
  data() {
    return {
      formData: {
        status: true, // 默认开启
        peakBeginTime: '12:00:00',
        peakEndTime: '14:00:00',
        draPeakSumpVos: [
          {
            sumpId: '2',
            sumpName: '二中水仓',
            heghtThresholdA: '10',
            heghtThresholdB: '20',
            heghtThresholdC: '40',
            heghtThresholdD: '80',
            draPeakPumpVos: [
              { pumpId: '8', pumpName: '水泵5' },
              { pumpId: '9', pumpName: '水泵6' },
              { pumpId: '10', pumpName: '水泵7' }
            ],
            selectedPumps: ['水泵5'] // 默认选中第一个
          },
          {
            sumpId: '2',
            sumpName: '二中水仓',
            heghtThresholdA: '10',
            heghtThresholdB: '20',
            heghtThresholdC: '40',
            heghtThresholdD: '80',
            draPeakPumpVos: [
              { pumpId: '3', pumpName: '水泵3' },
             
            ],
            selectedPumps: ['水泵3'] // 默认选中第一个
          },
          
        ]
      },
      timeRange: []
    };
  },
  created() {
    // 初始化时间范围
   
    // this.getList()
  },
  methods: {
    getList(){
      peakGetDra().then(res => {
        console.log(res,'res')
        this.formData = res.data
        this.timeRange = [
          this.formData.peakBeginTime,
          this.formData.peakEndTime
        ];
      })
    },
    handleStatusChange(value) {
      console.log('自动化控制状态已切换为:', value ? '开启' : '关闭');
      console.log(value)
      this.formData.status = value;
    },
    handleTimeRangeChange(value) {
      if (value && value.length === 2) {
        this.formData.peakBeginTime = value[0];
        this.formData.peakEndTime = value[1];
        console.log('峰谷值时间段已设置为:', this.formData.peakBeginTime, '至', this.formData.peakEndTime);
      }
    },
    handleCancel() {
      console.log('取消设置');
      // 这里可以添加重置表单的逻辑
    },
    handleSave() {
      peakEditDra(this.formData).then(res=>{
        this.$message.success('设置已保存');
        this.getList()
      })
      console.log('保存设置:', this.formData);
      // 这里可以添加保存设置的逻辑
      
    }
  }
};
</script>

<style scoped>
.automation-control {
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
}

.control-header {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 20px;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}

.section {
  margin-bottom: 20px;
}

.section h3 {
  font-size: 16px;
  margin-bottom: 15px;
  color: #333;
}

.sump-item {
  margin-bottom: 20px;
}

.sump-header {
  font-weight: bold;
  margin-bottom: 10px;
}

.threshold-inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 15px;
}

.threshold-item {
  display: flex;
  align-items: center;
}

.threshold-item span {
  width: 60px;
}

.pump-selection {
  display: flex;
  align-items: center;
  gap: 10px;
}

.button-group {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  margin-top: 20px;
}

::v-deep .el-date-editor .el-range-separator {
  width: 30px;
}
</style>