<template>
  <div class="entercertifies-total-wrapper">
    <div class="tools-wrapper">
      <el-button type="primary" @click="createUploadCertify"
        >上传证书</el-button
      >
    </div>
    <div class="certify-find-tools-wrapper">
      <div class="certify-find-item">
        <div class="certify-title">证书类别:</div>
        <div>
          <el-select v-model="certifyType" placeholder="请选择证书类型">
            <el-option
              v-for="item in certifyTypes"
              :key="item.label"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div class="certify-find-item">
        <div class="certify-title">证书名称:</div>
        <div>
          <el-input
            v-model="certifyName"
            placeholder="请输入证书名称"
          ></el-input>
        </div>
      </div>
      <div class="certify-find-item">
        <div class="certify-title">上传日期:</div>
        <div>
          <el-date-picker
            v-model="uploadTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="上传开始日期"
            end-placeholder="上传结束日期"
          >
          </el-date-picker>
        </div>
      </div>
      <div class="certify-find-item">
        <div class="certify-title">有效日期:</div>
        <div>
          <el-date-picker
            v-model="validTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="有效开始日期"
            end-placeholder="有效结束日期"
          >
          </el-date-picker>
        </div>
      </div>
      <div class="certify-find-btn">
        <el-button @click="findCertifies" type="primary">查找</el-button>
      </div>
    </div>
    <div class="emergencyplan-wrapper">
      <div class="emergencyplan-title">
        <h2>应急预案证书</h2>
        <div @click="isShowEmergency = !isShowEmergency">
          <div v-if="isShowEmergency">
            <div class="downtriangle"></div>
          </div>
          <div v-else>
            <div class="righttriangle"></div>
          </div>
        </div>
      </div>
      <div class="emergencyplan-table-wrapper" v-show="isShowEmergency">
        <el-table :data="emergencyplanTableData" border>
          <el-table-column
            prop="name"
            label="证书名称"
            width="220"
          ></el-table-column>
          <el-table-column
            prop="uploadDate"
            label="上传时间"
            width="180"
          ></el-table-column>
          <el-table-column
            prop="validDate"
            label="有效日期"
            width="180"
          ></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="success" @click="viewCertify(scope.row)"
                >查看</el-button
              >
              <el-button type="primary" @click="downloadCertify(scope.row)"
                >下载</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="dualsystem-wrapper">
      <div class="dualsystem-title">
        <h2>双体系证书</h2>
        <div @click="isShowDualsystem = !isShowDualsystem">
          <div v-if="isShowDualsystem">
            <div class="downtriangle"></div>
          </div>
          <div v-else>
            <div class="righttriangle"></div>
          </div>
        </div>
      </div>
      <div class="dualsystem-table-wrapper" v-show="isShowDualsystem">
        <el-table :data="dualsystemTableData" border>
          <el-table-column
            prop="name"
            label="证书名称"
            width="220"
          ></el-table-column>
          <el-table-column
            prop="uploadDate"
            label="上传时间"
            width="180"
          ></el-table-column>
          <el-table-column
            prop="validDate"
            label="有效日期"
            width="180"
          ></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="success" @click="viewCertify(scope.row)"
                >查看</el-button
              >
              <el-button type="primary" @click="downloadCertify(scope.row)"
                >下载</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="standardization-wrapper">
      <div class="standardization-title">
        <h2>标准化证书</h2>
        <div @click="isShowStandardization = !isShowStandardization">
          <div v-if="isShowStandardization">
            <div class="downtriangle"></div>
          </div>
          <div v-else>
            <div class="righttriangle"></div>
          </div>
        </div>
      </div>
      <div class="standardization-table-wrapper" v-show="isShowStandardization">
        <el-table :data="standardizationTableData" border>
          <el-table-column
            prop="name"
            label="证书名称"
            width="220"
          ></el-table-column>
          <el-table-column
            prop="uploadDate"
            label="上传时间"
            width="180"
          ></el-table-column>
          <el-table-column
            prop="validDate"
            label="有效日期"
            width="180"
          ></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="success" @click="viewCertify(scope.row)"
                >查看</el-button
              >
              <el-button type="primary" @click="downloadCertify(scope.row)"
                >下载</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog title="上传证书" :visible.sync="uploadDialogShow" width="65%">
      <el-form
        ref="uploadform"
        :model="uploadFormInfo"
        label-width="80px"
        :rules="uploadFormRules"
        v-if="uploadDialogShow"
      >
        <el-form-item prop="name" label="证书名称">
          <el-input v-model="uploadFormInfo.name"></el-input>
        </el-form-item>
        <el-form-item prop="type" label="证书类型">
          <el-select v-model="uploadFormInfo.type">
            <el-option
              v-for="item in options"
              :label="item.label"
              :value="item.value"
              :key="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="uploadTime" label="上传日期">
          <el-date-picker
            v-model="uploadFormInfo.uploadTime"
            type="date"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item prop="validTime" label="有效日期">
          <el-date-picker
            v-model="uploadFormInfo.validTime"
            type="date"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item prop="file" label="证书文件">
          <div class="uploadcertify-wrapper">
            <label
              >选择文件<input
                ref="uploadfile"
                type="file"
                hidden
                @change="chooseFile"
            /></label>
          </div>
          <div style="color: #52beed">{{ uploadFilePath }}</div>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="info" @click="cancelUploadFile">取消</el-button>
        <el-button
          type="primary"
          @click="submitUploadFile"
          :disabled="isUploading"
          v-loading="isUploading"
          >提交</el-button
        >
      </div>
    </el-dialog>
    <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 { enterCertifies, postCertify } from "@/api/certify.js";
// {y}-{m}-{d} {h}:{i}:{s}
import { parseTime } from "@/utils/index.js";
export default {
  components: {
    pdf,
  },
  data() {
    return {
      isUploading: false,
      emergencyplanTableData: [
        {
          name: "安全生产标准化证书01",
          uploadDate: "2021-01-11 12:36:25",
          validDate: "2021-10-10 12:36:25",
          filepath:
            "https://8.143.198.78/certify1/威海大庆特种材料制作有限公司-双体系.pdf",
        },
        {
          name: "安全生产标准化证书02",
          uploadDate: "2021-01-13 12:11:25",
          validDate: "2021-10-09 12:45:11",
          filepath:
            "https://8.143.198.78/certify1/威海大宇电子有限公司-双体系.jpg",
        },
        {
          name: "安全生产标准化证书03",
          uploadDate: "2021-01-15 12:25:23",
          validDate: "2021-08-09 12:23:00",
          filepath:
            "https://8.143.198.78/certify1/威海海马地毯集团有限公司-双体系2.pdf",
        },
      ],
      dualsystemTableData: [
        {
          name: "安全生产标准化证书01",
          uploadDate: "2021-01-11 12:36:25",
          validDate: "2021-10-10 12:36:25",
          filepath:
            "https://8.143.198.78/certify1/威海大庆特种材料制作有限公司-双体系.pdf",
        },
        {
          name: "安全生产标准化证书02",
          uploadDate: "2021-01-13 12:11:25",
          validDate: "2021-10-09 12:45:11",
          filepath:
            "https://8.143.198.78/certify1/威海大宇电子有限公司-双体系.jpg",
        },
        {
          name: "安全生产标准化证书03",
          uploadDate: "2021-01-15 12:25:23",
          validDate: "2021-08-09 12:23:00",
          filepath:
            "https://8.143.198.78/certify1/威海海马地毯集团有限公司-双体系2.pdf",
        },
      ],
      standardizationTableData: [
        {
          name: "安全生产标准化证书01",
          uploadDate: "2021-01-11 12:36:25",
          validDate: "2021-10-10 12:36:25",
          filepath:
            "https://8.143.198.78/certify1/威海大庆特种材料制作有限公司-双体系.pdf",
        },
        {
          name: "安全生产标准化证书02",
          uploadDate: "2021-01-13 12:11:25",
          validDate: "2021-10-09 12:45:11",
          filepath:
            "https://8.143.198.78/certify1/威海大宇电子有限公司-双体系.jpg",
        },
        {
          name: "安全生产标准化证书03",
          uploadDate: "2021-01-15 12:25:23",
          validDate: "2021-08-09 12:23:00",
          filepath:
            "https://8.143.198.78/certify1/威海海马地毯集团有限公司-双体系2.pdf",
        },
      ],
      // 显示应急
      isShowEmergency: false,
      // 显示双体系
      isShowDualsystem: false,
      // 显示标准化
      isShowStandardization: false,
      uploadDialogShow: false,
      uploadFormInfo: {
        name: "",
        uploadTime: "",
        type: "双体系证书",
        validTime: "",
        file: null,
      },
      uploadFilePath: "",
      uploadFormRules: {
        name: [
          {
            required: true,
            message: "请输入证书名称",
            trigger: "blur",
          },
        ],
        type: [
          {
            required: true,
            message: "请输入证书类型",
            trigger: "change",
          },
        ],
        uploadTime: [
          {
            required: true,
            message: "请输入上传日期",
            trigger: "change",
          },
        ],
        validTime: [
          {
            required: true,
            message: "请输入有效日期",
            trigger: "change",
          },
        ],
        file: [
          {
            required: true,
            message: "请选择有效格式的文件(pdf、jpg、jpeg、png、gif)",
            trigger: "change",
          },
        ],
      },
      certifyShow: false,
      curCertifyFilePath: "",
      pdfNumPage: undefined,
      loadingTask: undefined,
      curCompanyId: -1,
      options: [
        {
          label: "双体系证书",
          value: "双体系证书",
        },
        {
          label: "应急预案",
          value: "应急预案",
        },
        {
          label: "标准化",
          value: "标准化",
        },
      ],
      certifyTypes: [
        {
          label: "双体系证书",
          value: "双体系证书",
        },
        {
          label: "应急预案",
          value: "应急预案",
        },
        {
          label: "标准化",
          value: "标准化",
        },
      ],
      certifyType: "",
      certifyName: "",
      uploadTime: "",
      validTime: "",
    };
  },
  mounted() {
    this.curCompanyId = this.$route.params.name;
    this.initMethod();
  },
  computed: {
    getFileType() {
      if (this.curCertifyFilePath.endsWith(".pdf")) {
        return true;
      }
      return false;
    },
  },
  methods: {
    initMethod() {
      this.initCertify("双体系证书");
      this.initCertify("应急预案");
      this.initCertify("标准化");
    },
    initCertify(category) {
      let params = {
        companyId: this.curCompanyId,
        category: category,
      };
      enterCertifies(params).then((res) => {
        console.log(res, category, "enterCertifies enterCertifies");
        if (category === "双体系证书") {
          this.dualsystemTableData = [
            ...res.content.map((item) => {
              return {
                name: item.name,
                uploadDate: item.uploadDate,
                validDate: item.expirationDate,
                filepath: item.filePath,
                id: item.id,
                category: item.category,
              };
            }),
          ];
        } else if (category === "应急预案") {
          this.emergencyplanTableData = [
            ...res.content.map((item) => {
              return {
                name: item.name,
                uploadDate: item.uploadDate,
                validDate: item.expirationDate,
                filepath: item.filePath,
                id: item.id,
                category: item.category,
              };
            }),
          ];
        } else if (category === "标准化") {
          this.standardizationTableData = [
            ...res.content.map((item) => {
              return {
                name: item.name,
                uploadDate: item.uploadDate,
                validDate: item.expirationDate,
                filepath: item.filePath,
                id: item.id,
                category: item.category,
              };
            }),
          ];
        }
      });
    },
    chooseFile() {
      this.uploadFormInfo.file = null;
      this.uploadFilePath = "";
      if (this.$refs.uploadfile.files.length) {
        const filename = this.$refs.uploadfile.files[0].name;
        if (
          !(
            filename.endsWith(".pdf") ||
            filename.endsWith(".jpg") ||
            filename.endsWith(".jpeg") ||
            filename.endsWith(".png") ||
            filename.endsWith(".gif")
          )
        ) {
          return;
        }
        this.uploadFilePath = this.$refs.uploadfile.files[0].name;
        this.uploadFormInfo.file = this.$refs.uploadfile.files[0];
      }
    },
    createUploadCertify() {
      this.uploadDialogShow = true;
      this.uploadFormInfo = {
        name: "",
        uploadTime: "",
        type: "双体系证书",
        validTime: "",
        file: null,
      };
    },
    cancelUploadFile() {
      this.uploadDialogShow = false;
    },
    submitUploadFile() {
      this.$refs.uploadform.validate((valid) => {
        if (valid) {
          this.isUploading = true;
          let params = {
            companyId: this.curCompanyId,
            category: this.uploadFormInfo.type,
            expirationDate: parseTime(
              new Date(this.uploadFormInfo.validTime),
              "{y}-{m}-{d}"
            ),
            file: this.uploadFormInfo.file,
            name: this.uploadFormInfo.name,
            uploadDate: parseTime(
              new Date(this.uploadFormInfo.uploadTime),
              "{y}-{m}-{d}"
            ),
          };
          let formData = new FormData();
          for (const key in params) {
            formData.append(key, params[key]);
          }
          postCertify(formData)
            .then((res) => {
              this.$message({
                type: "success",
                message: "添加证书成功",
              });
              this.uploadDialogShow = false;
              this.isUploading = false;
              this.initMethod();
            })
            .catch(() => {
              this.$message.error("添加证书失败");
              this.isUploading = false;
            });
        }
      });
    },
    viewCertify(row) {
      this.certifyShow = true;
      this.curCertifyFilePath = row.filepath;
      const index1 = this.curCertifyFilePath.indexOf("\\");
      const index2 = this.curCertifyFilePath.indexOf("\\", index1 + 1);
      const index3 = this.curCertifyFilePath.indexOf("\\", index2 + 1);
      this.curCertifyFilePath = this.curCertifyFilePath.substring(index3);
      if (this.curCertifyFilePath.endsWith(".pdf")) {
        this.loadingTask = pdf.createLoadingTask(this.curCertifyFilePath);
        this.loadingTask.promise.then((pdf) => {
          this.pdfNumPage = pdf.numPages;
        });
      }
    },
    downloadCertify(row) {
      const link = document.createElement("a");
      let curCertifyFilePath = row.filepath;
      const index1 = this.curCertifyFilePath.indexOf("\\");
      const index2 = this.curCertifyFilePath.indexOf("\\", index1 + 1);
      const index3 = this.curCertifyFilePath.indexOf("\\", index2 + 1);
      curCertifyFilePath = this.curCertifyFilePath.substring(index3);
      link.href = curCertifyFilePath;
      link.setAttribute(
        "download",
        row.filepath.substr(row.filepath.lastIndexOf("/") + 1)
      );
      document.body.appendChild(link);
      link.click();
      link.remove();
      window.URL.revokeObjectURL(link.href);
    },
    findCertifies() {
      let params = {};
      params.companyId = this.curCompanyId;
      if (this.certifyType) {
        params.category = this.certifyType;
        params.certificateCategory = this.certifyType;
      } else {
        this.$message.error("请输入证书类型");
        return;
      }
      if (this.certifyName) {
        params.certificateName = this.certifyName;
      }
      if (this.validTime) {
        params.expirationStartDate = parseTime(
          new Date(this.validTime[0]),
          "{y}-{m}-{d}"
        );
        params.expirationEndDate = parseTime(
          new Date(this.validTime[1]),
          "{y}-{m}-{d}"
        );
      }
      if (this.uploadTime) {
        params.uploadStartDate = parseTime(
          new Date(this.uploadTime[0]),
          "{y}-{m}-{d}"
        );
        params.uploadEndDate = parseTime(
          new Date(this.uploadTime[1]),
          "{y}-{m}-{d}"
        );
      }
      enterCertifies(params).then((res) => {
        console.log(res, "certifyEnters certifyEnters");
        if (this.certifyType === "双体系证书") {
          this.dualsystemTableData = [
            ...res.content.map((item) => {
              return {
                name: item.name,
                uploadDate: item.uploadDate,
                validDate: item.expirationDate,
                filepath: item.filePath,
                id: item.id,
                category: item.category,
              };
            }),
          ];
        } else if (this.certifyType === "应急预案") {
          this.emergencyplanTableData = [
            ...res.content.map((item) => {
              return {
                name: item.name,
                uploadDate: item.uploadDate,
                validDate: item.expirationDate,
                filepath: item.filePath,
                id: item.id,
                category: item.category,
              };
            }),
          ];
        } else if (this.certifyType === "标准化") {
          this.standardizationTableData = [
            ...res.content.map((item) => {
              return {
                name: item.name,
                uploadDate: item.uploadDate,
                validDate: item.expirationDate,
                filepath: item.filePath,
                id: item.id,
                category: item.category,
              };
            }),
          ];
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.uploadcertify-wrapper {
  width: 160px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #46a6ff;
  color: white;
  label {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
  }
}
.downtriangle {
  border-top: 20px solid #eee;
  border-bottom: 20px solid transparent;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  position: relative;
  transform: translateY(5px);
  cursor: pointer;
}
.righttriangle {
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 20px solid #eee;
  border-right: 20px solid transparent;
  position: relative;
  transform: translateX(5px);
  cursor: pointer;
}
.entercertifies-total-wrapper {
  width: 80%;
  margin: 30px auto;
  padding: 30px;
  border-radius: 30px;
  box-shadow: 0 0 9px 1px #eee;
  .certify-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;
    .certify-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;
      .certify-title {
        width: 15%;
        display: flex;
        justify-content: flex-end;
        margin-right: 20px;
      }
    }
    .certify-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;
  }
  .emergencyplan-wrapper {
    width: 80%;
    margin: 30px auto;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 0 9px 1px #eee;
    .emergencyplan-title {
      display: flex;
      justify-content: space-between;
      padding: 10px;
      align-items: center;
    }
    .emergencyplan-table-wrapper {
      padding: 20px;
      border-radius: 20px;
      box-shadow: 0 0 9px 1px #eee;
      margin-left: 40px;
      background: #eee;
    }
  }
  .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>