<template>
  <el-dialog
    width="70%"
    @open="opened"
    @closed="closed"
    :fullscreen="true"
    :show-close="true"
    class="dialogs"
  >
    <template #title>
      <div class="showTitles currentShowTitles">
        <div class="titles">状态时间查询</div>
      </div>
    </template>
    <div class="body">
        <div class="searchTitle">
          <div class="search">
          <div class="date">风场:</div>
          <el-select
            class="inputs"
            v-model="selectValue"
            placeholder="请选择"
          >
            <el-option
              v-for="item in stationList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <div class="search">
          <div class="date">日期:</div>
          <el-date-picker
            class="pickers"
            @change="changes"
            v-model="timeValue"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>
        <div class="buttons" @click="getData()">查询</div>
      </div>
      <div class="tables">
        <el-table
          :data="StatusList"
          class="table"
          style="width: 100%"
          height="82vh"
          :header-cell-style="{
            background: 'rgb(30,30,30)',
            color: 'rgb(220,220,220)',
            padding: '4px',
            fontSize: '14px',
            'border-bottom': 'solid 1px rgba(77, 77, 77, 1)',
          }"
          :cell-style="{
            height: '40px',
            background: 'rgb(30,30,30)',
            color: 'rgb(220,220,220)',
            padding: '3px',
            fontSize: '12px',
            'border-bottom': '1px solid #000000',
          }"
        >
          <el-table-column
            prop="code"
            label="风机名称"
            width="150"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="averageWindSpeedDay"
            label="平均风速（m/s）"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="actualpowerday"
            label="发电量（Kwh）"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="powerfactor"
            label="功率因数"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="onlinehours"
            label="并网运行时间（H）"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="maintainhours"
            label="风机维护时间（H）"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="faulthours"
            label="风机故障时间（H）"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="standbyhours"
            label="待机时间（H）"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="offlinehours"
            label="离线时间（H）"
            align="center"
          >
          </el-table-column>
          
        </el-table>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import api from "api/index";
export default {
  data() {
    return {
      timeValue: [],
      stationList: [],
      selectValue:'',
      StatusList: [],
    };
  },
  methods: {
    opened() {
      let date = new Date();
      this.timeValue[0] = date.getTime() - (28800000 *3);
      this.timeValue[1] = date.getTime();
      let stationList = this.$store.state.stationList;
      this.selectValue = stationList[0].id;
      this.stationList = stationList;
      this.getData()
    },
    getData(){
      console.log(11111111);
      api.statusTime({
        stationid: this.selectValue,
        startTs: new Date(this.timeValue[0]).getTime(),
        endTs: new Date(this.timeValue[1]).getTime(),
      }).then(res =>{
        res.data.forEach(item =>{
        for (const key in item) {
          if (typeof(item[key]) === 'number') {
            item[key] = item[key].toFixed(2)
          }
        }
      })
        this.StatusList = res.data
      })
    }
  },
};
</script>
<style lang="less" scoped>
.body {
  background-color: #000000;
  height: 90vh;
  width: 102%;
  margin-left: -1%;
  margin-top: -40px;
}
.searchTitle {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 3vw;
  padding-top: 10px;
  color: #ffffff;
}
.search {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 50px;
}
.date {
  margin-right: 10px;
  font-size: 16px;
}
.tables {
  margin-left: 3vw;
  padding-top: 10px;
}
.el-table {
  position: static;
  background-color: #141414;
}
.inputs {
  border: none;
  width: 174px !important;
  background-color: #292929;
  height: 40px;
  color: #ffffff;
}
</style>