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

      <div style="margin-bottom: 10px">
        <el-button size="medium" icon="el-icon-back" type="text">返回</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="tableData">
            <el-table-column prop="deviceId" label="设备名称"></el-table-column>
            <el-table-column prop="temp" label="温度"></el-table-column>
            <el-table-column prop="humidity" label="湿度"></el-table-column>
            <el-table-column prop="caa" label="含湿量"></el-table-column>
          </el-table>
        </div>

        <!--        设置表-->
        <div class="setTable">
          <el-table :data="setTableData" :header-cell-style="{'text-align':'center'}"
                    :cell-style="{'text-align':'center'}">
            <el-table-column prop="pfwd" label="排风温度设定"></el-table-column>
            <el-table-column prop="pfsd" label="排风湿度设定"></el-table-column>
            <el-table-column prop="pfhsl" label="排风含湿量设定"></el-table-column>
            <el-table-column prop="tjys" label="停机延时"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">

                <el-button type="primary" style="background-color: #545c64;color: white;border: 0px" size="mini"
                           @click="showEdit(scope.row)">编辑
                </el-button>

                <el-button type="danger" size="mini" @click="stop(scope.row)" style="background-color: brown;color: white;border: 0px">停止
                </el-button>
              </template>
            </el-table-column>

          </el-table>
        </div>

        <!--        状态表-->
        <div class="stateTable">
          <el-table :data="stateTable" :header-cell-style="{'text-align':'center'}"
                    :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="djr" label="电加热" width="220">
              <template>
                <el-button
                    style="color:white;background-color: green;border: 0px"
                    type="primary"
                    size="small">
                  一
                </el-button>
                <el-button
                    style="color:white;background-color: green;border: 0px"
                    type="primary"
                    size="small">
                  二
                </el-button>
                <el-button
                    style="color:white;background-color: green;border: 0px"
                    type="primary"
                    size="small">
                  三
                </el-button>
              </template>
            </el-table-column>
            <el-table-column prop="jsq" label="加湿器"></el-table-column>
            <el-table-column prop="cxlw" label="初效滤网">
              <template slot-scope="scope">
                <el-button
                    style="color:white;background-color: green;border: 0px"
                    type="primary"
                    size="small"
                    @click="statusHandle(scope.row)"
                >
                  {{ scope.row.status == '正常' ? '正常' : '异常' }}
                </el-button>
              </template>
            </el-table-column>

            <el-table-column prop="zxlw" label="中效滤网">
              <template slot-scope="scope">
                <el-button
                    style="color:white;background-color: green;border: 0px"
                    type="primary"
                    size="small"
                    @click="statusHandle(scope.row)"
                >
                  {{ scope.row.status == '正常' ? '正常' : '异常' }}
                </el-button>
              </template>
            </el-table-column>

            <el-table-column prop="gwbj" label="高温报警">
              <template slot-scope="scope">
                <el-button
                    style="color:white;background-color: green;border: 0px"
                    type="primary"
                    size="small"
                    @click="statusHandle(scope.row)"
                >
                  {{ scope.row.status == '正常' ? '正常' : '异常' }}
                </el-button>
              </template>
            </el-table-column>

            <el-table-column prop="qfyc" label="缺风压差">
              <template slot-scope="scope">
                <el-button
                    style="color:white;background-color: green;border: 0px"
                    type="primary"
                    size="small"
                    @click="statusHandle(scope.row)"
                >
                  {{ scope.row.status == '正常' ? '正常' : '异常' }}
                </el-button>
              </template>
            </el-table-column>

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

      <div>
        <el-dialog title="参数设定" :visible.sync="dialogFormVisible" style="width: 70% ; margin-left: 300px ;">
          <el-form inline="true" :model="formData" label-width="100px" label-position="left">

            <el-row style="margin-left: 14px">
              <el-form-item label="排风温度" prop="pfwd">
                <el-input v-model="formData.pfwd"></el-input>
              </el-form-item>
              <el-form-item label="排风湿度" prop="pfsd">
                <el-input v-model="formData.pfsd"></el-input>
              </el-form-item>
            </el-row>

            <el-row style="margin-left: 14px">
              <el-form-item label="排风含湿量" prop="pfhsl">
                <el-input v-model="formData.pfhsl"></el-input>
              </el-form-item>
              <el-form-item label="停机延时" prop="tjys">
                <el-input v-model="formData.tjys"></el-input>
              </el-form-item>
            </el-row>
          </el-form>

          <div slot="footer" class="dialog-footer" style="text-align: center">
            <el-button @click="cancel()">取 消</el-button>
            <el-button type="primary" @click="edit()">确 定</el-button>
          </div>
        </el-dialog>
      </div>

    </el-main>
  </div>

</template>

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

      tableData:
          [{
            deviceId: 'SMART_KTX',
            temp: '36℃',
            humidity: '20%',
            caa: '20g/kg'
          }],

      formData: {
        pfwd: '',
        pfsd: '',
        pfhsl: '',
        tjys: ''
      },

      setTableData: [{
        pfwd: '36℃',
        pfsd: '20%',
        pfhsl: '9.6/kg',
        tjys: '180s',
        deviceState: '1'
      }],

      stateTable: [{
        lsf: '94%',
        rsf: '97%',
        djr: '',
        jsq: '0%',
        gwbj: '',
        cxlw: '',
        zxlw: '',
        cfyc: ''
      }]


    }
  },

  created: function () {
    this.loadData();
  },

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

      this.dialogFormVisible = false;
    },

    showEdit(row) {
      this.dialogFormVisible = true;

      this.editRow = JSON.parse(JSON.stringify(row));
      this.formData = this.editRow

    }
  }
}
</script>

<style scoped>

.stateTable {
  padding-top: 180px;

}

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

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

</style>
