<template>
  <div class="page-container">
    <div class="border-container">
      <div class="latestData">实时数据</div>
    <div class="page-inner">
      <!-- 刷新时间 start -->
      <div class="">
        数据刷新时间：2021-03-05 12:00:00
        <span class="refresh"
          ><img src="@/assets/refresh.png" alt="" /> 刷新</span
        >
        <span class="export"
          ><img src="@/assets/export.png" alt="" /> 导出</span
        >
      </div>
      <!-- 刷新时间 end -->

      <!-- 全选start -->
      <div class="checkSection">
        <input
          type="checkbox"
          id="checkbox"
          v-model="checked"
          @change="changeAllChecked()"
        />
        <label for="checkbox"> 全选 </label>

        <input type="checkbox" id="dl" value="dl" v-model="checkedNames" />
        <label for="dl"> 电流 </label>
        <input type="checkbox" id="gl" value="gl" v-model="checkedNames" />
        <label for="gl"> 功率 </label>
        <input type="checkbox" id="dd" value="dd" v-model="checkedNames" />
        <label for="dd"> 电度 </label>
        <input type="checkbox" id="dy" value="dy" v-model="checkedNames" />
        <label for="dy"> 电压 </label>
        <input type="checkbox" id="wd" value="wd" v-model="checkedNames" />
        <label for="wd"> 温度 </label>
        <input type="checkbox" id="pl" value="pl" v-model="checkedNames" />
        <label for="pl"> 频率 </label>
        <input type="checkbox" id="glys" value="glys" v-model="checkedNames" />
        <label for="glys"> 功率因数 </label>
        <input type="checkbox" id="xbdl" value="xbdl" v-model="checkedNames" />
        <label for="xbdl"> 谐波电流有效值 </label>
        <input type="checkbox" id="txcs" value="txcs" v-model="checkedNames" />
        <label for="txcs"> 通讯参数 </label>
        <input type="checkbox" id="dytb" value="dytb" v-model="checkedNames" />
        <label for="dytb"> 电压突变 </label>
      </div>
      <!-- 全选end -->

      <!-- table start -->
      <el-table
        :data="tableData"
        :cell-style="cellStyle"
        :header-cell-style="{ color: '#fff', borderColor: '#01727A' }"
        style="width: 100%"
      >
        <el-table-column prop="name" label="设备名称" width="150">
        </el-table-column>

        <el-table-column label="设备状态">
          <el-table-column prop="status" label="运行状态" width="120">
            <template slot-scope="{ row }">
              <el-button size="mini" type="success">{{ row.status }}</el-button>
                
            </template>
          </el-table-column>
        </el-table-column>

        <!-- <el-table-column label="设备状态">
          <el-table-column prop="status" label="运行状态" width="120">
          </el-table-column>
        </el-table-column> -->
        <el-table-column label="电流A">
          <el-table-column prop="" label="A相电流" width="120">
          </el-table-column>
          <el-table-column prop="" label="B相电流" width="120">
          </el-table-column>
          <el-table-column prop="" label="C相电流" width="120">
          </el-table-column>
        </el-table-column>
        <el-table-column label="功率">
          <el-table-column prop="" label="A相有功kW" width="120">
          </el-table-column>
          <el-table-column prop="" label="A相无功kW" width="120">
          </el-table-column>
          <el-table-column prop="" label="B相有功kW" width="120">
          </el-table-column>
          <el-table-column prop="" label="B相无功kW" width="120">
          </el-table-column>
          <el-table-column prop="" label="C相有功kW" width="120">
          </el-table-column>
          <el-table-column prop="" label="C相无功kW" width="120">
          </el-table-column>
          <el-table-column prop="" label="有功功率kW" width="120">
          </el-table-column>
          <el-table-column prop="" label="无功功率kW" width="120">
          </el-table-column>
          <el-table-column prop="" label="当前需量kW" width="120">
          </el-table-column>
        </el-table-column>
      </el-table>
      <!-- table end -->
    </div>
    </div>
    
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "Dashboard",
  computed: {
    ...mapGetters(["name"]),
  },
  data() {
    return {
      checked: false,
      checkedNames: [],
      checkedArr: [
        "dl",
        "gl",
        "dd",
        "dy",
        "wd",
        "pl",
        "glys",
        "xbdl",
        "txcs",
        "dytb",
      ],

      tableData: [
        {
          status: "OFF",
          name: "HZ183",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
      ],
    };
  },
  methods: {
    //设置单元格背景
    cellStyle({ row, column, rowIndex, columnIndex }) {
      return " border-color:#01727A!important;color:#fff;";
    },

    changeAllChecked: function () {
      if (this.checked) {
        this.checkedNames = this.checkedArr;
      } else {
        this.checkedNames = [];
      }
    },
  },
  watch: {
    checkedNames: function () {
      if (this.checkedNames.length == this.checkedArr.length) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    },
  },
};
</script>

<style lang="scss" >
</style>
