<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="750px">
        <el-table-column
          label="诊断报告名称"
          align="center"
          min-width="100"
        >
            <template #default="scope">
                <span>{{scope.row.earlyReport.reportName}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="风场名称"
          align="center"
          min-width="100"
        >
            <template #default="scope">
                <span>{{scope.row.earlyReport.stationName}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="风机编号"
          align="center"
          prop="windturbineId"
          min-width="50"
        />
        <el-table-column
          label="风机型号"
          align="center"
          prop="model"
          min-width="80"
        />
        <el-table-column
          label="报告日期"
          align="center"
          min-width="100"
        >
            <template #default="scope">
                <span>{{scope.row.earlyReport.reportDate}}</span>
          </template>
        </el-table-column>
        <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
        @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>
        <!-- 表 -->
        <div class="ech1">
          <el-table
            class="table"
            :data="tableData"
            style="width: 100%"
            border
            :header-row-class-name="tableRowClassName"
            :span-method="objectSpanMethod"
          >
          <el-table-column prop="windturbineId" label="风机编号" align="center" />
          <el-table-column prop="type" label="单位" align="center" />
            <el-table-column
              :label="item.label"
              :align="item.align"
              v-for="(item, index) in tHeard"
              :key="index"
              :prop="item.prop"
            />
          </el-table>

        </div>

        <!-- 结论 -->
        <div>
          <div style="margin: 12px 0 20px 0; font-weight: bolder">结论：</div>
          <div class="conclusionBox">
            <div
              class="resultBox"
              v-for="pItem in conclusion"
              :key="pItem"
            >
              <p
                class="resultItem"
                v-for="cItem in pItem"
                :key="cItem"
                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>
        </div>
        <!-- 下拉框 -->
        <div style="display:flex">
          <div class="idea" style="margin: 12px 0 20px 0; font-weight: bolder;">是否巡检：</div>
          <div class="pull">
              <el-select
                v-model="enabled"
                clearable
                class="mr10"
                style="width: 150px"
                placeholder="请选择"
                popper-class="select"
                >
                <el-option
                  v-for="item in isEnabled"
                  :key="item.id"
                  :value="item.id"
                  :label="item.name"
                ></el-option>
              </el-select>
          </div>
        </div>

        <!-- 评审建议 -->
      <div class="idea" style="margin: 12px 0 20px 0; font-weight: bolder;">评审建议</div>
      <div class="input">
      
            <el-input
              v-model="textarea"
              :autosize="{ minRows: 3, maxRows: 10 }"
              type="textarea"
              placeholder="请输入评审建议"
              />
            <div class="butt">
              <el-button type="primary" @click="submitForm" >提交</el-button>
              <el-button @click="dialogVisible=false">取消</el-button>
            </div>
            
        
      </div>

    </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getStationinfoAll, // 获取所有风场
  getreportReviewList,
  postSubmitReport,
} 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 {
      stationId:'',
      stationName: "",
      rowData: {},
      windturbineId: "",
      model: "",
      reportDate: "",
      statStartDate: "",
      statEndDate: "",
      ruleName: "",
      conclusion: [],
      dataList: [],
      allDataList: [],
      chatList: [],
      handleClickTab: "",
      dialogVisible: false,
      tHeard: [],
      tableData: [],
      ruleDescArray: [],
      tableRowClassName: "cuttentTableStyle",
      changZhan: "",
      changZhanArray: [],
      // pageParam: {
      //   pagenum: 1,
      //   pagesize: 10,
      // },
      isEnabled: [
        {
          id: 0,
          name: "否",
        },
        {
          id: 1,
          name: "是",
        },
      ],
      enabled: null,
      textarea: "",
      textValidateForm: {
        textarea: "",
      },
    };
  },
  created() {
    this.getTableList();
  },

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

  methods: {
    // 提交评审建议
    submitForm() {
      const that = this;
      if (this.enabled === 0 || this.enabled === 1) {
        if (this.textarea) {
          let obj = {};
          let res = "";
          this.allDataList.forEach((item) => {
            if (item.earlyReportWindturbine.id === this.rowData.id) {
              item.verifyTime = this.getTime(new Date());
              item.verifyView = this.textarea;
              item.verifyResult = this.enabled === 0 ? false : true;
              obj = item;
            }
          });
          console.log(obj);
          // if (res) {
          this.$confirm("是否确认提交评审建议?", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              postSubmitReport(obj).then((res) => {
                this.$message({
                  type: "success",
                  message: "提交成功!",
                });
                if (res.status === 20000) {
                  this.dialogVisible = false;
                  this.getTableList();
                }
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消提交",
              });
            });
        }
      } else {
        ElMessage.error("评审建议或巡检选择不能为空！");
      }
    },
    // 封装时间
    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;
      var h = date.getHours();
      h = h < 10 ? "0" + h : h;
      var minute = date.getMinutes();
      minute = minute < 10 ? "0" + minute : minute;
      var second = date.getSeconds();
      second = second < 10 ? "0" + second : second;
      return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
    },
    // 场站选择下拉框
    // selectChange(val) {
    //   this.getTableList(val);
    // },
    //获取场站
    getChangZhan() {
      getStationinfoAll().then((res) => {
        // this.changZhan = res[0].id;
        this.changZhanArray = res.data;
        // console.log('changzhang>>>>>>>>>>>',this.changZhan)
        this.getTableList();
      });
    },
    // 获取列表数据 调用接口
    getTableList(val) {
      getreportReviewList(val).then((res) => {
        // console.log(111, res);
        if (res && res.status === 20000) {
          if (res.data) {
            this.allDataList = res.data;
            let tableArr = [];
            res.data.forEach((currentItem) => {
              tableArr.push(currentItem.earlyReportWindturbine);
            });
            this.dataList = tableArr;
            
            // console.log(222,tableArr)
          }
        }
      });
    },

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

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

    getData(jsonData) {
      // console.log(333, jsonData);
      const model = jsonData.model;
      const windturbineId = jsonData.windturbineId;

      let tHeard = [];

      let tableData = [
        {
          windturbineId,
          type: "次数",
        },
        {
          windturbineId,
          type: "时长(分钟)",
        },
      ];
      let ruleDescArray = [];

      jsonData.alarmInfoList.forEach((ele, Index) => {
        tHeard.push({
          label: ele.ruleName,
          align: "center",
          prop: `${ele.ruleName}_value`,
        });
        // console.log(222,ele);
        ruleDescArray.push(`${ele.ruleName}：${ele.ruleDescription}`);
      });

      const propArray = ["count", "keepTime"];

      tableData.forEach((pEle, pIndex) => {
        jsonData.alarmInfoList.forEach((cEle) => {
          tableData[pIndex][`${cEle.ruleName}_value`] = cEle[propArray[pIndex]];
        });
      });

      // 结论数据渲染
      this.conclusion = [];
      this.conclusion.push(jsonData.conclusion.split("\n"));

      this.tHeard = tHeard;
      this.tableData = tableData;
      this.ruleDescArray = ruleDescArray;
      this.dialogVisible = true;
    },

    //点击查看诊断报告
    Report(currentItem) {
      this.rowData = currentItem;
      // console.log(">>>>>>>>>>>", currentItem);

      this.dialogVisible = true;
      this.stationName = currentItem.earlyReport.stationName;
      this.stationId = currentItem.earlyReport.stationId;
      this.model = currentItem.model;
      this.reportDate = currentItem.earlyReport.reportDate;
      this.statStartDate = currentItem.earlyReport.statStartDate;
      this.statEndDate = currentItem.earlyReport.statEndDate;
      this.reportName = currentItem.earlyReport.reportName;
      this.ruleName = currentItem.alarmInfoList.ruleName;

      this.getData(currentItem);
    },

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

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

    // dialog弹框关闭
    dialogClose(done) {
      done();
    },
    // 合并单元格
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
  },
};
</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;
      }
    }
  }
  h .cuttentTableStyle th {
    background: rgb(189, 215, 238) !important;
    color: #000;
    font-weight: 700;
  }

  .ech1 {
    .table {
      border: 1px solid #000;
      .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;
  }
  .text {
    width: 107%;
    margin-left: -7%;
  }
  .butt {
    margin-left: 35%;
    .el-button {
      margin-left: 10%;
      margin-top: 3%;
    }
  }

  .pull {
    margin-top: 0.6%;
  }
}
</style>