<template>
  <div class="hwapproval-wrapper">
    <div class="hwapproval-tools-wrapper">
      <!-- <el-select
        v-model="searchEnter"
        multiple
        filterable
        remote
        reserve-keyword
        placeholder="请输入企业"
        :remote-method="remoteMethod"
        :loading="loading"
      >
        <el-option
          v-for="item in enters"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select> -->
      <el-input v-model="searchEnter" placeholder="请输入企业名称" style="width: 80%;"></el-input>
      <el-button type="success" @click="clickToSearchEnter">查找</el-button>
    </div>
    <div class="hwapproval-table-wrapper">
      <el-table :data="approvalList" border>
        <!-- <el-table-column type="expand">
          <template slot-scope="scope">
            <el-table :data="scope.row.approvals">
              <el-table-column
                prop="approvalName"
                label="备案名称"
              />
              <el-table-column
                prop="workTime"
                label="作业时间"
              />
              <el-table-column
                prop="uploadTime"
                label="上传时间"
              />
              <el-table-column label="操作">
                <template slot-scope="props">
                  <el-button
                    type="success"
                    @click="viewApproval(scope.row, props.row)"
                  >查看</el-button>
                  <el-button
                    type="primary"
                    @click="downloadApproval(scope.row, props.row)"
                  >下载</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column> -->
        <el-table-column prop="companyName" label="企业名称" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" @click="listHwApprovals(scope.row)"
              >查看</el-button
            >
            <el-button type="success" @click="createHWapproval(scope.row)"
              >上传危险作业备案</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      title="上传危险作业备案"
      :visible.sync="addDialogShow"
      width="50%"
    >
      <el-form
        v-if="addDialogShow"
        ref="addform"
        :model="addFormInfo"
        :rules="addFormRules"
        label-width="80px"
      >
        <el-form-item prop="name" label="危险作业备案名称">
          <el-input v-model="addFormInfo.name" />
        </el-form-item>
        <el-form-item prop="workTime" label="作业时间">
          <el-date-picker
            v-model="addFormInfo.workTime"
            type="datetime"
            placeholder="选择日期时间"
          />
        </el-form-item>
        <!-- <el-form-item prop="uploadTime" label="上传时间">
          <el-date-picker
            v-model="addFormInfo.uploadTime"
            type="datetime"
            placeholder="选择日期时间"
          />
        </el-form-item> -->
        <el-form-item prop="file" label="文件">
          <div>
            <label
              >选择文件
              <input ref="chosenfile" type="file" hidden @change="chooseFile" />
            </label>
          </div>
          <div>{{ uploadFilePath }}</div>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="success" @click="cancelHWapproval">取消</el-button>
        <el-button type="primary" @click="submitHWapproval">提交</el-button>
      </div>
    </el-dialog>
    <div class="approval-pdf" />
  </div>
</template>

<script>
import pdf from "vue-pdf";
import { dangerJobReportEnterprise, postDangerJobReport } from "@/api/dangerjob.js";
import { parseTime } from '../../utils';
export default {
  components: {
    pdf,
  },
  data() {
    return {
      pdfNumPage: undefined,
      loadingTask: undefined,
      loading: false,
      enters: [],
      searchEnter: "",
      approvalList: [
        {
          companyName: "威海兴茂置业有限公司",
          companyId: -1,
          approvals: [
            {
              uploadTime: "2021-09-21 11:11:11",
              workTime: "2021-08-22 12:01:03",
              approvalName: "备案1",
              approvalId: 1,
              filepath: "",
            },
            {
              uploadTime: "2021-10-21 12:12:12",
              workTime: "2021-08-22 12:01:01",
              approvalName: "备案2",
              approvalId: 2,
              filepath: "",
            },
          ],
        },
      ],
      addDialogShow: false,
      addFormInfo: {
        name: "",
        workTime: "",
        uploadTime: "",
        file: null,
        companyId: -1,
      },
      uploadFilePath: "",
      addFormRules: {
        name: [
          {
            required: true,
            message: "请输入危险作业备案名称",
            trigger: "blur",
          },
        ],
        workTime: [
          {
            required: true,
            message: "请选择作业时间",
            trigger: "change",
          },
        ],
        // uploadTime: [
        //   {
        //     required: true,
        //     message: "请选择上传时间",
        //     trigger: "change",
        //   },
        // ],
        file: [
          {
            required: true,
            message: "请选择文件(pdf、jpg、jpeg、png、gif)",
            trigger: "change",
          },
        ],
      },
      curApprovalFilePath: "",
    };
  },
  computed: {
    getFileType() {
      if (this.curApprovalFilePath.endsWith(".pdf")) {
        return true;
      }
      return false;
    },
  },
  mounted() {
    this.initMethod();
  },
  methods: {
    initMethod() {
      dangerJobReportEnterprise().then((res) => {
        this.approvalList = [
          ...res.content.map((item) => {
            return {
              companyName: item.enterpriseName,
              companyId: item.enterpriseId,
            };
          }),
        ];
        console.log(res, "hwapprovalEnters hwapprovalEnters");
      });
    },
    remoteMethod() {},
    chooseFile() {
      this.addFormInfo.file = null;
      this.uploadFilePath = "";
      console.log(this.$refs.chosenfile.files, 'this.$refs.chosenfile.files this.$refs.chosenfile.files this.$refs.chosenfile.files')
      if (this.$refs.chosenfile.files.length) {
        const filePath = this.$refs.chosenfile.files[0].name;
        if (
          !(
            filePath.endsWith(".pdf") ||
            filePath.endsWith(".jpg") ||
            filePath.endsWith(".jpeg") ||
            filePath.endsWith(".png") ||
            filePath.endsWith("gif")
          )
        ) {
          return;
        }
        this.uploadFilePath = filePath;
        this.addFormInfo.file = this.$refs.chosenfile.files[0];
      }
    },
    cancelHWapproval() {
      this.addDialogShow = false;
    },
    submitHWapproval() {
      this.$refs.addform.validate((valid) => {
        if (valid) {
          const formData = new FormData();
          formData.append('companyId', this.addFormInfo.companyId);
          formData.append('name', this.addFormInfo.name);
          formData.append('file', this.addFormInfo.file);
          formData.append('time', parseTime(this.workTime, '{y}-{m}-{d} {h}:{i}:{s}'))
          postDangerJobReport(formData).then(res => {
            console.log(res, 'postDanegrJobReport postDangerJobReport')
            this.$message({
              type: 'success',
              message: '上传成功'
            })
            this.addDialogShow = false
          }).catch(() => {
            this.$message.error('上传失败')
          })
        }
      });
    },
    createHWapproval(row) {
      this.addFormInfo.companyId = row.companyId;
      this.addDialogShow = true;
    },
    listHwApprovals(row) {
      console.log(row, "listHwApprovals");
      this.$router.push(
        "/train/hwapprovalmanage/" + row.companyId + "&" + row.companyName
      );
    },
    viewApproval(prow, childrow) {},
    downloadApproval(prow, childrow) {},
    clickToSearchEnter() {
      dangerJobReportEnterprise({
        enterpriseName: this.searchEnter
      }).then(res => {
        this.approvalList = [
          ...res.content.map((item) => {
            return {
              companyName: item.enterpriseName,
              companyId: item.enterpriseId,
            };
          }),
        ];
      })
    },

  },
};
</script>

<style lang="scss" scoped>
.hwapproval-wrapper {
  width: 80%;
  margin: 30px auto;
  border-radius: 30px;
  padding: 30px;
  box-shadow: 0 0 9px 1px #eee;
  .hwapproval-tools-wrapper {
    width: 80%;
    margin: 30px auto;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 0 9px 1px #eee;
  }
  .hwapproval-table-wrapper {
    width: 80%;
    margin: 30px auto;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 0 9px 1px #eee;
  }
}
</style>
