<template>
  <div class="hwapprovals-wrapper">
    <div class="hwapprovals-find-tools-wrapper">
      <div class="hwapprovals-companyName">
        <h2>{{ companyName }}</h2>
        <el-divider></el-divider>
      </div>
      <div class="hwapprovals-find-item">
        <div class="hwapprovals-title">危险作业名称:</div>
        <div>
          <el-input
            v-model="dangerName"
            placeholder="请输入危险作业名称"
          ></el-input>
        </div>
      </div>
      <div class="hwapprovals-find-item">
        <div class="hwapprovals-title">上传日期:</div>
        <div>
          <el-date-picker
            v-model="uploadDate"
            type="daterange"
            range-separator="至"
            start-placeholder="上传开始日期"
            end-placeholder="上传结束日期"
          >
          </el-date-picker>
        </div>
      </div>
      <div class="hwapprovals-find-item">
        <div class="hwapprovals-title">作业时间:</div>
        <div>
          <el-date-picker
            v-model="validTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="有效开始日期"
            end-placeholder="有效结束日期"
          >
          </el-date-picker>
        </div>
      </div>
      <div class="hwapprovals-find-btn">
        <el-button @click="findDangerjobs" type="primary">查找</el-button>
      </div>
    </div>
    <div class="hwapprovals-find-tools-wrapper hwapprovals-list">
      <div class="hwapprovalslist-table-wrapper">
        <el-table :data="hwapprovalslistTableData" border style="width: 100%">
          <el-table-column
            prop="jobName"
            label="危险作业名称"
            width="240"
          ></el-table-column>
          <el-table-column
            prop="uploadDate"
            label="上传时间"
            width="180"
          ></el-table-column>
          <el-table-column
            prop="time"
            label="作业时间"
            width="180"
          ></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="success" @click="viewHwapproval(scope.row)"
                >查看</el-button
              >
              <el-button type="primary" @click="downloadHwapproval(scope.row)"
                >下载</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div
      v-if="certifyShow && getFileType"
      class="certify-item"
      @click.stop=""
      @mousewheel.stop.prevent=""
    >
      <div class="certify-inner-wrapper">
        <div class="certify-innerw-wrapper" @mousewheel.stop="">
          <pdf
            v-for="i in pdfNumPage"
            :key="i"
            :page="i"
            :src="loadingTask"
          ></pdf>
        </div>
        <div class="close-certify" @click="certifyShow = false"></div>
      </div>
    </div>
    <div
      v-if="certifyShow && !getFileType"
      class="certify-item"
      @click.stop=""
      @mousewheel.stop.prevent=""
    >
      <div class="certify-inner-wrapper">
        <img :src="curCertifyFilePath" class="certify-img" />
        <div class="close-certify" @click="certifyShow = false"></div>
      </div>
    </div>
  </div>
</template>

<script>
import pdf from "vue-pdf";
import { dangerJobReport, dangerJobReportEnterprise } from "@/api/dangerjob.js";
import { parseTime } from "@/utils/index.js";
export default {
  components: {
    pdf,
  },
  data() {
    return {
      certifyShow: false,
      hwapprovalsName: "", //企业名称
      dangerName: "", //危险作业名称
      uploadDate: "", //上传日期
      validTime: "", //作业时间
      filePath: "", //文件路径
      curHwapprovalFilePath: "",
      pdfNumPage: undefined,
      loadingTask: undefined,
      hwapprovalslistTableData: [
        {
          companyId: 71280,
          filePath:
            "D:\\gemho\\tianhong\\danger-job-report\\gfhmQkIjCGv2118f31720703a6ed72aa25319b2ac768_20220104101158.png",
          id: 4,
          name: "111",
          time: "2021-09-09 01:01:01",
          uploadDate: "2022-01-04",
        },
      ],
      companyId: "",
      companyName: "",
    };
  },
  methods: {
    initJob() {
      let params = {
        companyId: this.$route.params.name.split("&")[0],
      };
      dangerJobReport(params).then((res) => {
        // console.log(res.content, "所有");
        this.hwapprovalslistTableData = [
          ...res.content.map((item) => {
            console.log(item.name);
            return {
              jobName: item.name,
              uploadDate: item.uploadDate,
              time: item.time,
              filePath: item.filePath,
              id: item.id,
            };
          }),
        ];
      });
    },
    findDangerjobs() {
      // console.log(this.companyId);
      let params = {};
      params.companyId = this.companyId;

      if (this.dangerName) {
        params.jobName = this.dangerName;
      }
      if (this.validTime instanceof Array) {
        params.jobStartTime = parseTime(
          new Date(this.validTime[0]),
          "{y}-{m}-{d} {h}:{i}:{s}"
        );
        params.jobEndTime = parseTime(
          new Date(this.validTime[1]),
          "{y}-{m}-{d} {h}:{i}:{s}"
        );
      }
      if (this.uploadDate instanceof Array) {
        params.uploadStartDate = parseTime(
          new Date(this.uploadDate[0]),
          "{y}-{m}-{d}"
        );
        params.uploadEndDate = parseTime(
          new Date(this.uploadDate[1]),
          "{y}-{m}-{d}"
        );
      }
      dangerJobReport(params).then((res) => {
        // console.log(res);
        this.hwapprovalslistTableData = [
          ...res.content.map((item) => {
            console.log(item.name);
            return {
              jobName: item.name,
              uploadDate: item.uploadDate,
              time: item.time,
              filePath: item.filePath,
              id: item.id,
            };
          }),
        ];
      });
    },
    viewHwapproval(row) {
      this.certifyShow = true;
      
      this.curHwapprovalFilePath = row.filePath;
      const index1 = this.curHwapprovalFilePath.indexOf("\\");
      const index2 = this.curHwapprovalFilePath.indexOf("\\", index1 + 1);
      const index3 = this.curHwapprovalFilePath.indexOf("\\", index2 + 1);
      this.curHwapprovalFilePath = this.curHwapprovalFilePath.substring(index3);
      this.curCertifyFilePath = this.curHwapprovalFilePath
      if (this.curHwapprovalFilePath.endsWith(".pdf")) {
        // if (this.curHwapprovalFilePath.endsWith(".pdf")) {
        this.loadingTask = pdf.createLoadingTask(this.curHwapprovalFilePath);
        this.loadingTask.promise.then((pdf) => {
          this.pdfNumPage = pdf.numPages;
        });
      }
    },
    downloadHwapproval(row) {
      const link = document.createElement("a");
      let curHwapprovalFilePath = row.filepath;
      const index1 = this.curHwapprovalFilePath.indexOf("\\");
      const index2 = this.curHwapprovalFilePath.indexOf("\\", index1 + 1);
      const index3 = this.curHwapprovalFilePath.indexOf("\\", index2 + 1);
      curHwapprovalFilePath = this.curHwapprovalFilePath.substring(index3);
      link.href = curHwapprovalFilePath;
      link.setAttribute(
        "download",
        row.filepath.substr(row.filepath.lastIndexOf("/") + 1)
      );
      document.body.appendChild(link);
      link.click();
      link.remove();
      window.URL.revokeObjectURL(link.href);
    },
  },
  computed: {
    getFileType() {
      if (this.curCertifyFilePath.endsWith(".pdf")) {
        return true;
      }
      return false;
    },
  },
  mounted() {
    // console.log(this.$route.params.name);
    this.companyId = this.$route.params.name.split("&")[0];
    this.companyName = this.$route.params.name.split("&")[1];
    // console.log(this.companyName, "this.companyName this.companyName");
    this.initJob();
  },
};
</script>

<style lang="scss">
.hwapprovals-find-tools-wrapper {
  display: flex;
  width: 80%;
  margin: 30px auto;
  padding: 20px;
  border-radius: 20px;
  flex-wrap: wrap;
  box-shadow: 0 0 9px 1px #eee;
  .hwapprovals-companyName {
    width: 80%;
    margin: 10px auto;
  }
  .hwapprovals-find-item {
    width: 80%;
    margin: 10px auto;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 5px 1px #eee;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .hwapprovals-title {
      width: 15%;
      display: flex;
      justify-content: flex-end;
      margin-right: 20px;
    }
  }
  .hwapprovals-find-btn {
    width: 80%;
    margin: 10px auto;
    padding: 2px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}
.tools-wrapper {
  width: 80%;
  margin: 30px auto;
  padding: 20px;
  border-radius: 20px;
  box-shadow: 0 0 9px 1px #eee;
}
.hwapprovalslist-wrapper {
  width: 80%;
  margin: 30px auto;
  padding: 30px;
  border-radius: 20px;
  box-shadow: 0 0 9px 1px #eee;
  .hwapprovalslist-title {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    align-items: center;
  }
}
.hwapprovalslist-table-wrapper {
  width: 80%;
  padding: 20px;
  border-radius: 20px;
  // box-shadow: 0 0 9px 1px #eee;
  margin: 0 auto;
  // background: #eee;
  // display: flex;
  // justify-content: center;
}
.dualsystem-wrapper {
  width: 80%;
  margin: 30px auto;
  padding: 30px;
  border-radius: 20px;
  box-shadow: 0 0 9px 1px #eee;
  .dualsystem-title {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    align-items: center;
  }
  .dualsystem-table-wrapper {
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 0 9px 1px #eee;
    margin-left: 40px;
    background: #eee;
  }
}
.standardization-wrapper {
  width: 80%;
  margin: 30px auto;
  padding: 30px;
  border-radius: 20px;
  box-shadow: 0 0 9px 1px #eee;
  .standardization-title {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    align-items: center;
  }
  .standardization-table-wrapper {
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 0 9px 1px #eee;
    margin-left: 40px;
    background: #eee;
  }
}
.certify-item {
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: #808080;
  .certify-inner-wrapper {
    position: absolute;
    width: 960px;
    height: 620px;
    left: 50%;
    top: 50%;
    padding: 20px;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    background: #eee;
    .certify-innerw-wrapper {
      width: 100%;
      height: 100%;
      overflow-y: scroll;
      &::-webkit-scrollbar {
        display: none;
      }
    }
    .certify-img {
      height: 100%;
    }
    .close-certify {
      position: absolute;
      right: 0;
      top: 0;
      width: 30px;
      height: 30px;
      background-image: url("../../assets/home/certifyclose.png");
      background-size: 100% 100%;
      background-position: center;
      cursor: pointer;
    }
  }
}
</style>