<template>
  <!-- 巡检计划页面 -->
  <div class="report">
    <div class="search">
      <div class="step">
        <el-select v-model="stepNum" clearable size="large" style="width: 150px" placeholder="阶段">
          <el-option
            v-for="item in stageNum"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
      </div>

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

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

    </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"
          min-width="80"
        >
            <template #default="scope">
                <span>{{scope.row.earlyReport.reportName}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="风场名称"
          align="center"
          min-width="60"
        >
            <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="评审时间"
          prop="verifyTime"
          align="center"
          min-width="100"
        />
        <el-table-column
          label="当前节点"
          align="center"
          prop="step"
          min-width="60"
        >
        </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
        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>
        <!-- 表 -->
        <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"
                disabled
                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"
              disabled
              :autosize="{ minRows: 3, maxRows: 10 }"
              type="textarea"
              placeholder="请输入评审建议"
              />
      </div>

      <!-- 计划时间 -->
        <div style="display:flex;margin-top:20px">
          <div class="idea" style="margin: 12px 0 20px 0; font-weight: bolder;">计划时间：</div>
          <div class="pull">
                <el-date-picker
                    v-model="planStartEndDia"
                    :disabled="showReportResult"
                    type="datetimerange"
                    range-separator="至"
                    :default-time="defaultTime"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间">
                </el-date-picker>
          </div>
        </div>

        <!-- 是否符合报告 -->
        <div style="display:flex;margin-top:10pxc" v-if="showReportResult">
            <div class="idea" style="margin: 12px 0 20px 0; font-weight: bolder;">是否符合报告：</div>
            <div class="pull">
                <el-select
                    v-model="isTrueReport"
                    clearable
                    :disabled="disabledRep"
                    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 v-if="showReportResult">
            <div class="idea" style="margin: 12px 0 20px 0; font-weight: bolder;">检查结果反馈</div>
            <div class="input">
                    <el-input
                    v-model="textareaTwo"
                    :disabled="disabledRep"
                    :autosize="{ minRows: 3, maxRows: 10 }"
                    type="textarea"
                    placeholder="请输入检查结果反馈"
                    />
            </div>
        </div>

        
        <div class="butt">
            <el-button type="primary" @click="submitForm" :disabled="step === '已巡检' ? true : false">提交</el-button>
            <el-button @click="dialogVisible=false">取消</el-button>
        </div>

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

<script>
import {
  fetchStationList, // 获取所有风场
  getreportReviewList,
  postSubmitReport,
  getCheckList,
} 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 {
      step: "",
      verifyTime: "",
      stationName: "",
      rowData: {},
      windturbineId: "",
      model: "",
      reportDate: "",
      statStartDate: "",
      statEndDate: "",
      ruleName: "",
      conclusion: [],
      dataList: [],
      allDataList: [],
      chatList: [],
      handleClickTab: "",
      dialogVisible: false,
      // disabled: false,
      tHeard: [],
      tableData: [],
      ruleDescArray: [],
      tableRowClassName: "cuttentTableStyle",
      changZhan: "",
      changZhanArray: [],
      pageParam: {
        pagenum: 1,
        pagesize: 10,
        total: 0,
      },
      isEnabled: [
        {
          id: 0,
          name: "否",
        },
        {
          id: 1,
          name: "是",
        },
      ],
      enabled: null,
      textarea: "",
      textValidateForm: {
        textarea: "",
      },

      stageNum: [],
      stepNum: null,
      planStartEnd: [],
      planStartEndDia: [],
      defaultTime: [
        new Date(2000, 1, 1, 12, 0, 0),
        new Date(2000, 2, 1, 8, 0, 0),
      ], // '12:00:00', '08:00:00'
      isTrueReport: null,
      textareaTwo: "",
      showReportResult: false,
      disabledRep: false,
    };
  },
  created() {
    this.getTableList();
    this.stageNum = [
      // {
      //   name: "待审核",
      //   value: 1,
      // },
      {
        name: "已审核",
        value: 2,
      },
      {
        name: "未计划",
        value: 3,
      },
      {
        name: "已计划",
        value: 4,
      },
      {
        name: "未巡检",
        value: 5,
      },
      {
        name: "已巡检",
        value: 6,
      },
    ];
  },

  methods: {
    // 提交评审建议
    submitForm() {
      let rowobj = {};

      this.allDataList.forEach((item) => {
        if (item.earlyReportWindturbine.id === this.rowData.id) {
          rowobj = item;
          // console.log('rowobj==============',rowobj);
        }
      });
      if (!this.showReportResult) {
        if (this.planStartEndDia.length > 0) {
          rowobj.planStartTime = this.getTime(this.planStartEndDia[0]);
          rowobj.planEndTime = this.getTime(this.planStartEndDia[1]);
          this.submitReportNe(rowobj);
        } else {
          ElMessage.error("计划时间不能为空！");
        }
      } else {
        if (this.isTrueReport === 0 || this.isTrueReport === 1) {
          rowobj.accordreport = this.isTrueReport === 0 ? false : true;
          if (this.textareaTwo) {
            rowobj.inspectView = this.textareaTwo;
            rowobj.inspectTime = this.getTime(new Date());

            this.submitReportNe(rowobj);
          } else {
            ElMessage.error("检查结果反馈不能为空！");
          }
        } else {
          ElMessage.error("是否符合报告不能为空！");
        }
      }
    },
    // 更新列表
    submitReportNe(obj) {
      postSubmitReport(obj).then((res) => {
        if (res.msg === "更新成功") {
          this.dialogVisible = false;
          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;
      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;
    },
    changePick(val) {
      console.log(this.getTime(new Date(val[0])));
    },
    // 查询按钮
    Select() {
      let params = {
        pagenum: this.pageParam.pagenum,
        pagesize: this.pageParam.pagesize,
        step: this.stepNum ? this.stepNum : "",
        startTime:
          this.planStartEnd.length > 0
            ? this.getTime(new Date(this.planStartEnd[0]))
            : "",
        endTime:
          this.planStartEnd.length > 0
            ? this.getTime(new Date(this.planStartEnd[1]))
            : "",
      };
      this.getTableList(params);
    },
    // 获取列表数据 调用接口
    getTableList(values) {
      let params = {
        pagenum: this.pageParam.pagenum,
        pagesize: this.pageParam.pagesize,
      };
      if (values) {
        params.step = values.step;
        params.startTime = values.startTime;
        params.endTime = values.endTime;
      }
      getCheckList(params).then((res) => {
        // console.log(111, res);
        this.showReportResult = false;
        if (res && res.status === 20000) {
          this.pageParam.total = res.data.total;
          if (res.data.records) {
            this.allDataList = res.data.records;
            // console.log(666, this.allDataList);
            let tableArr = [];
            res.data.records.forEach((currentItem) => {
              currentItem.earlyReportWindturbine.step = currentItem.step;
              currentItem.earlyReportWindturbine.verifyTime =
                currentItem.verifyTime;
              tableArr.push(currentItem.earlyReportWindturbine);
              if (
                currentItem.planStartTime !== null &&
                currentItem.planEndTime !== null
              ) {
                this.showReportResult = true;
              }
            });
            this.dataList = tableArr;

            // console.log(222,tableArr)
          }
        }
      });
    },

    changePage(val) {
      this.pageParam.pagenum = val;
      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) => {
        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;
      this.step = currentItem.step;
      // console.log("time=====>>>", currentItem);
      this.planStartEndDia = [];
      this.textareaTwo = "";
      // console.log(">>>>>>>>>>>", currentItem);
      this.allDataList.forEach((item) => {
        if (item.earlyReportWindturbine.id === currentItem.id) {
          this.enabled = item.verifyResult ? 1 : 0;
          this.textarea = item.verifyView;
          if (item.planEndTime !== null && item.planStartTime !== null) {
            this.showReportResult = true;
            this.planStartEndDia = [
              new Date(item.planStartTime),
              new Date(item.planEndTime),
            ];
          } else {
            this.showReportResult = false;
          }

          if (item.accordreport) {
            this.isTrueReport = item.accordreport ? 1 : 0;
          }
          if (item.inspectView) {
            this.textareaTwo = item.inspectView;
          }
          if (item.inspectView !== null) {
            this.disabledRep = true;
          } else {
            this.disabledRep = false;
          }
        }
      });

      this.dialogVisible = true;
      this.stationName = currentItem.earlyReport.stationName;
      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);
    },

    // 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;
    .step {
      margin-right: 10px;
      .el-input__inner {
        height: 32px !important;
      }
      .el-input__suffix {
        .el-input__icon {
          height: 36px;
        }
      }
    }
    .windturbineId {
      margin-right: 10px;
      .el-input__inner {
        height: 32px !important;
      }
      .el-input__suffix {
        .el-input__icon {
          height: 36px;
        }
      }
    }
    .planTime {
      margin-right: 10px;
    }
  }
  .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 {
    .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: 10px;
  }
}
</style>