<!-- 核查管理 -->
<script lang="ts" setup name="CheckManage">
import { ElMessage } from 'element-plus'
import { position } from 'html2canvas/dist/types/css/property-descriptors/position'
import { getDictByCode } from '@/api/system/dict'
import type { deptType, dictType } from '@/global'

const $router = useRouter()
const listQuery = ref({
  equipment: '',
})
const list = ref([]) as any // 表格数据
const columns = [
  { text: '被核查标准装置名称', value: 'standardName', align: 'center', required: true },
  { text: '被核查设备名称', value: 'equipmentName', align: 'center', required: true },
  { text: '最近一次核查时间', value: 'time', align: 'center', required: true },
]

const checkRecordTotal = ref(0) // 核查记录总数
const checkRecordTotalYear = ref(0) // 核查记录总数(本年度)
const checkRecordTotalQuarter = ref(0) // 核查记录总数(本季度)

// ------------------------------------------字典----------------------------------------------
const categoryList = ref<dictType[]>([]) // 设备分类

/**
 * 获取字典
 */
function getDict() {
  // 设备分类
  getDictByCode('bizEquipmentCategory').then((response) => {
    categoryList.value = response.data
    categoryList.value.unshift({
      id: 'all',
      name: '全部',
      value: '',
    })
  })
}
getDict()

// 点击新建核查数据
const addCheckData = (row: any) => {
  $router.push({
    path: '/standard/checkData/add',
  })
}
// --------------------------------------------钩子-------------------------------------------------

onMounted(() => {
  list.value = [{
    standardName: '多功能校准源标准装置',
    equipmentName: '交流电流表',
    time: '2023-12-21 12:10:02',
  },
  {
    standardName: '多功能校准源标准装置',
    equipmentName: '交流电流表',
    time: '2023-12-21 12:10:02',
  },
  {
    standardName: '多功能校准源标准装置',
    equipmentName: '交流电流表',
    time: '2023-12-21 12:10:02',
  },
  {
    standardName: '多功能校准源标准装置',
    equipmentName: '交流电流表',
    time: '2023-12-21 12:10:02',
  },
  {
    standardName: '多功能校准源标准装置',
    equipmentName: '交流电流表',
    time: '2023-12-21 12:10:02',
  },
  {
    standardName: '多功能校准源标准装置',
    equipmentName: '交流电流表',
    time: '2023-12-21 12:10:02',
  },
  {
    standardName: '多功能校准源标准装置',
    equipmentName: '交流电流表',
    time: '2023-12-21 12:10:02',
  },
  ]
})
</script>

<template>
  <div class="workBench-measure-manage">
    <!-- 筛选框 -->
    <el-select v-model="listQuery.equipment" style="position: absolute; top: 5px;right: 10px;" class="short-input" placeholder="综合管理组" clearable>
      <el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.value" />
    </el-select>
    <div style="display: flex;flex-direction: column;width: 100%;height: 100%;">
      <!-- 核查记录统计 -->
      <div style="height: 40px;display: flex;margin-bottom: 10px;justify-content: space-around;">
        <div style="display: flex;margin-right: 20px;">
          <el-icon :size="30" color="#3d7eff">
            <svg-icon name="icon-check" />
          </el-icon>
          <div>
            <div style="font-size: 14px;">
              核查记录总数
            </div>
            <div style="margin-left: 10px;color: #000;font-weight: 600;">
              {{ checkRecordTotal }}
            </div>
          </div>
        </div>
        <div style="display: flex;">
          <el-icon :size="30" color="#f88070">
            <svg-icon name="icon-check" />
          </el-icon>
          <div>
            <div style="font-size: 14px;">
              核查记录总数(本年度)
            </div>
            <div style="margin-left: 10px;color: #000;font-weight: 600;">
              {{ checkRecordTotalYear }}
            </div>
          </div>
        </div>
        <div style="display: flex;">
          <el-icon :size="30" color="#10d069">
            <svg-icon name="icon-check" />
          </el-icon>
          <div>
            <div style="font-size: 14px;">
              核查记录总数(本季度)
            </div>
            <div style="margin-left: 10px;color: #000;font-weight: 600;">
              {{ checkRecordTotalQuarter }}
            </div>
          </div>
        </div>
      </div>
      <div class="title">
        待核查列表
      </div>
      <el-table
        :data="list"
        border
        style="width: 100%;height: 100%;"
      >
        <el-table-column align="center" label="序号" width="80" type="index" />
        <el-table-column
          v-for="item in columns"
          :key="item.value"
          :prop="item.value"
          :label="item.text"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column label="操作" align="center" fixed="right" width="110">
          <template #default="{ row }">
            <el-button size="small" link type="primary" @click="addCheckData(row)">
              新建核查数据
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.workBench-measure-manage {
  width: 100%;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;

  .title {
    font-size: 16px;
    padding: 0;
    margin: 0 0 6px;
  }
}
</style>