<template>
  <div id="runningState">
    <el-main>

      <div style="margin-bottom: 10px">
        <el-button size="medium" icon="el-icon-back" type="text" @click="back">返回</el-button>
        <span style="margin-left: 20px; font-size: 18px">运行状态</span>
      </div>

      <div style="padding: 10px">

        <div style="float:left; width: 600px;">
          <el-table :data="formData" :header-cell-style="{background:'#545c64',color:'white'}">
            <el-table-column prop="sn" label="设备名称"></el-table-column>
            <el-table-column prop="WD_1" label="温度（℃）"></el-table-column>
            <el-table-column prop="SD_1" label="湿度（%）"></el-table-column>
            <el-table-column prop="HSL" label="含湿量（g/kg）"></el-table-column>
          </el-table>
        </div>

        <!--        设置表-->
        <div class="setTable">
          <el-table :data="setTableData" :header-cell-style="{'text-align':'center',background:'#545c64',color:'white'}"
                    :cell-style="{'text-align':'center'}">
            <el-table-column prop="WD_SD" label="排风温度设定（℃）"></el-table-column>
            <el-table-column prop="SD_SD" label="排风湿度设定（%）"></el-table-column>
            <el-table-column prop="HSL_SD" label="排风含湿量设定（g/kg）"></el-table-column>
            <el-table-column prop="JZ_YSTZ" label="停机延时（s）"></el-table-column>
            <el-table-column label="操作">
              <template>
                <el-button type="danger" size="mini" @click="stopAndStart"
                           class="Moren_button"
                           :class="{'KGJ_button' :setTableData[0].JZ_KGJ == 0}">开关按钮
                </el-button>
              </template>
            </el-table-column>

          </el-table>
        </div>

        <!--        状态表-->
        <div class="stateTable">
          <el-table :data="stateTable" :header-cell-style="{'text-align':'center',background:'#545c64',color:'white'}"
                    :cell-style="{'text-align':'center'}">
            <el-table-column prop="RSF" label="热水阀"></el-table-column>
            <el-table-column prop="LSF" label="冷水阀"></el-table-column>
            <el-table-column prop="JSF" label="电加热" width="220">
              <template>
                <el-button
                    class="Moren_button"
                    :class="{'KGJ_button' :stateTable[0].YJDJR_QT == 0}"
                    type="primary"
                    size="small">
                  一
                </el-button>
                <el-button
                    class="Moren_button"
                    :class="{'KGJ_button' :stateTable[0].EJDJR_QT == 0}"
                    type="primary"
                    size="small">
                  二
                </el-button>
                <el-button
                    class="Moren_button"
                    :class="{'KGJ_button' :stateTable[0].SJDJR_QT == 0}"
                    type="primary"
                    size="small">
                  三
                </el-button>
              </template>
            </el-table-column>
            <el-table-column prop="JSF" label="加湿器"></el-table-column>
            <el-table-column prop="cxlw" label="初效滤网">
              <template>
                <el-button
                    class="Moren_button"
                    :class="{'KGJ_button' :stateTable[0].LWDS_CX == 1}"
                    type="primary"
                    size="small">
                  {{ this.stateTable[0].LWDS_CX == 0 ? "正常" : "报警" }}
                </el-button>
              </template>
            </el-table-column>

            <el-table-column prop="zxlw" label="中效滤网">
              <template>
                <el-button
                    class="Moren_button"
                    :class="{'KGJ_button' :stateTable[0].LWDS_ZX == 1}"
                    type="primary"
                    size="small">
                  {{ this.stateTable[0].LWDS_ZX == 0 ? "正常" : "报警" }}
                </el-button>
              </template>
            </el-table-column>

            <el-table-column prop="gwbj" label="高温报警">
              <template>
                <el-button
                    class="Moren_button"
                    :class="{'KGJ_button' :stateTable[0].GW_BJ == 1}"
                    type="primary"
                    size="small">
                  {{ this.stateTable[0].GW_BJ == 0 ? "正常" : "报警" }}
                </el-button>
              </template>
            </el-table-column>

            <el-table-column prop="qfyc" label="缺风压差">
              <template>
                <el-button
                    class="Moren_button"
                    :class="{'KGJ_button' :stateTable[0].QFYC_BJ == 1}"
                    type="primary"
                    size="small">
                  {{ this.stateTable[0].QFYC_BJ == 0 ? "正常" : "报警" }}
                </el-button>
              </template>
            </el-table-column>

          </el-table>
        </div>
      </div>
    </el-main>
  </div>

</template>

<script>
export default {
  name: 'runningState',
  data() {
    return {
      dialogFormVisible: false,


      formData: [{

        sn: 'CK1',
        WD_1: '',
        SD_1: '545',
        HSL: '45',

        Id: '',
        code: '',


      }, {
        sn: 'CK2',
        WD_1: '',
        SD_1: '',
        HSL: '0'
      }],

      setTableData: [{
        WD_SD: '',
        SD_SD: '',
        HSL_SD: '',
        JZ_YSTZ: '',
        JZ_KGJ: '', //设备开关机(0:停止,1:启动)
      }],

      stateTable: [{
        RSF: '',
        LSF: '',
        JSF: '',

        GW_BJ: '', //高温报警(0:正常,1:报警)
        QFYC_BJ: '', //缺风压差(0:正常,1:报警)
        LWDS_CX: '', //初效故障报警(0:正常,1:故障)
        LWDS_ZX: '', //中效故障报警(0:正常,1:故障)

        YJDJR_QT: '', //一级电加热启停(0:停止,1:启动)
        EJDJR_QT: '', //二级电加热启停(0:停止,1:启动)
        SJDJR_QT: '', //三级电加热启停(0:停止,1:启动)
      }]


    }
  },

  created: function () {
    this.getWD_1()
    this.getSD_1()
    this.getHSL()
    this.getWD_2()
    this.getSD_2()

    this.getYSTZ()
    this.getWD_SD()
    this.getSD_SD()
    this.getHSL_SD()

    this.getRSF()
    this.getLSF()
    this.getJSF()

    this.getGWBJ()
    this.getQFYC()
    this.getCXLW()
    this.getZXLW()

    this.getYJDJR()
    this.getEJDJR()
    this.getSJDJR()
    this.getJZ_KGJ()
  },

  methods: {
    stopAndStart() {
      this.setTableData[0].JZ_KGJ == 1 ? this.setTableData[0].JZ_KGJ = 0 : this.setTableData[0].JZ_KGJ = 1;
      console.log(this.setTableData[0].JZ_KGJ)

      const vm = this;
      vm.$http.get(vm.$api.deviceParam.updateParam, {
        params: {
          id: '267',
          value: this.setTableData[0].JZ_KGJ,
          name: "JZ_KGJ",
          sn: "CK1"
        }
      }).then((res) => {
        console.log(res);
      })
    },
    getJZ_KGJ() {
      const vm = this;
      vm.$http.get(vm.$api.deviceParam.detail, {
        params: {
          id: '267'
        }
      }).then((res) => {
        this.setTableData[0].JZ_KGJ = res.data.data.deviceParam.value;
        console.log(this.setTableData[0].JZ_KGJ);
      })
    },
    getWD_1() {
      const vm = this;
      vm.$http.get(vm.$api.deviceParam.detail, {
        params: {
          id: '207'
        }
      }).then((res) => {
        this.formData[0].WD_1 = res.data.data.deviceParam.value;
        console.log(this.formData[0].WD_1);
      })
    },

    getSD_1() {
      const vm = this;
      vm.$http.get(vm.$api.deviceParam.detail, {
        params: {
          id: '293'
        }
      }).then((res) => {
        this.formData[0].SD_1 = res.data.data.deviceParam.value;
        console.log(this.formData[0].SD_1);
      })
    },

    getHSL() {
      const vm = this;
      vm.$http.get(vm.$api.deviceParam.detail, {
        params: {
          id: '269'
        }
      }).then((res) => {
        this.formData[0].HSL = res.data.data.deviceParam.value;
        console.log(this.formData[0].HSL);
      })
    },

    getWD_2() {
      const vm = this;
      vm.$http.get(vm.$api.deviceParam.detail, {
        params: {
          id: '308'
        }
      }).then((res) => {
        this.formData[1].WD_1 = res.data.data.deviceParam.value;
      })
    },

    getSD_2() {
      const vm = this;
      vm.$http.get(vm.$api.deviceParam.detail, {
        params: {
          id: '309'
        }
      }).then((res) => {
        this.formData[1].SD_1 = res.data.data.deviceParam.value;
      })
    },

    getWD_SD() {
      const vm = this;
      vm.$http.get(vm.$api.deviceParam.detail, {
        params: {
          id: '296'
        }
      }).then((res) => {
        this.setTableData[0].WD_SD = res.data.data.deviceParam.value;
      })
    },
    getSD_SD() {
      const vm = this;
      vm.$http.get(vm.$api.deviceParam.detail, {
        params: {
          id: '231'
        }
      }).then((res) => {
        this.setTableData[0].SD_SD = res.data.data.deviceParam.value;
      })
    },
    getYSTZ() {
      const vm = this;
      vm.$http.get(vm.$api.deviceParam.detail, {
        params: {
          id: '219'
        }
      }).then((res) => {
        this.setTableData[0].JZ_YSTZ = res.data.data.deviceParam.value;
      })
    },
    getHSL_SD() {
      const vm = this;
      vm.$http.get(vm.$api.deviceParam.detail, {
        params: {
          id: '227'
        }
      }).then((res) => {
        this.setTableData[0].HSL_SD = res.data.data.deviceParam.value;
      })
    },

    getJSF() {
      const vm = this;
      vm.$http.get(vm.$api.deviceParam.detail, {
        params: {
          id: '212'
        }
      }).then((res) => {
        this.stateTable[0].JSF = res.data.data.deviceParam.value;
      })
    },

    getRSF() {
      const vm = this;
      vm.$http.get(vm.$api.deviceParam.detail, {
        params: {
          id: '216'
        }
      }).then((res) => {
        this.stateTable[0].RSF = res.data.data.deviceParam.value;
      })
    },

    getLSF() {
      const vm = this;
      vm.$http.get(vm.$api.deviceParam.detail, {
        params: {
          id: '268'
        }
      }).then((res) => {
        this.stateTable[0].LSF = res.data.data.deviceParam.value;
      })
    },


    getGWBJ() {
      const vm = this;
      vm.$http.get(vm.$api.deviceParam.detail, {
        params: {
          id: '294'
        }
      }).then((res) => {
        this.stateTable[0].GW_BJ = res.data.data.deviceParam.value;
      })
    },
    getZXLW() {
      const vm = this;
      vm.$http.get(vm.$api.deviceParam.detail, {
        params: {
          id: '303'
        }
      }).then((res) => {
        this.stateTable[0].LWDS_ZX = res.data.data.deviceParam.value;
      })
    },
    getQFYC() {
      const vm = this;
      vm.$http.get(vm.$api.deviceParam.detail, {
        params: {
          id: '306'
        }
      }).then((res) => {
        this.stateTable[0].QFYC_BJ = res.data.data.deviceParam.value;
      })
    },
    getCXLW() {
      const vm = this;
      vm.$http.get(vm.$api.deviceParam.detail, {
        params: {
          id: '283'
        }
      }).then((res) => {
        this.stateTable[0].LWDS_CX = res.data.data.deviceParam.value;
      })
    },

    getSJDJR() {
      const vm = this;
      vm.$http.get(vm.$api.deviceParam.detail, {
        params: {
          id: '213'
        }
      }).then((res) => {
        this.stateTable[0].SJDJR_QT = res.data.data.deviceParam.value;
      })
    },
    getEJDJR() {
      const vm = this;
      vm.$http.get(vm.$api.deviceParam.detail, {
        params: {
          id: '211'
        }
      }).then((res) => {
        this.stateTable[0].EJDJR_QT = res.data.data.deviceParam.value;
      })
    },
    getYJDJR() {
      const vm = this;
      vm.$http.get(vm.$api.deviceParam.detail, {
        params: {
          id: '215'
        }
      }).then((res) => {
        this.stateTable[0].YJDJR_QT = res.data.data.deviceParam.value;
      })
    },

    cancel() {
      this.$message({
        message: '操作取消',
        showClose: true,
        type: 'info'
      });

      this.dialogFormVisible = false;
    },
    back() {
      let vm = this;
      vm.$router.back()
    },
  }
}
</script>

<style scoped>

.stateTable {
  padding-top: 180px;

}

.Moren_button {
  background-color: #007AFF;
  color: white;
  border: 0px
}

.KGJ_button {
  background-color: brown;
}

.setTable {
  float: right;
  width: 900px;
}

.el-form-item {
  width: 200px
}


</style>
