<template>
  <!-- 诊断报告页面 -->
  <div class="report">
    <div class="search">
      <el-select v-model="changZhan"  size="large" clearable placeholder="场站名称" @change="getTableList">
        <el-option
          v-for="item in changZhanArray"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </div>
    <div class="report_table">
      <el-table
        :data="dataList"
        border
        header-cell-name="table-header"
        :highlight-current-row="true"
        height="600px"
      >
        <el-table-column
          label="诊断报告名称"
          align="center"
          prop="reportName"
          min-width="100"
        />
        <el-table-column
          label="报告日期"
          align="center"
          prop="reportDate"
          min-width="80"
        />
        <el-table-column
          label="风场编号"
          align="center"
          prop="stationId"
          min-width="50"
        />
        <el-table-column
          label="风场名称"
          align="center"
          prop="stationName"
          min-width="100"
        />
        <el-table-column
          label="起始时间"
          align="center"
          prop="statStartDate"
          min-width="100"
        />
        <el-table-column
          label="结束时间"
          align="center"
          prop="statEndDate"
          min-width="100"
        />
        <el-table-column
          label="操作"
          align="center"
          prop="operation"
          min-width="50"
        >
          <template #default="scope">
            <el-button plain @click="Report(scope.row)"
              >查看报告</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <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>
    <!-- dialog对话框 -->
    <el-dialog
      v-model="dialogVisible"
      width="80%"
      :before-close="dialogClose"
      custom-class="currentPdfDialogStyle"
    >
      <el-button style="margin-left: 20px" type="danger" @click="savePdf"
        >导出(PDF)</el-button
      >
      <div class="pdfDom">
        <!-- 标题 -->
        <div class="title" style="font-size: xx-large; text-align: center">
          {{ reportName }}
        </div>
        <!-- 内容 -->
        <el-descriptions size="large" :column="1" >
          <el-descriptions-item label="风场名称：">{{
            stationName
          }}</el-descriptions-item>
          <el-descriptions-item label="风机型号：">{{
            model
          }}</el-descriptions-item>
          <el-descriptions-item label="报告日期：">{{
            reportDate
          }}</el-descriptions-item>
          <el-descriptions-item label="分析时间："
            >{{ statStartDate }} 至 {{ statEndDate }}</el-descriptions-item
          >
          <el-descriptions-item label="分析规则：">{{
            ruleName
          }}</el-descriptions-item>
        </el-descriptions>
        <div class="ruleDescBox">
          <p
            class="ruleDesc"
            v-for="(item, index) in ruleDescArray"
            :key="index"
          >
            {{ index + 1 }}.&nbsp;{{ item }}
          </p>
        </div>
        <!-- 表1 -->
        <div class="ech1">
          <div style="margin: 12px 0 20px 0; font-weight: bolder;">
            根据以上规则上周表现最差的风机：
          </div>
          <el-table
            :data="tableData"
            style="width: 100%"
            :header-row-class-name="tableRowClassName"
          >
            <el-table-column prop="ruleName" label="风机编号" align="center" />
            <el-table-column
              :label="item.label"
              :align="item.align"
              v-for="(item, index) in tHeard"
              :key="index"
            >
              <el-table-column
                :prop="`${item.id}Count`"
                label="次数"
                align="center"
              />
              <el-table-column
                :prop="`${item.id}KeepTime`"
                label="时长(分钟)"
                align="center"
              />
            </el-table-column>
          </el-table>

        </div>

        <!-- 结论 -->
        <div>
          <div style="margin: 12px 0 20px 0; font-weight: bolder">结论：</div>
          <div class="conclusionBox">
            <div
              class="resultBox"
              v-for="(pItem, pIndex) in conclusionArray"
              :key="pIndex"
            >
              <p
                class="resultItem"
                v-for="(cItem, cIndex) in pItem"
                :key="cIndex"
                v-show="cItem"
              >
              <template v-if="cItem.split(':').length > 1">
                <span style="font-weight: 700;">{{cItem.split(':')[0]}}:</span>
                <span>{{ cItem.split(':')[1] }}</span>
              </template>
              <pre v-else>{{ cItem }}</pre>
              </p>
            </div>
          </div>

          <!-- 表2 -->
          <div class="ech2" v-if="showCompared">
            <div style="margin: 12px 0 20px 0; font-weight: bolder">
              本周与上周对比：
            </div>
            <el-table
              :data="tableDataTwo"
              style="width: 100%"
              :header-row-class-name="tableRowClassName"
            >
              <el-table-column
                prop="ruleName"
                label="风机编号"
                align="center"
              />
              <el-table-column
                :label="item.label"
                :align="item.align"
                v-for="(item, index) in tHeardTwo"
                :key="index"
              >
                <el-table-column label="本周" align="center"
                  ><el-table-column
                    :prop="`${item.id}BzCount`"
                    label="次数"
                    align="center" />
                  <el-table-column
                    :prop="`${item.id}BzKeepTime`"
                    label="时长(分钟)"
                    align="center"
                /></el-table-column>
                <el-table-column label="上周" align="center"
                  ><el-table-column
                    :prop="`${item.id}SzCount`"
                    label="次数"
                    align="center" />
                  <el-table-column
                    :prop="`${item.id}SzKeepTime`"
                    label="时长(分钟)"
                    align="center"
                /></el-table-column>
              </el-table-column>
            </el-table>
            <!-- <div style="height: 500px" height="100%" id="ChartB"></div> -->
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getStationinfoAll, // 获取所有风场
  getList, // 获取 table 数据
  getReportDetail,
} from "/@/api/api.js";
import Get_PDF from "/@/tools/htmlToPdf.js";
import dayjs from "dayjs";
import * as echarts from "echarts";
import { ElNotification, ElMessage, ElMessageBox } from "element-plus";
export default {
  data() {
    return {
      showCompared: false,
      model: "",
      dataList: [],
      dataListOld: [],
      chatList: [],
      handleClickTab: "",
      dialogVisible: false,
      dialogTableVisible: false,
      tHeard: [],
      tHeardTwo: [],
      tableData: [],
      tableDataTwo: [],
      ruleDescArray: [],
      conclusionArray: [],
      tableRowClassName: "cuttentTableStyle",

      changZhan: "",
      changZhanArray: [],
      pageParam: {
        pagenum: 1,
        pagesize: 10,
        total: 0,
      },
    };
  },

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

  methods: {
    //获取场站
    getChangZhan() {
      getStationinfoAll().then((res) => {
        // this.changZhan = res[0].id;

        this.changZhanArray = res.data;

        // console.log('changzhang>>>>>>>>>>>',this.changZhanArray)

        this.getTableList();
      });
    },
    // 获取列表数据 调用接口
    getTableList() {
      getList({
        pagenum: this.pageParam.pagenum,
        pagesize: this.pageParam.pagesize,
        stationId: this.changZhan,
      }).then((res) => {
        // console.log('res.data》》》》》》》》》》》》',res.data)
        this.dataList = res.data.records;
        this.pageParam.total = res.data.total;
      });
    },

    changePage(val) {
      this.pageParam.pagenum = val;
      this.getTableList();
    },

    // 导出PDF
    savePdf() {
      Get_PDF.downloadPDF(document.querySelector(".pdfDom"), "诊断报告");
    },

    getData(id) {
      getReportDetail(id).then((jsonData) => {
        if (jsonData.status === 20000) {
          let tHeard = [];
          let tHeardTwo = [];
          let tableData = [];
          let tableDataTwo = [];
          let ruleDescArray = [];
          let conclusionArray = [];
          this.showCompared = false;

          var newData = jsonData.data.reportWindturbineInfoList.find(
            (item) => item.windturbineId === "全场平均"
          ); //返回对象
          // console.log(255, newData);
          tHeard.push({
            id: newData.id,
            label: newData.windturbineId,
            align: "center",
          });

          jsonData.data.reportWindturbineInfoList.forEach((cEle, index) => {
            // currentItem.earlyReportWindturbine.step = currentItem.step;
            // cEle.model = cEle.model
            if (index === 0) {
              cEle.alarmInfoList.forEach((cEle) => {
                tableData.push({
                  ruleName: cEle.ruleName,
                });
                tableDataTwo.push({
                  ruleName: cEle.ruleName,
                });
              });
            }
            if (cEle.compared) {
              tHeardTwo.push({
                id: cEle.id,
                label: cEle.windturbineId,
                align: "center",
              });
            } else {
              if (cEle.windturbineId !== "全场平均") {
                tHeard.push({
                  id: cEle.id,
                  label: cEle.windturbineId,
                  align: "center",
                });
              }
            }
            
          });

          // console.log(587, tHeard);
          jsonData.data.reportWindturbineInfoList.forEach((pEle, pIndex) => {
            // 如果compared为空，则将数据渲染到表1,不为空则渲染到表2
            if (pEle.compared) {
              this.showCompared = true;
            }
            if (pEle.compared) {
              pEle.alarmInfoList.forEach((cEle, cIndex) => {
                // 表2数据时长与次数渲染  本周
                tableDataTwo[cIndex][`${pEle.id}BzCount`] = cEle.count;
                tableDataTwo[cIndex][`${pEle.id}BzKeepTime`] = cEle.keepTime;
              });

              pEle.compareAlarmInfoList.forEach((element, elementIndex) => {
                // 表2数据时长与次数渲染  上周
                tableDataTwo[elementIndex][`${pEle.id}SzCount`] = element.count;
                tableDataTwo[elementIndex][`${pEle.id}SzKeepTime`] =
                  element.keepTime;
              });

              //   this.showCompared = true;
            } else {
              pEle.alarmInfoList.forEach((cEle, cIndex) => {
                // 表1数据时长与次数渲染
                tableData[cIndex][`${pEle.id}Count`] = cEle.count;
                tableData[cIndex][`${pEle.id}KeepTime`] = cEle.keepTime;
                // this.showCompared = false;
                if (!pIndex) {
                  ruleDescArray.push(
                    `${cEle.ruleName}：${cEle.ruleDescription}`
                  );
                }
              });
            }
            // 结论数据渲染
            if (pEle.conclusion) {
              pEle.conclusion &&
                conclusionArray.push(pEle.conclusion.split("\n"));
            }
            this.tHeard = tHeard;
            this.tHeardTwo = tHeardTwo;
            this.tableData = tableData;
            this.tableDataTwo = tableDataTwo;
            this.ruleDescArray = ruleDescArray;
            this.statStartDate = jsonData.data.statStartDate;
            this.statEndDate = jsonData.data.statEndDate;
            this.conclusionArray = conclusionArray;
            this.reportDate = jsonData.data.reportDate;
            this.reportName = jsonData.data.reportName;
            this.stationName = jsonData.data.stationName;
            this.model = jsonData.data.reportWindturbineInfoList[0].model;
          });

          this.dialogVisible = true;
        } else {
          this.$message({
            type: "info",
            message: "请求失败",
          });
        }
      });
    },

    //点击查看诊断报告
    async Report(item) {
      this.getData(item.id);
    },

    // getData获取表格数据，并进行排序
    // async getReportData() {
    //   const data = await earlyreport_info({ id: "" });

    //   data.sort((a, b) => {
    //     return b.reportDate - a.reportDate;
    //   });
    //   this.dataList = data;
    // },

    // dialog弹框关闭
    dialogClose(done) {
      done();
    },
  },
};
</script>

<style lang="less" >
.report {
  .search {
    display: flex;
    width: 100%;
    height: 3%;
    margin: 10px 0;
  }
  .ruleDescBox {
    margin: 12px 0 20px 0;
    .ruleDesc {
      text-indent: 2em;
      margin-bottom: 8px;
    }
  }
  .conclusionBox {
    margin: 12px 0 20px 0;
    .resultBox {
      border: 1px solid #ccc;
      border-radius: 4px;
      padding: 10px;
      .resultItem {
        text-indent: 2em;
        margin-bottom: 8px;
      }
    }
  }

  .cuttentTableStyle th {
    background: rgb(189, 215, 238) !important;
    color: #000;
    font-weight: 700;
  }

  .ech1,
  .ech2 {
    .el-table--border,
    .el-table--group {
      border: 1px solid #000;
    }
    .el-table td,
    .el-table th.is-leaf {
      border-bottom: 1px solid #000;
    }
    .el-table--border td,
    .el-table--border th {
      border-right: 1px solid #000;
    }
    .el-table--border th {
      border-bottom: 1px solid #000;
    }
  }

  .currentPdfDialogStyle {
    .el-dialog__body {
      padding: 0;
    }
  }

  .pdfDom {
    padding: 30px 20px;
  }

  .el-dialog__body {
    font-size: 16px;
  }
  .el-descriptions__body {
    font-size: 16px;
  }
  .el-table__body {
    font-size: 14px;
  }
}
</style>