<script lang="ts" setup name="bench">
import { getCurrentInstance, ref } from 'vue'
import type { 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 Linechart from '@/components/Echart/LineChart.vue'
import Piechart from '@/components/echarts/pie.vue'
import BenchCol from '@/components/benchCol/index.vue'
import type { lineDataI, pieDataI } from '@/components/Echart/echart-interface'
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: '110' },
  { text: '负责人', value: 'director', width: '120' },
  { text: '培训时间', value: 'trainTime' },
])
const meterageColumns = ref([
  { text: '文件名称', value: 'fileName', width: '110' },
  { text: '类别', value: 'fileTypeName', width: '110' },
  { text: '发布时间', value: 'publishTime' },
])
const CertificateColumns = ref([
  { text: '证书名称', value: 'certificateName', width: '110' },
  { text: '到期时间', value: 'validDate' },
])
const CertificatesColumns = ref([
  { text: '证书名称', value: 'certificateName', width: '110' },
  { text: '人员名称', value: 'name', width: '110' },
  { text: '到期时间', value: 'validDate' },
])
const StatisticxAxis: Ref<string[]> = ref([])
const StatisticData: Ref<lineDataI[]> = ref([])
const StaffSStatisticData: Ref<lineDataI[]> = ref([])
const StaffSStatisticxAxis: Ref<string[]> = ref([])
const TrainLogSList: Ref<pieDataI[]> = ref([])
const TrainLogTitle = ref(0)
const CertificateList = ref([])
// 我的证书返回值
interface validReturn {
  certificateName:	string
  count:	string
  date:	string
  lastValidDate:	number
  name:	string
  notQualified:	number
  qualified:	number
  qualifiedCount:	number
  trainCount:	number
  validDate:	string
}
const CertificateObject = ref<validReturn>({
  certificateName:	'',
  count:	'',
  date:	'',
  lastValidDate:	0,
  name:	'',
  notQualified:	0,
  qualified:	0,
  qualifiedCount:	0,
  trainCount:	0,
  validDate:	'',
})

// 获得权限
const { proxy } = getCurrentInstance() as any
const getStatisticList = () => {
  const params = {
    createTime: '',
    deptId: 0,
    director: '',
    effectiveCompany: '',
    trainTime: '',
    offset: 1,
    limit: 10000,
  }
  getPlanList(params).then((res) => {
    tableData.value = res.data.rows
  })
  // 培训计划统计返回值
  interface planReturn {
    date: string
    count: string | number
  }
  getStatistic().then((res) => {
    StatisticxAxis.value = res.data.map((item: planReturn) => {
      return item.date
    })
    const yValue = res.data.map((item: planReturn) => {
      return Number(item.count)
    })
    StatisticData.value = [{ name: '培训计划', data: yValue }]
  })
  getStaffSStatistic().then((res) => {
    StaffSStatisticxAxis.value = res.data.map((item: planReturn) => item.date)
    const yValue = res.data.map((item: planReturn) => Number(item.count))
    StaffSStatisticData.value = [{ name: '人数', data: yValue }]
  })
  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
  })
  // 返回值
  interface CertificatReturn {
    lastValidDate: number
  }
  getCertificateStatistic(param).then((res) => {
    CertificateList.value = res.data
    CertificateObject.value = res.data.sort((nex: CertificatReturn, max: CertificatReturn) => {
      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">
      <bench-col
        v-if="proxy.hasPerm('/workbench/meterTrainStatistic')"
        title="培训计划"
        path-url="/train/plan"
        width="27.8vw"
        height="40vh"
      >
        <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>
      </bench-col>
      <bench-col
        v-if="proxy.hasPerm('/workbench/meterTrain/line')"
        title="培训计划"
        width="27.8vw"
        height="40vh"
      >
        <line-chart
          :x-axis-data="StatisticxAxis"
          width="100%"
          height="75%"
          :data="StatisticData"
          unit="个"
        />
      </bench-col>
      <div class="bench-right">
        <bench-col
          v-if="proxy.hasPerm('/workbench/meterTrain/buttom')"
          width="27.8vw"
          height="20vh"
        >
          <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>
        </bench-col>
        <bench-col
          v-if="proxy.hasPerm('/workbench/meterTrain/train')"
          title="我的培训考核"
          width="27.8vw"
          height="20vh"
        >
          <div class="pie-chart">
            <pie-chart
              :data="TrainLogSList"
              width="200%"
              height="200%"
              :label-formatter="`${TrainLogTitle}`"
            />
            <div class="pie-chart-info">
              <div
                v-for="(item, index) in TrainLogSList"
                :key="index"
                class="chart-info-title"
              >
                <div class="chart-info-bg" />
                {{ item.name }}
              </div>
            </div>
          </div>
        </bench-col>
      </div>
      <bench-col
        v-if="proxy.hasPerm('/measure/file/quality')"
        title="计量文件"
        path-url="/file/quality"
        width="27.8vw"
        height="40vh"
      >
        <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>
      </bench-col>
      <bench-col
        v-if="proxy.hasPerm('/workbench/person/remind')"
        title="我的证书"
        width="27.8vw"
        height="40vh"
        path-url="/person/remind"
      >
        <div style="display: flex;">
          <el-table
            :data="CertificateList"
            style="width: 65%; height: 31.5vh; 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">
              <span>{{ CertificateObject.lastValidDate }}天</span>
            </div>
            <div class="validDate-bottom">
              最近到期时间 <br>
              <span>{{ CertificateObject.validDate }}</span>
            </div>
          </div>
        </div>
      </bench-col>
      <bench-col
        v-if="proxy.hasPerm('/workbench/person/list')"
        title="计量人员"
        width="27.8vw"
        height="40vh"
      >
        <line-chart
          :x-axis-data="StaffSStatisticxAxis"
          width="100%"
          height="75%"
          :data="StaffSStatisticData"
          unit="人"
        />
      </bench-col>
      <bench-col
        v-if="proxy.hasPerm('/workbench/person/certificate')"
        title="证书预警"
        path-url="/person/remind"
        width="27.8vw"
        height="40vh"
      >
        <el-table
          :data="CertificateList"
          style="width: 100%; height: 80%; border-radius: 10px;"
        >
          <el-table-column
            v-for="item in CertificatesColumns"
            :key="item.value"
            :prop="item.value"
            align="center"
            :label="item.text"
            :width="item.width"
          />
        </el-table>
      </bench-col>
    </div>
  </app-container>
</template>

<style lang="scss" scoped>
.bench {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .bench-right {
    display: flex;
    flex-direction: column;
    height: 40vh;
    margin-top: 1%;

    .bench-right-top {
      padding: 5%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-around;

      .right-top-box {
        width: 25%;
        margin: 2%;
        height: 40%;
        border-radius: 5px;
        text-align: center;
        font-size: 14px;
        line-height: 4.5vh;
        color: rgb(223 219 219);
        cursor: pointer;
        background-color: #3d7eff;
      }
    }
  }
}

.validDate {
  width: 35%;
  height: 100%;
  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/clock.png") no-repeat center /
      cover;
  }

  .validDate-top span {
    position: relative;
    top: 40%;
    right: 0;
    font-size: 22px;
  }

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

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

.pie-chart {
  display: flex;
  align-items: center;
  transform: translateY(-26%);
  width: 100%;
  height: 80%;

  .pie-chart-info {
    width: 30vw;
    transform: translate(-35%, -20%);
    font-size: 12px;

    .chart-info-title {
      display: flex;
      align-items: center;
      margin-top: 10px;

      .chart-info-bg {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-right: 8px;
        background-color: #3d7eff;
      }
    }
  }
}
</style>