<template>
  <div class="app-container">
    <div class="btn-condition">
      <div class="condition-left" v-show="showSearch">
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
        >
          <el-select
            style="margin-right: 0.1rem"
            v-model="queryParams.floorId"
            placeholder="请选择"
            @change="handleSelectChange"
          >
            <el-option
              v-for="(item, index) in builds"
              :key="index"
              :label="item.label"
              :value="item.id"
            />
          </el-select>
          <el-form-item label="日期" prop="msgCode">
            <el-date-picker
              v-model="dayDate"
              type="daterange"
              range-separator="至"
              value-format="yyyy-MM-dd"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="dateChange"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
        <div class="primary-btn">
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
        </div>
        <div class="warning-btn">
          <el-button
            type="warning"
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            >导出</el-button
          >
        </div>
      </div>
    </div>
    <el-table :data="tableData" border style="width: 100%" v-loading="loading">
      <el-table-column prop="curDate" label="日期"> </el-table-column>
      <el-table-column prop="curTime" label="时间"> </el-table-column>
      <el-table-column prop="classes" label="班次"> </el-table-column>
      <el-table-column label="1号热泵">
        <el-table-column prop="tempSetHotPumpOne" label="设定温度℃">
        </el-table-column>
        <el-table-column prop="tempRealHotPumpOne" label="实际温度℃">
        </el-table-column>
        <el-table-column prop="statusSwitchHotPumpOne" label="设备开关机">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.statusSwitchHotPumpOne === 1" type="success"
              >开机</el-tag
            >
            <el-tag v-if="scope.row.statusSwitchHotPumpOne === 0" type="danger"
              >关机</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="statusRunHotPumpOne" label="设备运行状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.statusRunHotPumpOne === 1" type="success"
              >运行</el-tag
            >
            <el-tag v-if="scope.row.statusRunHotPumpOne === 0" type="danger"
              >不运行</el-tag
            >
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="2号热泵">
        <el-table-column prop="tempSetHotPumpTwo" label="设定温度℃">
        </el-table-column>
        <el-table-column prop="tempRealHotPumpTwo" label="实际温度℃">
        </el-table-column>
        <el-table-column prop="statusSwitchHotPumpTwo" label="设备开关机">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.statusSwitchHotPumpTwo === 1" type="success"
              >开机</el-tag
            >
            <el-tag v-if="scope.row.statusSwitchHotPumpTwo === 0" type="danger"
              >关机</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="statusRunHotPumpTwo" label="设备运行状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.statusRunHotPumpTwo === 1" type="success"
              >运行</el-tag
            >
            <el-tag v-if="scope.row.statusRunHotPumpTwo === 0" type="danger"
              >不运行</el-tag
            >
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="3号热泵" v-if="showMorePump">
        <el-table-column prop="tempSetHotPumpThree" label="设定温度℃">
        </el-table-column>
        <el-table-column prop="tempRealHotPumpThree" label="实际温度℃">
        </el-table-column>
        <el-table-column prop="statusSwitchHotPumpThree" label="设备开关机">
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.statusSwitchHotPumpThree === 1"
              type="success"
              >开机</el-tag
            >
            <el-tag
              v-if="scope.row.statusSwitchHotPumpThree === 0"
              type="danger"
              >关机</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="statusRunHotPumpThree" label="设备运行状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.statusRunHotPumpThree === 1" type="success"
              >运行</el-tag
            >
            <el-tag v-if="scope.row.statusRunHotPumpThree === 0" type="danger"
              >不运行</el-tag
            >
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="4号热泵" v-if="showMorePump">
        <el-table-column prop="tempSetHotPumpFour" label="设定温度℃">
        </el-table-column>
        <el-table-column prop="tempRealHotPumpFour" label="实际温度℃">
        </el-table-column>
        <el-table-column prop="statusSwitchHotPumpFour" label="设备开关机">
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.statusSwitchHotPumpFour === 1"
              type="success"
              >开机</el-tag
            >
            <el-tag v-if="scope.row.statusSwitchHotPumpFour === 0" type="danger"
              >关机</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="statusRunHotPumpFour" label="设备运行状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.statusRunHotPumpFour === 1" type="success"
              >运行</el-tag
            >
            <el-tag v-if="scope.row.statusRunHotPumpFour === 0" type="danger"
              >不运行</el-tag
            >
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column :label="tableColumnLabel1">
        <el-table-column prop="presSetSupplyPumpAreaOne" label="设定压力bar">
        </el-table-column>
        <el-table-column prop="presRealSupplyPumpAreaOne" label="实际压力bar">
        </el-table-column>
        <el-table-column prop="statusRunSupplyPumpOne" label="1号泵运行状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.statusRunSupplyPumpOne === 1" type="success"
              >运行</el-tag
            >
            <el-tag v-if="scope.row.statusRunSupplyPumpOne === 0" type="danger"
              >不运行</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="statusRunSupplyPumpTwo" label="2号泵运行状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.statusRunSupplyPumpTwo === 1" type="success"
              >运行</el-tag
            >
            <el-tag v-if="scope.row.statusRunSupplyPumpTwo === 0" type="danger"
              >不运行</el-tag
            >
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column :label="tableColumnLabel2">
        <el-table-column prop="presSetSupplyPumpAreaTwo" label="设定压力bar">
        </el-table-column>
        <el-table-column prop="presRealSupplyPumpAreaTwo" label="实际压力bar">
        </el-table-column>
        <el-table-column prop="statusRunSupplyPumpThree" label="1号泵运行状态">
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.statusRunSupplyPumpThree === 1"
              type="success"
              >运行</el-tag
            >
            <el-tag
              v-if="scope.row.statusRunSupplyPumpThree === 0"
              type="danger"
              >不运行</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="statusRunSupplyPumpFour" label="2号泵运行状态">
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.statusRunSupplyPumpFour === 1"
              type="success"
              >运行</el-tag
            >
            <el-tag v-if="scope.row.statusRunSupplyPumpFour === 0" type="danger"
              >不运行</el-tag
            >
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="水箱液位">
        <el-table-column prop="levelWaterTankOne" :label="tableColumnLabel3">
        </el-table-column>
        <el-table-column prop="levelWaterTankTwo" :label="tableColumnLabel4">
        </el-table-column>
      </el-table-column>
      <el-table-column prop="recorder" label="巡查人签名"> </el-table-column>
      <el-table-column prop="remark" label="备注"> </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['device:ledger:edit']"
            >修改</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 添加或修改设备台账对话框 -->
    <el-dialog :title="title" :visible.sync="open" append-to-body>
      <el-form ref="form" :model="form" :rules="rules">
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-form-item label="时间" prop="curTime">
              <!-- <el-date-picker
                v-model="form.curTime"
                type="datetime"
                placeholder="选择日期时间"
                disabled
              >
              </el-date-picker>  -->
              <el-input
                v-model="form.curTime"
                disabled
                placeholder=""
              /> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="班次" prop="classes">
              <el-input
                v-model="form.classes"
                clearable
                placeholder="请输入班次"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="24" class="oneRowLabel">1号热泵</el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-form-item label="设定温度℃" prop="tempSetHotPumpOne">
              <el-input
                clearable
                v-model="form.tempSetHotPumpOne"
                placeholder="请输入温度℃"
              /> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="实际温度℃" prop="tempRealHotPumpOne">
              <el-input
                clearable
                v-model="form.tempRealHotPumpOne"
                placeholder="请输入温度℃"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-form-item label="设备开关机" prop="statusSwitchHotPumpOne">
              <el-select
                clearable
                v-model="form.statusSwitchHotPumpOne"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in deviceSwitch"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="设备运行状态" prop="statusRunHotPumpOne">
              <el-select
                clearable
                v-model="form.statusRunHotPumpOne"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in deviceRun"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select> </el-form-item
          ></el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="24" class="oneRowLabel">2号热泵</el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-form-item label="设定温度℃" prop="tempSetHotPumpTwo">
              <el-input
                clearable
                v-model="form.tempSetHotPumpTwo"
                placeholder="请输入温度℃"
              /> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="实际温度℃" prop="tempRealHotPumpTwo">
              <el-input
                clearable
                v-model="form.tempRealHotPumpTwo"
                placeholder="请输入温度℃"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-form-item label="设备开关机" prop="statusSwitchHotPumpTwo">
              <el-select
                clearable
                v-model="form.statusSwitchHotPumpTwo"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in deviceSwitch"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="设备运行状态" prop="statusRunHotPumpTwo">
              <el-select
                clearable
                v-model="form.statusRunHotPumpTwo"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in deviceRun"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select> </el-form-item
          ></el-col>
        </el-row>
        <template v-if="showMorePump">
          <el-row type="flex" justify="center">
            <el-col :span="24" class="oneRowLabel">3号热泵</el-col>
          </el-row>
          <el-row type="flex" justify="center">
            <el-col :span="12">
              <el-form-item label="设定温度℃" prop="tempSetHotPumpThree">
                <el-input
                  clearable
                  v-model="form.tempSetHotPumpThree"
                  placeholder="请输入温度℃"
                /> </el-form-item
            ></el-col>
            <el-col :span="12">
              <el-form-item label="实际温度℃" prop="tempRealHotPumpThree">
                <el-input
                  clearable
                  v-model="form.tempRealHotPumpThree"
                  placeholder="请输入温度℃"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" justify="center">
            <el-col :span="12">
              <el-form-item label="设备开关机" prop="statusSwitchHotPumpThree">
                <el-select
                  clearable
                  v-model="form.statusSwitchHotPumpThree"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, index) in deviceSwitch"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select> </el-form-item
            ></el-col>
            <el-col :span="12">
              <el-form-item label="设备运行状态" prop="statusRunHotPumpThree">
                <el-select
                  clearable
                  v-model="form.statusRunHotPumpThree"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, index) in deviceRun"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select> </el-form-item
            ></el-col>
          </el-row>
        </template>
        <template v-if="showMorePump">
          <el-row type="flex" justify="center">
            <el-col :span="24" class="oneRowLabel">4号热泵</el-col>
          </el-row>
          <el-row type="flex" justify="center">
            <el-col :span="12">
              <el-form-item label="设定温度℃" prop="tempSetHotPumpFour">
                <el-input
                  clearable
                  v-model="form.tempSetHotPumpFour"
                  placeholder="请输入温度℃"
                /> </el-form-item
            ></el-col>
            <el-col :span="12">
              <el-form-item label="实际温度℃" prop="tempRealHotPumpFour">
                <el-input
                  clearable
                  v-model="form.tempRealHotPumpFour"
                  placeholder="请输入温度℃"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" justify="center">
            <el-col :span="12">
              <el-form-item label="设备开关机" prop="statusSwitchHotPumpFour">
                <el-select
                  clearable
                  v-model="form.statusSwitchHotPumpFour"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, index) in deviceSwitch"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select> </el-form-item
            ></el-col>
            <el-col :span="12">
              <el-form-item label="设备运行状态" prop="statusRunHotPumpFour">
                <el-select
                  clearable
                  v-model="form.statusRunHotPumpFour"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, index) in deviceRun"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select> </el-form-item
            ></el-col>
          </el-row>
        </template>
        <el-row type="flex" justify="center">
          <el-col :span="24" class="oneRowLabel">{{
            tableColumnLabel1
          }}</el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-form-item label="设定压力bar" prop="presSetSupplyPumpAreaOne">
              <el-input
                clearable
                v-model="form.presSetSupplyPumpAreaOne"
                placeholder="请输入压力bar"
              /> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="实际压力bar" prop="presRealSupplyPumpAreaOne">
              <el-input
                clearable
                v-model="form.presRealSupplyPumpAreaOne"
                placeholder="请输入压力bar"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-form-item label="1号泵运行状态" prop="statusRunSupplyPumpOne">
              <el-select
                clearable
                v-model="form.statusRunSupplyPumpOne"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in deviceRun"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="2号泵运行状态" prop="statusRunSupplyPumpTwo">
              <el-select
                clearable
                v-model="form.statusRunSupplyPumpTwo"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in deviceRun"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select> </el-form-item
          ></el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="24" class="oneRowLabel">{{
            tableColumnLabel2
          }}</el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-form-item label="设定压力bar" prop="presSetSupplyPumpAreaTwo">
              <el-input
                clearable
                v-model="form.presSetSupplyPumpAreaTwo"
                placeholder="请输入压力bar"
              /> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="实际压力bar" prop="presRealSupplyPumpAreaTwo">
              <el-input
                clearable
                v-model="form.presRealSupplyPumpAreaTwo"
                placeholder="请输入压力bar"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-form-item label="1号泵运行状态" prop="statusRunSupplyPumpThree">
              <el-select
                clearable
                v-model="form.statusRunSupplyPumpThree"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in deviceRun"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="2号泵运行状态" prop="statusRunSupplyPumpFour">
              <el-select
                clearable
                v-model="form.statusRunSupplyPumpFour"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in deviceRun"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select> </el-form-item
          ></el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-form-item :label="tableColumnLabel3" prop="levelWaterTankOne">
              <el-input
                clearable
                v-model="form.levelWaterTankOne"
                placeholder="请输入液位%"
              /> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item :label="tableColumnLabel4" prop="levelWaterTankTwo">
              <el-input
                clearable
                v-model="form.levelWaterTankTwo"
                placeholder="请输入液位%"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-form-item label="巡查人签名" prop="recorder">
              <el-input
                clearable
                v-model="form.recorder"
                placeholder="请输入"
              /> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="备注" prop="remark">
              <el-input
                clearable
                v-model="form.remark"
                placeholder="请输入备注"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  hotWaterList,
  hotWaterExport,
  hotWaterEdit,
} from "@/api/comprehensiveEnergy/hotPumpLog";
import { floorTree } from "@/api/region";
export default {
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      postList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        floorId: "",
        params: {},
      },
      builds: [],
      dayDate: "",
      tableData: [],
      tableColumnLabel1: "", // 表格列的 label
      tableColumnLabel2: "", // 表格列的 label
      tableColumnLabel3: "", // 表格列的 label
      tableColumnLabel4: "", // 表格列的 label
      showMorePump: false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        deviceName: [
          { required: true, message: "设备名称不能为空", trigger: "blur" },
        ],
      },
      dialogPrintVisible: false,
      deviceSwitch: [
        {
          label: "关机",
          value: 0,
        },
        {
          label: "开机",
          value: 1,
        },
      ],
      deviceRun: [
        {
          label: "不运行",
          value: 0,
        },
        {
          label: "运行",
          value: 1,
        },
      ],
    };
  },
  mounted() {
    this.initializeTimeDate();
    this.getBuildList();
  },
  methods: {
    // 初始化时间
    initializeTimeDate() {
      let date = new Date(); //获取新的时间
      //获取当前年份,并且转为字符串
      let year = date.getFullYear().toString();
      //获取当前月份，因为月份是要从0开始，此处要加1，
      //使用三元表达式，判断是否小于10，如果是的话，就在字符串前面拼接'0'
      let month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1).toString()
          : (date.getMonth() + 1).toString();
      //获取天，判断是否小于10，如果是的话，就在在字符串前面拼接'0'
      let day =
        date.getDate() < 10
          ? "0" + date.getDate().toString()
          : date.getDate().toString();
      //字符串拼接，将开始时间和结束时间进行拼接
      let start1 = year + "-" + month + "-01"; //当月第一天
      let end1 = year + "-" + month + "-" + day; //当天
      this.dayDate = [start1, end1]; // 更新
    },
    tableRowStyle({ row, column, rowIndex, columnIndex }) {
      // 修改颜色
      //   if (columnIndex === 1) {
      //     return "color: #fd1e00;!important;text-align:center";
      //   }
      //   if (columnIndex === 2) {
      //     return "color: #3390ff;!important;text-align:center";
      //   }
      if (
        rowIndex === 8 ||
        rowIndex === 13 ||
        rowIndex === 18 ||
        rowIndex === 21 ||
        rowIndex === 23 ||
        rowIndex === 25 ||
        rowIndex === 26
      ) {
        return "color: #75d148;!important;font-weight: bold;background-color: rgba(0, 71, 125, 0.4)";
      }
    },
    // 选中日期事件
    dateChange() {
      // console.log("打印时间", this.timeform.time1);
      if (!this.dayDate) {
        this.$nextTick(() => {
          this.dayDate = [];
        });
      }
    },
    /** 查询楼栋 */
    getBuildList() {
      floorTree().then((res) => {
        if (res.code == 200) {
          // 只需要保留热水的系统
          console.log("楼栋返回值", res);
          let newRes = { ...res };

          if (newRes.data && newRes.data[0] && newRes.data[0].children) {
            newRes.data[0].children = newRes.data[0].children.filter((item) => {
              // 假设子项有一个 label属性，用于检查是否包含 "热水"
              return item.label && item.label.includes("热水");
            });
          }
          // 指定要保留的最大层级（从 1 开始计数），这里假设指定为第 4 级
          const targetLevel = 4;
          // 从 data[0] 开始处理，当前层级为 1
          if (newRes.data[0]) {
            this.removeChildrenAfterLevel(newRes.data[0], 1, targetLevel);
          }
          console.log("筛选后的新结果", newRes);
          this.getFourthLevelChildren(newRes.data);
          //   请求表格
          this.getList();
        }
      });
    },
    // 递归函数，用于去除指定层级往后的 children 数据
    removeChildrenAfterLevel(obj, currentLevel, targetLevel) {
      if (currentLevel >= targetLevel) {
        // 当达到指定层级时，将 children 属性置为空数组
        obj.children = [];
        return;
      }
      if (obj.children && obj.children.length > 0) {
        // 若存在 children 数组，则递归处理每个子项
        for (let i = 0; i < obj.children.length; i++) {
          this.removeChildrenAfterLevel(
            obj.children[i],
            currentLevel + 1,
            targetLevel
          );
        }
      }
    },
    getFourthLevelChildren(nodes, level = 1) {
      console.log(`当前层级: ${level}, 节点数量: ${nodes ? nodes.length : 0}`);
      if (Array.isArray(nodes)) {
        for (const node of nodes) {
          if (level === 3 && node.children) {
            console.log("node.children", node.children);
            this.builds = node.children;
            this.queryParams.floorId = this.builds[0].id;
            if (this.builds[0].label === "-1楼") {
              this.tableColumnLabel1 = "裙楼变频泵";
              this.tableColumnLabel2 = "中厨变频泵";
              this.tableColumnLabel3 = "裙楼液位%";
              this.tableColumnLabel4 = "中厨液位%";
              this.showMorePump = false;
            } else if (this.builds[0].label === "3楼") {
              this.tableColumnLabel1 = "高区变频泵";
              this.tableColumnLabel2 = "中区变频泵";
              this.tableColumnLabel3 = "高区液位%";
              this.tableColumnLabel4 = "中区液位%";
              this.showMorePump = true;
            }
          } else if (node.children) {
            this.getFourthLevelChildren(node.children, level + 1);
          } else {
            this.builds = [];
            this.queryParams.floorId = "";
          }
        }
      }
    },

    /** 查询表格数据 */
    getList() {
      this.loading = true;
      this.queryParams.params.startTime =
        this.dayDate.length > 0 ? this.dayDate[0] : "";
      this.queryParams.params.endTime =
        this.dayDate.length > 0 ? this.dayDate[1] : "";
      hotWaterList(this.queryParams).then((res) => {
        console.log("列表返回", res);
        if (res.code == 200 && res.rows) {
          this.tableData = res.rows;
          this.loading = false;
        } else {
          this.tableData = [];
          this.loading = false;
        }
      });
      //   处理表格数据
      this.loading = false;
    },
    handleSelectChange(value) {
      //   // 根据选中的值找到对应的选项
      //   const selectedItem = this.builds.find((item) => item.id === value);
      //   if (selectedItem) {
      //     const label = selectedItem.label;
      //     if (label === "-1楼") {
      //       this.tableColumnLabel1 = "裙楼变频泵";
      //       this.tableColumnLabel2 = "中厨变频泵";
      //     } else if (label === "3楼") {
      //       this.tableColumnLabel1 = "高区变频泵";
      //       this.tableColumnLabel2 = "中区变频泵";
      //     }
      //   }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      // 根据选中的值找到对应的选项
      const selectedItem = this.builds.find(
        (item) => item.id === this.queryParams.floorId
      );
      if (selectedItem) {
        const label = selectedItem.label;
        if (label === "-1楼") {
          this.tableColumnLabel1 = "裙楼变频泵";
          this.tableColumnLabel2 = "中厨变频泵";
          this.tableColumnLabel3 = "裙楼液位%";
          this.tableColumnLabel4 = "中厨液位%";
          this.showMorePump = false;
        } else if (label === "3楼") {
          this.tableColumnLabel1 = "高区变频泵";
          this.tableColumnLabel2 = "中区变频泵";
          this.tableColumnLabel3 = "高区液位%";
          this.tableColumnLabel4 = "中区液位%";
          this.showMorePump = true;
        }
      }
      this.getList();
    },
    /** 导出按钮操作 */
    handleExport() {
      this.queryParams.params.startTime =
        this.dayDate.length > 0 ? this.dayDate[0] : "";
      this.queryParams.params.endTime =
        this.dayDate.length > 0 ? this.dayDate[1] : "";
      hotWaterExport(this.queryParams).then((res) => {
        console.log("导出返回", res);
        if (res) {
          // 请求的结果就是文件
          // 创建一个blob URL，用于生成下载链接
          const url = window.URL.createObjectURL(new Blob([res]));
          // 创建一个<a>元素，并设置其href和download属性
          const link = document.createElement("a");
          link.href = url;
          link.setAttribute("download", "热泵运行记录.xls"); // 设置下载的文件名
          // 模拟点击下载链接
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
          // 释放blob URL资源
          window.URL.revokeObjectURL(url);
          this.$message({
            type: "success",
            message: "导出成功!",
          });
        } else {
          this.$message.error("导出失败!");
        }
      });
      // .catch((err) => {
      //     this.$message.error('导出失败!');
      // })
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
      this.form.id = "";
    },
    // 表单重置
    reset() {
      this.form = {
        id: "",
        curDate: "",
        curTime: "",
        classes: "",
        tempSetHotPumpOne: "",
        tempRealHotPumpOne: "",
        statusSwitchHotPumpOne: "",
        statusRunHotPumpOne: "",
        tempSetHotPumpTwo: "",
        tempRealHotPumpTwo: "",
        statusSwitchHotPumpTwo: "",
        statusRunHotPumpTwo: "",
        tempSetHotPumpThree: "",
        tempRealHotPumpThree: "",
        statusSwitchHotPumpThree: "",
        statusRunHotPumpThree: "",
        tempSetHotPumpFour: "",
        tempRealHotPumpFour: "",
        statusSwitchHotPumpFour: "",
        statusRunHotPumpFour: "",
        presSetSupplyPumpAreaOne: "",
        presRealSupplyPumpAreaOne: "",
        statusRunSupplyPumpOne: "",
        statusRunSupplyPumpTwo: "",
        presSetSupplyPumpAreaTwo: "",
        presRealSupplyPumpAreaTwo: "",
        statusRunSupplyPumpThree: "",
        statusRunSupplyPumpFour: "",
        levelWaterTankOne: "",
        levelWaterTankTwo: "",
        recorder: "",
        remark: "",
      };
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      this.form = Object.assign({}, row);
      this.open = true;
      this.title = "修改热泵运行记录";
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != undefined) {
            hotWaterEdit(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            console.log("新增参数", this.form);
          }
        }
      });
    },
  },
};
</script>
<style scoped lang="scss">
/* 媒体查询，适配大于2000px分辨率的大屏样式 - element样式 */
@media (max-width: 2000px) {
  ::v-deep .el-dialog {
    width: 800px !important;
  }
  ::v-deep .print-dialog .el-dialog {
    width: 1200px !important;
  }
  ::v-deep .el-dialog .el-form-item__label {
    width: 130px !important;
  }
  ::v-deep .el-dialog .el-form-item {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  ::v-deep .el-dialog .el-form-item__content {
    width: 220px !important;
  }
  .oneRowLabel {
    margin-left: 40px;
    font-size: 15px;
    font-weight: bold;
    color: #02ce0d;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .oneRowLabel::before {
    content: "";
    display: inline-block;
    width: 8px; /* 圆的直径 */
    height: 8px;
    border-radius: 50%; /* 使元素变成圆形 */
    background-color: #02ce0d; /* 圆的颜色，这里和文字颜色保持一致 */
    margin-right: 10px; /* 圆和文字之间的间距 */
    vertical-align: middle; /* 使圆在垂直方向上与文字居中对齐 */
  }
}
@media (min-width: 2000px) {
  //   ::v-deep .el-dialog {
  //     width: 8rem !important;
  //   }

  //   ::v-deep .el-dialog .el-form-item__label {
  //     width: 1.5rem !important;
  //   }
  //   ::v-deep .el-dialog .el-form-item {
  //     display: flex;
  //     flex-direction: row;
  //     align-items: center;
  //   }
}
</style>
