<template>
  <!-- 风机原始数据统计表页面 -->
  <div class="AllPage">
    <!-- 页面头部 multiple多选属性 -->
    <div class="Head">
      <div class="select">
        <el-select v-model="changZhan" placeholder="全部场站">
          <el-option
            v-for="item in changZhanArray"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div>

      <div class="time">
        <span class="lable">开始日期：</span>
        <el-date-picker
          v-model="starttime"
          type="date"
          placeholder="选择日期"
          popper-class="date-select"
        >
        </el-date-picker>
      </div>
      <div class="time">
        <span class="lable">结束日期：</span>
        <el-date-picker
          v-model="endtime"
          type="date"
          placeholder="选择日期"
          popper-class="date-select"
        >
        </el-date-picker>
      </div>

      <!-- <el-date-picker
          v-model="planStartEnd"
          @change="changePick"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        >
        </el-date-picker> -->

      <el-button type="primary" @click="Select">查询</el-button>
    </div>

    <!-- 页面下部---统计表 -->
    <div class="table_all">
      <el-table
        :data="tableData"
        border
        :cell-class-name="tableCell"
        :header-row-class-name="tableRowClassName"
        height="740px"
        @cell-click="handle"
      >
        <el-table-column prop="wtId" label="风机编号" align="center" />
        <el-table-column
          :label="item.label"
          :align="item.align"
          v-for="(item, index) in tHeard"
          :key="index"
        >
          <template #default="scope">
            <span>{{
              `${
                scope.row[`${item.parts}_Value`]
                  ? scope.row[`${item.parts}_Value`] + "次"
                  : "---"
              }`
            }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      v-model="dialogVisible"
      width="80%"
      :before-close="dialogClose"
      custom-class="currentPdfDialogStyle"
    >
      <el-table
        :data="DataDetail"
        border
        :cell-class-name="tableCell"
        :header-row-class-name="tableRowClassName"
        height="600px"
        @row-click="handle"
      >
        <el-table-column prop="windturbineId" label="风机编号" align="center" />
        <el-table-column prop="alarmName" label="报警名称" align="center" />
        <el-table-column prop="alarmDate" label="时间" align="center" />
        <el-table-column prop="type" label="类型(触发/解除)" align="center">
          <template #default="scope">
            <!-- <span v-if="scope.row.type === 1">触发</span>
            <span v-if="scope.row.type === 0">解除</span> -->
            {{ scope.row.type === 1 ? "触发" : "解除" }}
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- <el-pagination
      small
      background
      layout="total, prev, pager, next"
      :current-page="pageParam.pagenum"
      :page-size="pageParam.pagesize"
      :total="pageParam.total"
      @current-change="changePage"
    ></el-pagination> -->
  </div>
</template>

<script>
import BASE from "@tools/basicTool.js";
import {
  getAlarmCountList,
  getDialogData,
  getStationinfoAll,
} from "/@/api/api.js";
import dayjs from "dayjs";
export default {
  data() {
    return {
      tableData: [],
      tHeard: [],
      changZhan: "",
      changZhanArray: [],
      starttime: dayjs(new Date(new Date() - 1 * 24 * 60 * 60 * 1000)).format(
        "YYYY-MM-DD"
      ),
      endtime: dayjs(new Date()).format("YYYY-MM-DD"),

      // pageParam: {
      //   pagenum: 1,
      //   pagesize: 10,
      //   total: 0,
      // },
      dialogVisible: false,
    };
  },

  created() {
    this.getTableList();
  },

  mounted() {
    this.$nextTick(() => {
      this.getChangZhan();
    });
  },

  methods: {
    //获取场站
    getChangZhan() {
      getStationinfoAll().then((res) => {
        this.changZhan = res.data[0].id;
        this.changZhanArray = res.data;
        // console.log('changzhang>>>>>>>>>>>',res)
        this.getTableList();
      });
    },
    // 查询按钮
    Select() {
      this.getTableList();
    },
    // 对时间进行包装
    getTime(date) {
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      return y + "-" + m + "-" + d + " ";
    },

    // 获取列表数据 调用接口
    getTableList() {
      getAlarmCountList({
        stationid: this.changZhan || "",
        starttime: dayjs(this.starttime).format("YYYY-MM-DD"),
        endtime: dayjs(this.endtime).format("YYYY-MM-DD"),
      }).then((res) => {
        console.log("列表数据》》》》》》》", res);
        if (res && res.status === 20000) {
          let tHeard = [];
          let tableData = [];

          this.tableData = res.data;

          res.data.forEach((pEle) => {
            for (let wtId in pEle) {
              let wtItem = tableData.find((tableItem) => {
                return wtId === tableItem.wtId;
              });
              !wtItem && (wtItem = { wtId });
              pEle[wtId].forEach((cEle) => {
                let someRes = tHeard.some((findEle) => {
                  return findEle.parts === cEle.parts;
                });

                if (!someRes) {
                  tHeard.push({
                    parts: cEle.parts,
                    label: cEle.partsName,
                    align: "center",
                    prop: `${cEle.parts}_Value`,
                  });
                }

                wtItem[`${cEle.parts}_Value`] = wtItem[`${cEle.parts}_Value`]
                  ? wtItem[`${cEle.parts}_Value`] + cEle.count
                  : cEle.count;
              });
              tableData.push(wtItem);
            }
          });

          this.tHeard = tHeard;
          this.tableData = tableData;
        }
      });
    },

    // 单元格点击事件
    handle(row, column, event, cell) {
      let parts =
        this.tHeard.find((ele) => {
          return ele.label === column.label;
        })?.parts || "";
      getDialogData({
        stationid: this.changZhan || "",
        starttime: dayjs(this.starttime).format("YYYY-MM-DD"),
        endtime: dayjs(this.endtime).format("YYYY-MM-DD"),
        windturbineid: row.wtId,
        parts,
      }).then((res) => {
        if (res && res.status === 20000) {
          console.log("弹窗数据》》》》》》》", res);

          if (res.data.length) {
            if (column.property !== "wtId") {
              this.DataDetail = res.data;
              let tableArr = [];
              res.data.forEach((currentItem) => {
                // if (currentItem.type === 1) {
                //   currentItem.type = '触发'
                // }
                // else if (currentItem.type === 0) {
                //   currentItem.type = '解除'
                // }
                tableArr.push(currentItem);
              });

              this.dialogVisible = true;
            }
          } else {
            BASE.showMsg({
              msg: "所选风机暂无数据",
            });
          }
        }
      });
    },

    // changePage(val) {
    //   this.pageParam.pagenum = val;
    //   this.getTableList();
    // },
  },
};
</script>

<style lang="less" scoped>
.AllPage {
  .Head {
    display: flex;
    width: 100%;
    height: 5%;
    margin: 5px 0;
    .select {
      margin-right: 15px;
    }
    .time {
      margin-right: 15px;
    }
  }
}
</style>

<style lang="less" >
.table_all {
  .el-table {
    .el-table__row {
      td {
        cursor: pointer;

        &:first-child {
          cursor: auto;
        }
      }
    }
  }
}
</style>