<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-date-picker
            class="pickers"
            @change="changes"
            v-model="timeValue"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>
        <div class="search">
          <div class="date">风机名称:</div>
          <el-select class="inputs" v-model="selectWind" @change="handleChange" placeholder="请选择" clearable>
            <el-option
              v-for="item in windturbinelist"
              :key="item.code"
              :label="item.code"
              :value="item.code"
            >
            </el-option>
          </el-select>
        </div>
        <div class="search">
          <div class="date">关键字:</div>
          <el-input
            class="inputs"
            placeholder="请输入"
            v-model="inputVlaues"
          ></el-input>
        </div>

        <div class="buttons" @click="getWarning()">查询</div>
      </div>
      <!-- <div class="lable">
        <div class="lable-item" v-for="(item, index) in lableList" :key="index">
          <div>{{item.name}}:</div>
          <div style="margin-left: 10px;color:red;">{{item.value}}</div>
        </div>
      </div> -->
      <div class="tables">
        <el-table
          :data="warningList"
          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="alertTime"
            label="发生时间"
            width="150"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="stationName"
            label="风场名称"
            width="120"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="windturbineName"
            label="风机名称"
            width="120"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="rank"
            label="报警等级"
            width="100"
            align="center"
          >
          </el-table-column>
          <el-table-column label="状态" width="120" align="center">
                <template #default="scope">
                  <span>
                    {{ scope.row.messageType  === 1 ? "触发" : "已解除" }}
                  </span>
                </template>
              </el-table-column>
          <el-table-column
            prop="snapId"
            label="故障编号"
            width="240"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="alertText" label="故障信息" align="center">
          </el-table-column>
        </el-table>
      </div>
      <div class="paginations">
        <el-pagination
          :hide-on-single-page="true"
          :page-size="currentPage"
          background
          layout="prev, pager, next"
          :total="total"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import dayjs from "dayjs";
import api from "api/index";
export default {
  data() {
    return {
      current: 0,
      pagenum: 1,
      total: "",
      timeValue: [],
      selectValue: "",
      inputVlaues: "",
      stationList: [],
      selectWind: "",
      windturbineId: "",
      windturbinelist: [],
      warningList: [],
      currentPage: 20,
      lableList: [
        {
          name: "偏航系统故障",
          value: "6996",
        },
        {
          name: "偏航系统故障",
          value: "6996",
        },
        {
          name: "偏航系统故障",
          value: "6996",
        },
        {
          name: "偏航系统故障",
          value: "6996",
        },
        {
          name: "偏航系统故障",
          value: "6996",
        },
        {
          name: "偏航系统故障",
          value: "6996",
        },
        {
          name: "偏航系统故障",
          value: "6996",
        },
        {
          name: "偏航系统故障",
          value: "6996",
        },
        {
          name: "偏航系统故障",
          value: "6996",
        },
        {
          name: "偏航系统故障",
          value: "6996",
        },
        {
          name: "偏航系统故障",
          value: "6996",
        },
        {
          name: "偏航系统故障",
          value: "6996",
        },
      ],
    };
  },
  methods: {
    ChangeBar(values) {
      this.current = values;
    },
    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 stationArr = [
        {
            name: '全部',
            id: ''
        }
      ]
        this.$store.state.stationList.forEach(item =>{
            if (item.name.indexOf('全部') === -1) {
                stationArr.push(item)
            }
        })
      let stationList = stationArr;
      this.selectValue = stationList[1].id;
      this.stationList = stationList;
      this.listedChange(this.selectValue);
      this.getWarning();
    },
    closed() {
      this.pagenum = 1;
    },
    getWarning() {
      api
        .getWindturbineWarning({
          pagesize: this.currentPage,
          pagenum: this.pagenum,
          stationid: this.selectValue === 'WIND_ALL' ? '' : this.selectValue,
          windturbineid: this.windturbineId,
          starttime: dayjs(this.timeValue[0]).format("YYYY-MM-DD HH:mm:ss"),
          endtime: dayjs(this.timeValue[1]).format("YYYY-MM-DD HH:mm:ss"),
          keyword: this.inputVlaues,
          category1: 'windturbine,SYZ,GF',
        })
        .then((msg) => {
          if (msg.data) {
            this.total = msg.data.total
            msg.data.records.forEach((item) => {
              item.alertTime = dayjs(item.alertTime).format("MM-DD HH:mm:ss");
            });
            this.warningList = msg.data.records;
          }
        });
    },
    handleCurrentChange(val) {
      this.pagenum = val;
      this.getWarning();
    },
    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]?.code || "";
      // this.windturbineId = windturbine[0]?.windturbineId
      this.windturbinelist = windturbine;
    },
    handleChange(val){
      if(val){
        this.windturbineId = this.windturbinelist.filter(item => item.code === val)[0].windturbineId
      }else{
        this.windturbineId = ''
      }
      
    }
  },
};
</script>
<style lang="less" scoped>
.body {
  background-color: #000000;
  height: 89vh;
  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;
}
.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>