<script lang="ts" setup name="bench">
import { ref } from 'vue'
import { getCertificateStatistic, getStaffSStatistic, getStatistic, getTrainLogSStatistic } from '@/api/system/bench'
import { getPlanList } from '@/api/system/plan'
import { listPageApi } from '@/api/measure/file'
import Echarts from '@/components/echarts/index.vue'
import EchartsPie from '@/components/echarts/pie.vue'
import useUserStore from '@/store/modules/user'
const { username } = useUserStore()
const buttomTypes = ref([
  { id: '1', text: '培训记录', url: '/train/trainLog' },
  { id: '2', text: '证书到期提醒', url: '/person/remind' },
  { id: '3', text: '溯源供方', url: '/source/list' },
  { id: '4', text: '实验室', url: '/measureDept/ks' },
  { id: '5', text: '工程组', url: '/measureDept/gcz' },
  { id: '6', text: '计量人员', url: '/person/list' },
])
const tableData = ref([])
const meterageTableData = ref([])
const columns = ref([
  { text: '培训名称', value: 'planName', width: '120' },
  { text: '负责人', value: 'director', width: '130' },
  { text: '培训时间', value: 'trainTime' },
])
const meterageColumns = ref([
  { text: '文件名称', value: 'fileName', width: '120' },
  { text: '类别', value: 'fileTypeName', width: '120' },
  { text: '发布时间', value: 'publishTime' },
])
const CertificateColumns = ref([
  { text: '证书名称', value: 'certificateName', width: '120' },
  { text: '到期时间', value: 'validDate' },
])
const StatisticyAxis = ref([])
const StatisticXAxis = ref([])
const StaffSStatisticyAxis = ref([])
const StaffSStatisticxAxis = ref([])
const TrainLogSList = ref([])
const TrainLogTitle = ref('')
const CertificateList = ref([])
const CertificateObject = ref({})
const getStatisticList = () => {
  const params = {
    createTime: '',
    deptId: 0,
    director: '',
    effectiveCompany: '',
    trainTime: '',
    offset: 1,
    limit: 10000,
  }
  getPlanList(params).then((res) => {
    tableData.value = res.data.rows
  })
  getStatistic().then(async (res) => {
    StatisticyAxis.value = await res.data.map((item) => {
      return item.date
    })
    StatisticXAxis.value = await res.data.map((item) => {
      return Number(item.count)
    })
  })
  getStaffSStatistic().then(async (res) => {
    StaffSStatisticyAxis.value = await res.data.map(item => item.date)
    StaffSStatisticxAxis.value = await res.data.map(item => Number(item.count))
  })
  const param = {
    account: username,
  }
  getTrainLogSStatistic(param).then((res) => {
    TrainLogSList.value = [
      { name: `合格     ${res.data.qualified}--${(res.data.qualifiedCount / res.data.trainCount) * 100}%`, value: res.data.qualified },
      { name: `不合格   ${res.data.notQualified}-- ${((res.data.notQualified / res.data.trainCount) * 100)}%`, value: res.data.notQualified },
    ]
    TrainLogTitle.value = res.data.trainCount
  })
  getCertificateStatistic(param).then((res) => {
    CertificateList.value = res.data
    CertificateObject.value = res.data.sort((nex, max) => {
      return nex.lastValidDate - max.lastValidDate
    })[0]
  })
}
const getmeterageList = () => {
  const params = {
    fileNo: '', // 编号
    fileName: '', // 名称
    publishTime: '', // 发布时间
    fileCode: '', // 文件号
    effectiveTime: '', // 实施时间
    effectiveStatus: '', // 实施状态
    limit: 10,
    offset: 1,
    fileType: '', // 类型
  }
  listPageApi(params).then((res) => {
    meterageTableData.value = res.data.rows
  })
}
getmeterageList()
getStatisticList()
</script>

<template>
  <app-container>
    <div class="bench">
      <div class="bench-left">
        <div class="bench-left-top">
          <div class="bench-title">
            <h3>培训计划</h3>
            <span style="cursor: pointer;color: #ccc;" @click="$router.push('/train/plan')">更多 ></span>
          </div>
          <el-table :data="tableData" style="width: 100%;height: 80%; border-radius: 10px;">
            <el-table-column v-for="item in columns" :key="item.value" :prop="item.value" align="center" :label="item.text" :width="item.width" />
          </el-table>
        </div>
        <div class="bench-left-buttom">
          <div class="bench-title">
            <h3>计量文件</h3>
            <span style="cursor: pointer;color: #ccc;" @click="$router.push('/file/quality')">更多 ></span>
          </div>
          <el-table :data="meterageTableData" style="width: 100%;height: 80%; border-radius: 10px;">
            <el-table-column v-for="item in meterageColumns" :key="item.value" :prop="item.value" align="center" :label="item.text" :width="item.width" />
          </el-table>
        </div>
      </div>
      <div class="bench-center">
        <div class="bench-center-top">
          <div class="bench-title">
            <h3>培训计划</h3>
          </div>
          <echarts :id="Math.random()" title="培训计划" :x-axis-data="StatisticXAxis" :y-axis-data="StatisticyAxis" />
        </div>
        <div class="bench-center-buttom">
          <div class="bench-title">
            <h3>我的证书</h3>
            <span style="cursor: pointer;color: #ccc;" @click="$router.push('/person/certificateLog')">更多 ></span>
          </div>
          <div class="bench-center-content">
            <el-table :data="CertificateList" style="width: 100%;height: 100%; border-radius: 10px;">
              <el-table-column v-for="item in CertificateColumns" :key="item.value" :prop="item.value" align="center" :label="item.text" :width="item.width" />
            </el-table>
            <div class="validDate">
              <div class="validDate-top" />
              <div class="validDate-bottom">
                最近到期时间 <br>
                <span>{{ CertificateObject.validDate }}</span>
              </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" @click="$router.push(item.url)">
            {{ item.text }}
          </div>
        </div>
        <div class="bench-right-center">
          <div class="bench-title">
            <h3>我的培训考核</h3>
          </div>
          <echarts-pie :id="Math.random()" :data="TrainLogSList" :title="TrainLogTitle" />
        </div>
        <div class="bench-right-buttom">
          <div class="bench-title">
            <h3>计量人员</h3>
          </div>
          <echarts :id="Math.random()" title="人数" :x-axis-data="StaffSStatisticxAxis" :y-axis-data="StaffSStatisticyAxis" />
        </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: 32%;
    height: 90vh;

    .bench-left-top {
      height: 48%;
      background-color: #fff;
      border-radius: 10px;
      margin: 2%;
    }

    .bench-left-buttom {
      height: 48%;
      margin: 2%;
      background-color: #fff;
      border-radius: 10px;
    }
  }

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

    .bench-center-top {
      height: 45%;
      background-color: #fff;
      border-radius: 10px;
      margin: 2%;
      padding: 10px;
    }

    .bench-center-buttom {
      height: 48%;
      margin: 2%;
      background-color: #fff;
      border-radius: 10px;

      .validDate {
        width: 50%;
        height: 100%;
        padding: 20px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;

        .validDate-top {
          width: 100px;
          height: 100px;
          margin-bottom: 30px;
          background: url("../../../assets/images/bench/1671087276259.jpg") no-repeat center / cover;
        }

        .validDate-bottom {
          font-size: 18px;
          font-weight: 600;
        }

        .validDate-bottom span {
          font-size: 14px;
          font-weight: 400;
          color: #999;
        }
      }

      .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: 35%;
    height: 90vh;

    .bench-right-top {
      height: 30%;
      background-color: #fff;
      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;
        cursor: pointer;
        background-color: rgb(40 184 228);
      }
    }

    .bench-right-center {
      height: 34%;
      background-color: #fff;
      border-radius: 10px;
      margin: 2%;
      overflow: hidden;
    }

    .bench-right-buttom {
      height: 30%;
      margin: 2%;
      background-color: #fff;
      border-radius: 10px;
      padding: 10px;
    }
  }
}
</style>