<template>
  <div>
    <div class="query mg-b-8">
      <div class="query-items">
        <div class="query-item" style="width: 230px">
          <div class="lable">场站：</div>
          <div class="search-input">
            <el-select
              v-model="changzhan"
              placeholder="请选择"
              popper-class="select"
              @change="getFengji()"
            >
              <el-option
                v-for="item in changzhanArray"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="query-item" style="width: 230px">
          <div class="lable">风机：</div>
          <div class="search-input">
            <el-select
              v-model="fengji"
              clearable
              placeholder="请选择"
              popper-class="select"
              @change="getTableData()"
            >
              <el-option
                v-for="item in fengjiArray"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="query-item">
          <div class="lable">日期：</div>
          <div class="search-input">
            <el-date-picker
              v-model="dateArray"
              type="daterange"
              value-format="YYYY-MM-DD"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              popper-class="date-select"
              @change="getTableData()"
               >
            </el-date-picker>
          </div>
        </div>
        <div class="query-actions">
          <button class="btn green" @click="search">查询</button>
        </div>
      </div>
    </div>
    <div class="df-table">
      <el-table
        :data="tableData"
        class="custom-table"
        height="85vh"
        ref="gzTableRef"
      >
        <el-table-column type="index" label="序号" align="center" width="50" />
        <el-table-column prop="windturbineid" align="center" label="风机" />
        <el-table-column prop="warntype" align="center" label="预警分类" />
        <el-table-column prop="warndes" align="center" label="预警描述" />
        <el-table-column prop="count" align="center" label="预警次数(次)" />
        <el-table-column prop="duration" align="center" label="预警时长(分钟)" :formatter="rounding"/>
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      changzhan: "",
      changzhanArray: [],
      fengji: "",
      fengjiArray: [],
      fault: "",
      faultArray: [],
      method: "",
      methodArray: [],
      dateArray: [
        new Date(new Date().getTime() - 86400000).formatDate(
          "yyyy-MM-dd"
        ),
        new Date().formatDate("yyyy-MM-dd"),
      ],
      tableData: [],
      selectArray: [],
    };
  },
  created() {
    this.getChangeZhan();
    this.getFaultType()
  },

  methods: {
    // 获取场站列表
    getChangeZhan() {
      const that = this;
      that.API.requestData({
        method: "GET",
        subUrl: "basic/station/all",
        success(res) {
          that.changzhanArray = res.data;
          that.changzhan = that.changzhanArray[0].id;
          that.getFengji();
        },
      });
    },

    // 获取风机列表
    getFengji(fjId) {
      const that = this;
      that.API.requestData({
        method: "GET",
        subUrl: "basic/windturbine/all",
        data: {
          station: that.changzhan,
        },
        success(res) {
          that.fengjiArray = res.data;
          that.fengji = fjId || "";
          that.getTableData();
        },
      });
    },

    // 获取故障类型
    getFaultType() {
      const that = this;
      that.API.requestData({
        method: "GET",
        subUrl: "know/fault/type/all",
        success(res) {
          that.faultArray = res.data;
        },
      });
    },

    //条件查询
    search() {
      this.getTableData();
    },

    // 获取表格数据
    getTableData(showLoading = true) {
      const that = this;
      that.API.requestData({
        method: "GET",
        subUrl: "case/warning/custom/list",
        showLoading,
        data: {
          station: that.changzhan,
          wtId: that.fengji,
          st: that.dateArray[0],
          et: that.dateArray[1],
        },
        success(res) {
          that.tableData = res.data;
        },
      });
    },
    rounding(row,column) {
      return parseFloat(row[column.property]).toFixed(2)
    },
  },
};
</script>

<style lang="less" scoped>
.query-actions button {
  white-space: nowrap;
}
.query-actions.show {
  position: relative;
  left: 0;
  width: 90px;
  transition: 0.2s;
  overflow: hidden;
}
.query-actions.hidden {
  position: relative;
  left: 45px;
  width: 0;
  transition: 0.2s;
  overflow: hidden;
}
</style>