<template>
  <div class="certify-find-wrapper">
    <div class="certify-find-tools-wrapper">
      <div class="certify-find-item">
        <div class="certify-title">企业名称:</div>
        <div>
          <el-input v-model="entername" placeholder="请输入企业名称"></el-input>
        </div>
      </div>
      <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="certify-find-table-wrapper">
      <el-table
        :data="certifyList"
        border
      >
        <el-table-column
          prop="companyName"
          label="公司名称"
        ></el-table-column>
        <el-table-column
          prop="certifyType"
          label="证书类型"
        ></el-table-column>
        <el-table-column
          prop="certifyName"
          label="证书名称"
        ></el-table-column>
        <el-table-column
          prop="uploadTime"
          label="上传时间"
        ></el-table-column>
        <el-table-column
          prop="validTime"
          label="有效时间"
        ></el-table-column>
        <el-table-column
          label="操作"
        >
          <el-button type="success">查看</el-button>
          <el-button type="primary">下载</el-button>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { enterCertifies } from '@/api/certify.js'
import { parseTime } from '@/utils/index.js' 
//{y}-{m}-{d}
export default {
  data() {
    return {
      // 企业名称
      entername: '',
      // 证书类型
      certifyType: '',
      // 证书名称
      certifyName: '',
      // 证书上传时间
      uploadTime: '',
      // 证书过期时间
      validTime: '',
      certifyTypes: [
        {
          label: '应急预案',
          value: '应急预案'
        },
        {
          label: '双体系证书',
          value: '双体系证书'
        },
        {
          label: '标准化',
          value: '标准化'
        }
      ],
      certifyList: [
        {
          companyName: '威海兴茂置业有限公司',
          companyId: -1,
          certifyType: '应急预案证书',
          certifyName: '证书1',
          uploadTime: '2021-08-09 12:13:15',
          validTime: '2021-08-10 11:12:11'
        },
        {
          companyName: '威海经济技术开发区洪氏家居生活馆',
          companyId: -1,
          certifyType: '双体系证书',
          certifyName: '证书1',
          uploadTime: '2021-08-09 12:13:13',
          validTime: '2021-08-10 11:11:11'
        }
      ]
    }
  },
  methods: {
    // 查找证书
    findCertifies() {
      const params = {}
      if (this.entername) {
        params.enterpriseName = this.entername
      }
      if (this.certifyType) {
        params.certificateCategory = this.certifyType
      }
      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')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .certify-find-wrapper {
    width: 80%;
    margin: 30px auto;
    border-radius: 30px;
    padding: 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;
      }
    }
    .certify-find-table-wrapper {
      width: 80%;
      margin: 30px auto;
      padding: 20px;
      border-radius: 20px;
      box-shadow: 0 0 9px 1px #eee;
    }
  }
</style>