<script lang="ts" setup name="bench">
import { ref } from 'vue'
const tableData = ref([
  {
    date: '培训名称',
    name: '负责人',
    address: '培训时间',
  },
  {
    date: '培训名称',
    name: '负责人',
    address: '培训时间',
  },
  {
    date: '培训名称',
    name: '负责人',
    address: '培训时间',
  },
  {
    date: '培训名称',
    name: '负责人',
    address: '培训时间',
  },
  {
    date: '培训名称',
    name: '负责人',
    address: '培训时间',
  },
  {
    date: '培训名称',
    name: '负责人',
    address: '培训时间',
  },
  {
    date: '培训名称',
    name: '负责人',
    address: '培训时间',
  },
])
const buttomTypes = ref([
  { id: '1', text: '培训记录' },
  { id: '2', text: '证书到期提醒' },
  { id: '3', text: '溯源供方' },
  { id: '4', text: '实验室' },
  { id: '5', text: '工程组' },
  { id: '6', text: '计量人员' },
])
</script>

<template>
  <app-container>
    <div class="bench">
      <div class="bench-left">
        <div class="bench-left-top">
          <div class="bench-title">
            <h3>培训计划</h3>
            <i>字体图标</i>
          </div>
          <el-table :data="tableData" style="width: 100%;height: 80%; border-radius: 10px;">
            <el-table-column prop="date" label="Date" width="180" />
            <el-table-column prop="name" label="Name" width="180" />
            <el-table-column prop="address" label="Address" />
          </el-table>
        </div>
        <div class="bench-left-buttom">
          <div class="bench-title">
            <h3>计量文件</h3>
          </div>
          <el-table :data="tableData" style="width: 100%;height: 80%; border-radius: 10px;">
            <el-table-column prop="date" label="Date" width="180" />
            <el-table-column prop="name" label="Name" width="180" />
            <el-table-column prop="address" label="Address" />
          </el-table>
        </div>
      </div>
      <div class="bench-center">
        <div class="bench-center-top">
          <div class="bench-title">
            <h3>培训计划</h3>
          </div>
        </div>
        <div class="bench-center-buttom">
          <div class="bench-title">
            <h3>我的证书</h3>
          </div>
          <div class="bench-center-content">
            <table class="table" cellpadding="13">
              <tr>
                <th>证书名称</th>
                <th>到期时间</th>
              </tr>
              <tr>
                <td>证书名称</td>
                <td>到期时间</td>
              </tr>
              <tr>
                <td>证书名称</td>
                <td>到期时间</td>
              </tr>
            </table>
            <div>最近到期时间</div>
          </div>
        </div>
      </div>
      <div class="bench-right">
        <div class="bench-right-top">
          <div v-for="item in buttomTypes" :key="item.id" class="right-top-box">
            {{ item.text }}
          </div>
        </div>
        <div class="bench-right-center">
          <div class="bench-title">
            <h3>我的培训考核</h3>
          </div>
        </div>
        <div class="bench-right-buttom">
          <div class="bench-title">
            <h3>计量人员</h3>
          </div>
        </div>
      </div>
    </div>
  </app-container>
</template>

<style lang="scss" scoped>
.bench {
  display: flex;

  .bench-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1vw;
    height: 20%;
  }

  .bench-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 38%;
    height: 85vh;

    .bench-left-top {
      height: 48%;
      border: 1px solid #000;
      border-radius: 10px;
      margin: 2%;
    }

    .bench-left-buttom {
      height: 48%;
      margin: 2%;
      border: 1px solid #000;
      border-radius: 10px;
    }
  }

  .bench-center {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 38%;
    height: 87vh;

    .bench-center-top {
      height: 48%;
      border: 1px solid #000;
      border-radius: 10px;
      margin: 2%;
    }

    .bench-center-buttom {
      height: 48%;
      margin: 2%;
      border: 1px solid #000;
      border-radius: 10px;

      .bench-center-content {
        height: 80%;
        display: flex;
        align-items: center;
        justify-content: space-around;
      }
    }
  }

  .bench-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 24%;
    height: 87vh;

    .bench-right-top {
      height: 30%;
      border: 1px solid #000;
      border-radius: 10px;
      padding: 5%;
      margin: 2%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-around;

      .right-top-box {
        width: 29%;
        margin: 1%;
        height: 40%;
        border-radius: 5px;
        text-align: center;
        line-height: 8vh;
        color: #fff;
        background-color: rgb(40 184 228);
      }
    }

    .bench-right-center {
      height: 34%;
      border: 1px solid #000;
      border-radius: 10px;
      margin: 2%;
    }

    .bench-right-buttom {
      height: 30%;
      margin: 2%;
      border: 1px solid #000;
      border-radius: 10px;
    }
  }
}
</style>