<!-- 设备管理 -->
<script lang="ts" setup name="EquipmentManage">
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 equipmentTotal = ref(23) // 设备总数
const equipmentExpireTotal = ref(10) // 到期设备总数
// 设备到期趋势
const measureDetailLoading = ref(false) // 检定详情loading
const equipmentExpireTrendXData = ref<string[]>() as any // 设备到期趋势
const equipmentExpireTrendData = ref([]) as any // 检定详情数据
const equipmentExpireCurrent = ref('day') // 折线图选中tab: day日、quarter季度、year年

// 设备类型分析
const equipmentTypeAnalysis = ref([]) as any

// 设备状态分析
const equipmentStatusAnalysisXData = ref([]) as any // x轴
const equipmentStatusAnalysisData = ref([]) as any

// 设备溯源分析
const equipmentSourceAnalysisXData = ref([]) as any // x轴
const equipmentSourceAnalysisData = ref([]) as any
// ------------------------------------------字典----------------------------------------------
const categoryList = ref<dictType[]>([]) // 设备分类

/**
 * 获取字典
 */
function getDict() {
  // 设备分类
  getDictByCode('bizEquipmentCategory').then((response) => {
    categoryList.value = response.data
    categoryList.value.unshift({
      id: 'all',
      name: '全部',
      value: '',
    })
  })
}
getDict()
// --------------------------------------------钩子-------------------------------------------------
// 监听设备到期趋势按钮
watch(() => equipmentExpireCurrent.value, (newValue) => {
  if (newValue === 'day') { // 日
    equipmentExpireTrendXData.value = ['2021-12-12', '2022-12-13']
    equipmentExpireTrendData.value = [{ name: '设备到期数量', data: [1, 100] }]
  }
  else if (newValue === 'quarter') { // 季度
    equipmentExpireTrendXData.value = ['第一季度', '第二季度', '第三季度', '第四季度']
    equipmentExpireTrendData.value = [{ name: '设备到期数量', data: [1, 100, 50, 200] }]
  }
  else { // 年
    equipmentExpireTrendXData.value = ['2021', '2022', '2023', '2024', '2025', '2026', '2027']
    equipmentExpireTrendData.value = [{ name: '设备到期数量', data: [1, 100, 50, 200, 300, 100, 5] }]
  }
})

onMounted(() => {
  // 设备到期趋势
  equipmentExpireTrendXData.value = ['2021-12-12', '2022-12-13']
  equipmentExpireTrendData.value = [{ name: '设备到期数量', data: [1, 100] }]

  // 设备类型分析
  equipmentTypeAnalysis.value = [{ name: '标准设备', value: 1 }, { name: '配套设备', value: 2 }, { name: '其他', value: 3 }]

  // 设备状态分析
  equipmentStatusAnalysisXData.value = ['在用', '禁用', '报废', '封存', '弃用']
  equipmentStatusAnalysisData.value = [{ name: '数量', data: [1, 3, 4, 40, 2] }]

  // 设备溯源分析
  equipmentSourceAnalysisXData.value = ['校准', '测试', '合格', '限用', '禁用', '停用', '封存']
  equipmentSourceAnalysisData.value = [{ name: '数量', data: [1, 3, 4, 40, 2, 10, 30] }]
})
</script>

<template>
  <div class="workBench-equipment-manage">
    <!-- 筛选框和设备总数 -->
    <div style="display: flex;margin-bottom: 10px;position: absolute; top: 5px;left: 140px;">
      <div style="display: flex;margin-right: 20px;">
        <el-icon :size="30" color="#3d7eff">
          <svg-icon name="icon-device" />
        </el-icon>
        <div>
          <div style="font-size: 14px;">
            设备总数
          </div>
          <div style="margin-left: 10px;color: #000;font-weight: 600;">
            {{ equipmentTotal }}
          </div>
        </div>
      </div>
      <div style="display: flex;">
        <el-icon :size="30" color="#f88070">
          <svg-icon name="icon-device" />
        </el-icon>
        <div>
          <div style="font-size: 14px;">
            当月到期设备总数
          </div>
          <div style="margin-left: 10px;color: #000;font-weight: 600;">
            {{ equipmentExpireTotal }}
          </div>
        </div>
      </div>
    </div>
    <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="width: 100%; height: 100%;display: flex;flex-direction: column;box-sizing: border-box;">
      <!-- 上面俩图 -->
      <div style="width: 100%; height: 50%;display: flex;">
        <div style="width: 50%; height: 100%;position: relative;">
          <!-- 设备到期趋势  -->
          <el-radio-group v-model="equipmentExpireCurrent" style="z-index: 1;position: absolute; right: 0;top: 0;">
            <el-radio-button label="day" size="small">
              日
            </el-radio-button>
            <el-radio-button label="quarter" size="small">
              季度
            </el-radio-button>
            <el-radio-button label="year" size="small">
              年
            </el-radio-button>
          </el-radio-group>
          <line-chart
            style="flex: 1;z-index: 0;"
            :x-axis-data="equipmentExpireTrendXData"
            :data="equipmentExpireTrendData"
            title="设备到期趋势"
            :legend="{ show: false }"
          />
        </div>

        <!-- 设备类型分析 -->
        <pie-chart
          style="flex: 1;margin-left: 10px;"
          :data="equipmentTypeAnalysis"
          :radius="['70%']"
          :label-show="false"
          title="设备类型分析"
          :emphasis="{ show: false }"
        />
      </div>
      <!-- 下面俩图 -->
      <div style="width: 100%; height: 50%;display: flex;box-sizing: border-box;">
        <!-- 设备状态分析 -->
        <bar-chart-vertical
          style="flex: 1;"
          :x-axis-data="equipmentStatusAnalysisXData"
          :data="equipmentStatusAnalysisData"
          title="设备状态分析"
          :legend="{ show: false }"
          :bar-width="20"
          :bar-coner="0"
          :gradient="false"
        />

        <!-- 设备溯源分析 -->
        <bar-chart-horizontal
          style="flex: 1;"
          :x-axis-data="equipmentSourceAnalysisXData"
          :data="equipmentSourceAnalysisData"
          title="设备状态分析"
          :legend="{ show: false }"
          :bar-width="10"
          :bar-coner="20"
          :gradient="false"
        />
      </div>
    </div>
  </div>
</template>

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