<template>
  <div class="automation-control">
    <el-form :model="formData" :rules="rules" ref="formRef" inline>
      <!-- 自动化控制排水系统开关 -->
      <el-card>
        <div class="control-header">
          <span>自动化控制排水系统</span>
          <el-switch
            v-model="formData.status"
            active-text="已开启"
            inactive-text="已关闭"
            active-value="1"
            inactive-value="0"
            @change="handleStatusChange"
          ></el-switch>
        </div>
      </el-card>
      <!-- 峰谷值时间段设置 -->
      <el-card v-if="formData.status === '1'">
        <div class="section">
          <h3>设置峰谷值时间段</h3>
          <el-row :gutter="20">
            <el-col
              :span="8"
              v-for="(group, index) in groupedTimeperiodList"
              :key="index"
            >
              <el-table :data="group" size="mini">
                <el-table-column label="时间段" width="120" align="center">
                  <template slot-scope="scope">
                    {{ scope.row.name }}
                  </template>
                </el-table-column>
                <el-table-column
                  label="选择峰谷平期"
                  width="400"
                  align="center"
                >
                  <template slot-scope="scope">
                    <el-radio-group
                      v-model="scope.row.peakValleyFlatTime"
                      size="mini"
                      v-removeAriaHidden
                    >
                      <el-radio :label="1">峰时段</el-radio>
                      <el-radio :label="2">谷时段</el-radio>
                      <el-radio :label="3">平时段</el-radio>
                    </el-radio-group>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </div>
        <el-divider></el-divider>
        <!-- 液体高度设置 -->
        <div class="section">
          <h3 style="margin-bottom: 20px">设置液体高度</h3>
          <el-row v-for="(item, index) in list" :key="'sumpName' + index">
            <el-col :span="3" class="flex-center" style="height: 40px">
              {{ item.sumpName }}水池液位高度(m):
            </el-col>
            <el-col :span="18">
              <el-form-item label="上限值">
                <el-input
                  v-model="item.heghtThresholdA"
                  placeholder="请输入水位高度"
                ></el-input>
              </el-form-item>
              <el-form-item label="平点值">
                <el-input
                  v-model="item.heghtThresholdB"
                  placeholder="请输入水位高度"
                ></el-input>
              </el-form-item>
              <el-form-item label="谷点值">
                <el-input
                  v-model="item.heghtThresholdC"
                  placeholder="请输入水位高度"
                ></el-input>
              </el-form-item>
              <el-form-item label="下限值">
                <el-input
                  v-model="item.heghtThresholdD"
                  placeholder="请输入水位高度"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <h3 style="margin-bottom: 20px">设置液位下降速率</h3>
          <el-row>
            <el-col :span="3" class="flex-center" style="height: 40px">
              设置水仓水位采集频率：
            </el-col>
            <el-col :span="18" class="flex-align">
              <el-form-item style="margin-bottom: 0">
                <el-input v-model="formData.waterLevelInterval"></el-input>
              </el-form-item>
              <span class="unit-text">分钟</span>
            </el-col>
          </el-row>
          <el-row v-for="(item, index) in list" :key="'sumpName1' + index">
            <el-col :span="3" class="flex-center" style="height: 40px">
              设置{{ item.sumpName }}水仓液位下降值：
            </el-col>
            <el-col :span="18" class="flex-align">
              <el-form-item style="margin-bottom: 0">
                <el-input
                  v-model="item.declineNum"
                  @input="handleInputChange($event, index)"
                ></el-input>
              </el-form-item>
              <span class="unit-text">CM</span>
            </el-col>
          </el-row>
        </div>
      </el-card>
      <el-card v-else> 自动化控制已关闭</el-card>
      <el-card>
        <!-- 按钮区域 -->
        <div class="button-group">
          <el-button @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="handleSave">保存设置</el-button>
        </div>
      </el-card>
    </el-form>

    <!-- 弹窗 -->
    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
      <div class="warter-lev">
        <div class="lev-pic"></div>
        <div class="lev-content">
          <p>①液位高度X>A时，不考虑是否在峰谷时间，自动开启水泵。</p>
          <p>如果未在峰谷期内液压高度X<=B时，关闭水泵。</p>
          <p>如果在峰谷期内液压高度X<=D时,关闭水泵。</p>
          <p>②A>=X（液压高度）X<=C时，等待峰谷期内，自动开启水泵。</p>
          <p>液压高度X<=D时，自动关闭水泵。</p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getStatusFre,
  getStatusIntervalTimeList,
  getStatusIntervalNumList,
  updateSysSet,
} from "@/api/tyler/sys";

export default {
  name: "AutomationControl",
  data() {
    return {
      open: false,
      formData: {
        status: "1", // 默认开启
        peakBeginTime: "",
        peakEndTime: "",
        draPeakSumpVos: [],
        waterLevelInterval: "",
      },
      rules: {},

      timeRange: [],
      title: "液位高度设置说明：",
      timeperiodList: [],
      list: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      //处理三个接口获取数据
      getStatusFre().then((res) => {
        if (res.code === 200) {
          this.formData.status = res.data.draStatus;
          this.formData.waterLevelInterval = res.data.waterLevelInterval;
        }
      });
      getStatusIntervalTimeList().then((res) => {
        if (res.code === 200) {
          this.timeperiodList = res.rows;
        }
      });
      getStatusIntervalNumList().then((res) => {
        if (res.code === 200) {
          this.list = res.rows.map((item) => ({
            ...item,
            // 确保包含所有需要的字段
            declineNum: item.declineNum || "", // 新增字段初始化
            heghtThresholdA: item.heghtThresholdA || "",
            heghtThresholdB: item.heghtThresholdB || "",
            heghtThresholdC: item.heghtThresholdC || "",
            heghtThresholdD: item.heghtThresholdD || "",
          }));
        }
      });
    },
    handleTimeRangeChange(value) {
      if (value && value.length === 2) {
        this.formData.peakBeginTime = value[0];
        this.formData.peakEndTime = value[1];
      }
    },
    handleSave() {
      const param = {
        status: this.formData.status,
        waterLevelInterval: this.formData.waterLevelInterval,
        draPeakTimeList: this.timeperiodList,
        draPeakNumList: this.list,
      };
      updateSysSet(param).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.getList();
        }
      });
    },
    setDis() {
      this.open = true;
    },
  },
  computed: {
    groupedTimeperiodList() {
      return [
        this.timeperiodList.slice(0, 8),
        this.timeperiodList.slice(8, 16),
        this.timeperiodList.slice(16, 24),
      ];
    },
  },
};
</script>

<style lang="scss" scoped>
.flex-center {
  display: flex;
  align-items: center;
}

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

.unit-text {
  margin-left: 10px;
  vertical-align: middle;
}
.pump-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}
.automation-control {
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.control-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  span {
    font-weight: bold;
  }
}

.section {
  margin-bottom: 20px;
}

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

.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-start;
  gap: 15px;
  margin-top: 20px;
}
.warter-lev {
  display: flex;
  justify-content: center;
  .lev-pic {
    width: 105px;
    height: 343px;
    background: url("~@/assets/images/sys/warterSysSet.png") no-repeat center;
    background-size: 100%;
  }
  .lev-content {
    height: 343px;
    display: flex;
    justify-content: center;
    // align-items: center;
    flex-direction: column;
    font-weight: bold;
  }
}
::v-deep .el-date-editor .el-range-separator {
  width: 30px;
}
</style>
