<template>
  <div class="stopQueryBox">
    <el-card>
      <el-space wrap>
        <div>
          <span>风场：</span>
          <el-select
            v-model="wpId"
            size="mini"
            style="width: 150px"
            placeholder="全部"
            popper-class="select"
            @change="
              () => {
                wtId = '';
                getWtList();
              }
            "
          >
            <el-option
              v-for="item in wpArray"
              :key="item.id"
              :value="item.id"
              :label="item.aname"
            >
            </el-option>
          </el-select>
        </div>
        <div>
          <span>风机：</span>
          <el-select
            v-model="wtId"
            clearable
            size="mini"
            style="width: 150px"
            placeholder="全部"
            popper-class="select"
            @change="() => {}"
          >
            <el-option
              v-for="item in wtArray"
              :key="item.nemCode"
              :value="item.nemCode"
              :label="item.name"
            >
            </el-option>
          </el-select>
        </div>
        <div>
          <span>停机类型：</span>
          <el-select
            v-model="type"
            size="mini"
            style="width: 150px"
            placeholder="全部"
            popper-class="select"
            @change="() => {}"
          >
            <el-option value="gz" label="故障" />
            <el-option value="wh" label="检修" />
          </el-select>
        </div>
        <div>
          <span>故障描述：</span>
          <el-input
            v-model="description"
            style="width: 150px"
            size="mini"
            clearable
          ></el-input>
        </div>
        <div>
          <span>日期区间：</span>
          <el-date-picker
            v-model="dateRange"
            size="mini"
            type="datetimerange"
            range-separator="-"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            @change="getTableData"
          >
          </el-date-picker>
        </div>
        <el-button type="primary" size="mini" @click="getTableData"
          >查询</el-button
        >
      </el-space>
    </el-card>
    <div class="table-wrapper">
      <el-table
        :data="tableData"
        height="calc(100% - 35px - 10px)"
        style="width: 100%"
        border
        stripe
      >
        <el-table-column
          :label="item.label"
          :prop="item.prop"
          show-overflow-tooltip
          header-align="center"
          align="center"
          v-for="(item, index) in tHeader"
          :key="index"
        >
          <template #default="scope">
            <span>
              {{ scope.row[item.prop] }}
            </span>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-wrapper">
        <el-pagination
          background
          layout="total, prev, pager, next"
          hide-on-single-page
          :current-page="pageNum"
          :page-size="pageSize"
          :total="total"
          @current-change="currentChange"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import dayJS from "dayjs";
import {
  getWpList,
  fetchWindturbineList,
  getStopQueryTableData,
} from "/@/api/api.js";

export default {
  data() {
    return {
      wpId: "",
      wpArray: [],
      wtId: "",
      wtArray: [],
      dateRange: [],
      type: "gz",
      description: "",
      pageNum: 1,
      pageSize: 15,
      total: 0,
      tableData: [],
      tHeader: [
        {
          label: "设备编号",
          prop: "code",
        },
        {
          label: "停机时间",
          prop: "stopTimeName",
        },
        {
          label: "恢复启动时间",
          prop: "startTimeName",
        },
        {
          label: "停机小时数",
          prop: "stopHours",
        },
        {
          label: "损失电量",
          prop: "lossPower",
        },
        {
          label: "报警编号",
          prop: "warningId",
        },
        {
          label: "处理方式",
          prop: "handleWay",
        },
        {
          label: "故障现象",
          prop: "faultView",
        },
        {
          label: "故障类型",
          prop: "typeName",
        },
      ],
    };
  },

  created() {
    this.dateRange = [
      dayJS().subtract(7, "day").format("YYYY-MM-DD HH:mm:ss"),
      dayJS().format("YYYY-MM-DD HH:mm:ss"),
    ];
    this.getWpList();
  },

  methods: {
    async getWpList() {
      const { data } = await getWpList("windturbine");
      this.wpId = data?.[0]?.id || "";
      this.wpArray = data || [];
      this.getWtList();
    },

    async getWtList() {
      const { data } = await fetchWindturbineList(this.wpId);
      this.wtArray = data || [];
      this.getTableData();
    },

    async getTableData() {
      const { data } = await getStopQueryTableData({
        wpId: this.wpId,
        wtId: this.wtId,
        type: this.type,
        description: this.description,
        begin: this.dateRange?.[0] || "",
        end: this.dateRange?.[1] || "",
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      });

      data?.records?.forEach((ele) => {
        ele.stopTimeName = dayJS(ele.stopTime).format("YYYY-MM-DD HH:mm:ss");
        ele.startTimeName = ele.startTime
          ? dayJS(ele.startTime).format("YYYY-MM-DD HH:mm:ss")
          : "";
        ele.typeName = ele.stopTypeId === "gz" ? "故障" : "检修";
      });

      this.tableData = data?.records || [];
      this.total = data.total || 0;
    },

    currentChange(pageNum) {
      this.pageNum = pageNum;
      this.getTableData();
    },
  },
};
</script>

<style  lang="scss" scoped>
.stopQueryBox {
  height: 100%;
  .table-wrapper {
    height: calc(100% - 70px - 50px);
    background-color: #fff;
    margin-top: 10px;
    padding: 20px;
    .pagination-wrapper :deep {
      text-align: right;
      margin-top: 10px;
      .el-icon {
        width: unset;
      }
    }
  }
}
</style>