<!-- 检定管理 -->
<script lang="ts" setup name="MeasureManage">
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 certCountYear = ref(23) // 检定/校准/校验/测试证书总数(本年度)
const certCountQuarter = ref(23) // 检定/校准/校验/测试证书总数(本季度)
const certCountMonth = ref(23) // 检定/校准/校验/测试证书总数(本月度)

// 检校设备分析
const equipmentAnalysis = ref([]) as any
// 检校结果分析
const resultAnalysis = ref([]) as any
const resultAnalysisDate = ref('') // 尖叫结果日期

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

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

onMounted(() => {
  // 设备类型分析
  equipmentAnalysis.value = [{ name: '数字多用表(手持)', value: 1 }, { name: '一般压力表', value: 2 }, { name: '数字压力计', value: 3 }, { name: '恒温槽', value: 3 }, { name: '压力传感器', value: 3 }, { name: '压力变送器', value: 3 }, { name: '交流电压表', value: 3 }, { name: '交流电流表', value: 3 }, { name: '直流电压表', value: 3 }]
  // 检校结果分析
  resultAnalysis.value = [{ name: '合格', value: 1 }, { name: '不合格', value: 9 }, { name: '除*外所检项目合格', value: 3 }]
})
</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="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-certi" />
          </el-icon>
          <div>
            <div style="font-size: 14px;">
              检定/校准/校验/测试证书总数(本年度)
            </div>
            <div style="margin-left: 10px;color: #000;font-weight: 600;">
              {{ certCountYear }}
            </div>
          </div>
        </div>
        <div style="display: flex;">
          <el-icon :size="30" color="#f88070">
            <svg-icon name="icon-certi" />
          </el-icon>
          <div>
            <div style="font-size: 14px;">
              检定/校准/校验/测试证书总数(本季度)
            </div>
            <div style="margin-left: 10px;color: #000;font-weight: 600;">
              {{ certCountMonth }}
            </div>
          </div>
        </div>
        <div style="display: flex;">
          <el-icon :size="30" color="#10d069">
            <svg-icon name="icon-certi" />
          </el-icon>
          <div>
            <div style="font-size: 14px;">
              检定/校准/校验/测试证书总数(本月度)
            </div>
            <div style="margin-left: 10px;color: #000;font-weight: 600;">
              {{ certCountQuarter }}
            </div>
          </div>
        </div>
      </div>

      <!-- 图 -->
      <div style="flex: 1;display: flex;width: 100%;height: 100%;">
        <!-- 左边图 ：检定类型分析 -->
        <div style="width: 50%;height: 100%;position: relative;">
          <span v-show="equipmentAnalysis.length" style="font-weight: 600;position: absolute;font-size: 14px;color: #343434;">检定类型分析</span>
          <pie-chart
            value-type="percentage"
            style="width: 100%;height: 100%;"
            title="检定类型分析"
            :data="equipmentAnalysis"
            :radius="['70%', '50%']"
            :label-show="false"
            :emphasis="{ show: false }"
            :show-total="true"
          />
          <!-- <el-empty v-show="!equipmentAnalysis.length" style="margin: 0 auto;" description="暂无数据" :image-size="50" /> -->
        </div>
        <!-- 右边图 -->
        <div style="width: 50%;height: 100%;position: relative;">
          <el-date-picker
            v-model="resultAnalysisDate"
            style="position: absolute; top: 0;right: 0;width: 120px;z-index: 1;"
            class="short-input"
            clearable
            type="date"
            placeholder="选择日期"
          />
          <pie-chart
            style="width: 100%;height: 100%;z-index: 0;"
            :data="resultAnalysis"
            :radius="['70%']"
            :label-show="false"
            title="检校结果分析"
            :emphasis="{ show: false }"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.workBench-measure-manage {
  width: 100%;
  height: 100%;
}
</style>