<template>
  <div class="find-approval-wrapper">
    <div class="find-approval-tools-wrapper">
      <div class="approval-item">
        <div class="approval-item-title">企业名称:</div>
        <el-input v-model="companyName"></el-input>
      </div>
      <div class="approval-item">
        <div class="approval-item-title">危险作业名称:</div>
        <el-input v-model="approvalName"></el-input>
      </div>
      <div class="approval-item">
        <div class="approval-item-title">作业时间:</div>
        <el-date-picker v-model="workTime" type="date" placeholder="选择日期">
        </el-date-picker>
      </div>
      <div class="approval-item">
        <div class="approval-item-title">上传时间范围:</div>
        <el-date-picker
          v-model="uploadTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div>
      <div class="approval-item-btn">
        <el-button type="primary" @click="findapproval">查找</el-button>
      </div>
    </div>
    <div class="find-approval-table-wrapper">
      <el-table :data="approvalList" border>
        <el-table-column prop="companyName" label="公司名称"></el-table-column>
        <el-table-column prop="approvalName" label="备案名称"></el-table-column>
        <el-table-column prop="workTime" label="作业时间"></el-table-column>
        <el-table-column prop="uploadTime" label="上传日期"></el-table-column>
        <el-table-column>
          <template slot-scope="scope">
            <el-button type="success">查看</el-button>
            <el-button type="primary">下载</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { dangerJobReport } from "@/api/dangerjob.js";
import { parseTime } from "@/utils/index.js";
export default {
  data() {
    return {
      companyName: "", //企业名称
      approvalName: "", //危险作业名称
      workTime: "", //作业时间
      uploadTime: "", //上传时间范围
      approvalList: [
        {
          companyName: "威海兴茂置业有限公司",
          companyId: 1,
          approvalName: "备案1",
          workTime: "2021-08-21 12:21:23",
          uploadTime: "2021-09-11 03:02:01",
          filepath: "",
        },
        {
          companyName: "威海大宇电子有限公司",
          companyId: 2,
          approvalName: "备案2",
          workTime: "2021-09-21 11:11:11",
          uploadTime: "2021-11:11 09:09:09",
          filepath: "",
        },
      ],
    };
  },
  methods: {
    findapproval() {
      console.log(111);
      const params = {
        companyId: "",
      };
      dangerJobReport(params).then((res) => {
        console.log(res, "1111 certifyEnters");
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.find-approval-wrapper {
  width: 80%;
  margin: 30px auto;
  padding: 30px;
  border-radius: 30px;
  box-shadow: 0 0 9px 1px #eee;
  .find-approval-tools-wrapper {
    width: 80%;
    margin: 30px auto;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 0 9px 1px #eee;
    .approval-item {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 80%;
      margin: 10px auto;
      padding: 10px;
      border-radius: 10px;
      box-shadow: 0 0 5px 1px #eee;
      .approval-item-title {
        width: 25%;
        display: flex;
        justify-content: flex-end;
        flex-shrink: 0;
        flex-grow: 0;
        padding-right: 10px;
      }
    }
    .approval-item-btn {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      width: 80%;
      padding: 5px;
      margin: 3px auto;
    }
  }
  .find-approval-table-wrapper {
    width: 80%;
    margin: 30px auto;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 0 9px 1px #eee;
  }
}
</style>