<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 @change="listedChange(selectValue)" 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-select class="inputs" v-model="selectWind" @change="handleChange" placeholder="请选择">
            <el-option v-for="item in windturbinelist" :key="item.id" :label="item.id" :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="stateList"
          class="table"
          style="width: 100%"
          height="80vh"
          :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="ts" label="动作时间" align="center">
          </el-table-column>
          <el-table-column prop="code" label="风机名称" align="center">
          </el-table-column>
          <el-table-column prop="status" label="动作编号" align="center">
          </el-table-column>
          <el-table-column prop="statusName" label="动作信息" align="center">
          </el-table-column>

        </el-table>
      </div>
      <div class="paginations">
        <el-pagination :hide-on-single-page="true" :page-size="1" background layout="prev, pager, next"
          :total="total" @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import api from "api/index";
import dayjs from "dayjs";
export default {
  components: {
  },
  data() {
    return {
      timeValue: [],
      selectValue: "",
      stationList: [],
      selectWind: "",
      windturbinelist: [],
      pagesize: 20,
      pagenum: 1,
      total: 20,
      stateList: [
      ],
    };
  },
  created() {

  },
  mounted() { },
  methods: {
    opened() {
      // let date = new Date();
      this.timeValue[0] = new Date(new Date().toLocaleDateString()).getTime() - 86400000;
      this.timeValue[1] = new Date(new Date().toLocaleDateString()).getTime();
    //   let stationList = this.$store.state.stationList;
    let stationArr = []
        this.$store.state.stationList.forEach(item =>{
            if (item.name.indexOf('全部') === -1) {
                stationArr.push(item)
            }
        })
      let stationList = stationArr;
      this.selectValue = stationList[0].id;
      this.stationList = stationList;
      this.listedChange(this.selectValue);
      this.getData()
    },
    closed() {
      this.pagenum = 1;
    },
    listedChange(value) {
      this.windturbinelist = [];
      let windturbinelist = this.$store.state.windturbinelist;
      let arr = Object.keys(windturbinelist).sort();
      let windturbine = [];
      for (const key of arr) {
        let wind = windturbinelist[key];
        if (wind.stationId === value) {
          windturbine.push(wind);
        }
      }
      this.selectWind = windturbine[0]?.id || "";
      this.windturbineId = windturbine[0]?.windturbineId
      this.windturbinelist = windturbine;
    },
    getData(){
      api.statusChange({
        pagesize: this.pagesize,
        pagenum: this.pagenum,
        startTs: new Date(this.timeValue[0]).getTime(),
        endTs: new Date(this.timeValue[1]).getTime(),
        windturbineid: this.selectWind,
      }).then(res =>{
        if(res.data){
          this.total = Number(res.data.totalPages)
          res.data.content.forEach(item => {
            item.recommendedDate = dayjs(item.ts ).format("YYYY-MM-DD HH:mm:ss")
          }); 
          this.stateList = res.data.content
        }
      })
    },
  },
};
</script>
<style lang="less" scoped>
.body {
  display: flex;
  flex-direction: column;
  background-color: #000000;
  height: 90vh;
  width: 102%;
  margin-left: -1%;
  margin-top: -40px;
  overflow-y: auto;
}

.body::-webkit-scrollbar {
  /*隐藏滚轮*/
  display: none;
}
.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;
}

.lable {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  margin-left: 75px;
  padding-top: 10px;
}

.lable-item {
  font-size: 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 16%;
  color: #ffffff;
  margin-bottom: 10px;
}

.el-table {
  position: static;
  background-color: #141414;
}

.inputs {
  border: none;
  width: 174px !important;
  background-color: #292929;
  height: 40px;
  color: #ffffff;
}

.paginations {
  display: flex;
  flex-direction: row-reverse;
}
</style>
  