<!-- 标准装置台账信息详情 核查数据分析 -->
<script name="StandardBookCheckDataAnalysis" lang="ts" setup>
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus'
import { getCheckItemDetail, getEquipmentList } from '@/api/equipment/standard/book'
import { getHistoryIndication, getInfo } from '@/api/equipment/standard/checkData'
import { getDictByCode } from '@/api/system/dict'
import { uniqueArray } from '@/utils/Array'
import { getRangeAllTime } from '@/utils/date'
const $route = useRoute()
const listQuery = ref({
  id: '',
  config: '',
  ponit: [] as any[],
  startTime: '',
  endTime: '',
  type: '',
  nominal: '',
})
const loading = ref(true)
const isFirst = ref(true)
const dateRange = ref<any[]>([])
watch(() => dateRange.value, (newVal) => {
  listQuery.value.startTime = ''
  listQuery.value.endTime = ''
  if (Array.isArray(newVal)) {
    if (newVal.length) {
      listQuery.value.startTime = `${newVal[0]} 00:00:00`
      listQuery.value.endTime = `${newVal[1]} 23:59:59`
    }
  }
})

// 获取查询条件数据
// 第一级下拉框使用的数据
const deviceList = ref<any[]>([])
// 第二级下拉框使用的数据
const configList = ref<any[]>([])
const allConfigData = ref<any[]>([])
const TypeList = ref<any[]>([])
const nominalList = ref<any[]>([])
// 第三级下拉框使用的数据
const ponitList = ref<any[]>([])
const standardList = ref<any[]>([])// 检校标准装置
const standardMap = ref({}) as any// 检校标准装置
const standardCode = ref('')
const standardMapConfigDict = ref<{ [key: string]: string }>({
  1: 'checkItemDataCalibratorList', // 多功能校准源
  2: 'checkItemDataDcPowerList', // 直流稳压电源
  3: 'checkItemDataElectricalSafetyList', // 多功能电气安全
  4: 'checkItemDataPistonGaugeList', // 0.02活塞   xxxxxxx
  5: 'checkItemDataResistanceThermometerList', // 二等铂
  8: 'checkItemDataETwoList', // E2等砝码
  11: 'checkItemDataMicrowaveAttenuationList', // 微博衰减
  15: 'checkItemDataLowerPowerList', // 小功率
  16: 'checkItemDataLowFrequencySignalList', // 低频信号源
  18: 'checkItemDataDistortionFactorList', // 失真度
})
const fetchData = async () => {
  // 检校标准装置
  const res = await getDictByCode('bizStandardEquipmentType')
  res.data.forEach((item: { value: string; name: string }) => {
    standardMap.value[`${item.name}`] = item.value
  })
  standardList.value = res.data
  standardCode.value = standardMap.value[$route.query.standardName as string] // 检校标准装置code
  getEquipmentList({
    limit: 99999,
    offset: 1,
    standardId: $route.query.standardId! as string,
    standardName: $route.query.standardName! as string,
  }).then((res) => {
    deviceList.value = res.data.rows
    // 设置默认选中
    if (deviceList.value.length) {
      listQuery.value.id = deviceList.value[0].id
    }
    else {
      loading.value = false
    }
  })
}
fetchData()
// 图表数据

// 核查数据变化趋势
const xAxisData = ref<any[]>([])
const dataTrend = ref<any[]>([])
// 核查结果分析
const data = ref<any[]>([])

// 监听设备修改二三级下拉框
watch(() => listQuery.value.id, (newVal) => {
  listQuery.value.config = ''
  listQuery.value.type = ''
  listQuery.value.nominal = ''
  listQuery.value.ponit = []
  allConfigData.value = []
  TypeList.value = []
  configList.value = []
  ponitList.value = []
  nominalList.value = []
  if (newVal) {
    const data = deviceList.value.filter((item: any) => item.id === newVal)[0] || {}
    console.log(data, '选中的设备')
    // 获取配置项
    getCheckItemDetail({
      equipmentId: data.id, // 设备id
      belongStandardEquipment: standardMap.value[$route.query.standardName as string], // 检校标准装置code
      itemCategoryId: data.itemCategoryId, // 核查项分类id
      itemCategoryName: data.itemCategoryName, // 核查项分类名称
    }).then((res) => {
      // 配置项
      let data = res.data[standardMapConfigDict.value[standardMap.value[$route.query.standardName as string]]]
      console.log(data, '检定项数据')
      if (!data) {
        // 未配置
        allConfigData.value = []
        configList.value = []
        loading.value = false
        isFirst.value = false
        return
      }
      if (standardCode.value === '11') {
        data = data.map((item: any) => ({ ...item, params: item.gearType }))
      }
      allConfigData.value = JSON.parse(JSON.stringify(data))
      configList.value = uniqueArray(data.map((item: any) => item.params))

      if (standardCode.value === '8') {
        allConfigData.value = allConfigData.value.map((item: any) => ({ ...item, params: 'E2核查' }))
        listQuery.value.config = 'E2核查'
        configList.value[0] = 'E2核查'
      }
      if (standardCode.value === '15' || standardCode.value === '18') {
        listQuery.value.config = configList.value[0]
      }
      if (standardCode.value === '1') {
        TypeList.value = uniqueArray(allConfigData.value.map((item: any) => item.testType))
        if (isFirst.value) {
          listQuery.value.type = TypeList.value[0]
          loading.value = !!TypeList.value.length
        }
        return
      }
      // 设置默认选中
      if (isFirst.value) {
        listQuery.value.config = configList.value[0]
        loading.value = !!configList.value.length
      }
    })
  }
})
watch(() => listQuery.value.type, (newVal) => {
  listQuery.value.config = ''
  listQuery.value.ponit = []
  configList.value = []
  ponitList.value = []
  if (newVal) {
    const data = allConfigData.value.filter((item: any) => item.testType === newVal)
    configList.value = uniqueArray(data.map((item: any) => item.params))
    // 设置默认选中
    if (isFirst.value) {
      listQuery.value.config = configList.value[0]
      loading.value = !!configList.value.length
    }
  }
})
// 监听配置项
watch(() => listQuery.value.config, (newVal) => {
  listQuery.value.ponit = []
  listQuery.value.nominal = ''
  nominalList.value = []
  if (newVal) {
    let data = allConfigData.value.filter((item: any) => item.params === newVal)
    if (standardCode.value === '1') {
      data = allConfigData.value.filter((item: any) => item.params === newVal && item.testType === listQuery.value.type)
    }
    console.log(data, '第三下拉框')
    let attribute = {} as { [key: string]: any }
    let unit = {} as { [key: string]: any }
    if (standardCode.value === '16' || standardCode.value === '2' || standardCode.value === '5' || standardCode.value === '4' || standardCode.value === '3' || standardCode.value === '8' || standardCode.value === '15' || standardCode.value === '1' || standardCode.value === '18' || standardCode.value === '11') {
      attribute = {
        // 多功能校准源
        1: {
          DCV: 'checkPoint',
          ACV: 'checkPoint',
          DCI: 'checkPoint',
          ACI: 'checkPoint',
          R: 'checkPoint',
        },
        // 直流稳压
        2: {
          '直流电压': 'checkPoint',
          '电源效应和负载效应': 'checkPoint',
          '直接电流(直接测量)': 'checkPoint',
          '直接电流(间接测量)': 'checkPoint',
          '纹波电压': 'checkPoint',
        },
        // 多动能电气安全
        3: {
          直流电压: 'checkPoint',
          电阻测量: 'checkPoint',
        },
        // 二等铂
        5: {
          温度值: 'checkPoint',
          RTP值: 'checkPoint',
          绝缘电阻表校准: 'checkPoint',
          测温仪电阻核查: 'checkPoint',
        },
        // E2等砝码
        8: {
          E2核查: 'checkPoint',
        },
        // 微博衰减
        11: {
          '1dB档位': 'frequency',
          '10dB档位': 'frequency',
        },
        // 小功率
        15: {
          校准因子: 'frequency',
        },
        // 低频信号源
        16: {
          频率: 'nominalValue',
          交流电压: 'nominalValue',
          直流电压: 'nominalValue',
          上升下降时间: 'frequency',
          平坦度: 'frequency',
          失真: 'frequency',
        },
        // 失真度
        18: {
          失真度: 'frequency',
        },
      }
      unit = {
        // 多功能校准源
        1: {
          DCV: 'unit',
          ACV: 'unit',
          DCI: 'unit',
          ACI: 'unit',
          R: 'unit',
        },
        // 直流稳压
        2: {
          '直流电压': 'unit',
          '电源效应和负载效应': 'unit',
          '直接电流(直接测量)': 'unit',
          '直接电流(间接测量)': 'unit',
          '纹波电压': 'unit',
        },
        // 多动能电气安全
        3: {
          直流电压: 'unit',
          电阻测量: 'unit',
        },
        // 二等铂
        5: {
          温度值: 'unit',
          RTP值: 'unit',
          绝缘电阻表校准: 'unit',
          测温仪电阻核查: 'unit',
        },
        // E2等砝码
        8: {
          E2核查: '',
        },
        // 微博衰减
        11: {
          '1dB档位': 'frequencyUnit',
          '10dB档位': 'frequencyUnit',
        },
        // 小功率
        15: {
          校准因子: 'frequencyUnit',
        },
        // 低频信号源
        16: {
          频率: 'unit',
          交流电压: 'unit',
          直流电压: 'unit',
          上升下降时间: 'frequencyUnit',
          平坦度: 'frequencyUnit',
          失真: 'frequencyUnit',
        },
        // 失真度
        18: {
          失真度: 'frequencyUnit',
        },
      }
    }
    ponitList.value = uniqueArray(data.filter(item => item[attribute[standardMap.value[$route.query.standardName as string]][newVal]]).map((item: any) => (item[attribute[standardMap.value[$route.query.standardName as string]][newVal]] + (item[unit[standardMap.value[$route.query.standardName as string]][newVal]] || ' '))))
    // 设置默认选中
    if (isFirst.value) {
      if (standardCode.value === '18' || standardCode.value === '11') {
        listQuery.value.ponit = ponitList.value[0]
      }
      else {
        listQuery.value.ponit = ponitList.value
      }
      // 设置默认一周时间
      dateRange.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')]
      listQuery.value.startTime = dayjs().subtract(7, 'day').format('YYYY-MM-DD')
      listQuery.value.endTime = dayjs().format('YYYY-MM-DD')
      if (standardCode.value === '18' || standardCode.value === '11') {
        return
      }
      searchList()
      isFirst.value = false
    }
  }
})
watch(() => listQuery.value.ponit, (newVal) => {
  listQuery.value.nominal = ''
  nominalList.value = []
  if ((typeof newVal === 'object' && newVal.length) || (typeof newVal === 'string' && newVal.length)) {
    if (standardCode.value === '18') {
      const data = allConfigData.value.filter((item: any) => item.frequency + item.frequencyUnit === newVal)
      nominalList.value = uniqueArray(data.map(item => `${item.nominalValue}%`))
    }
    else if (standardCode.value === '11') {
      console.log(newVal, 'newValnewValnewVal')
      const data = allConfigData.value.filter((item: any) => `${item.frequency}${item.frequencyUnit}` === newVal)
      nominalList.value = uniqueArray(data.map(item => `${item.attenuationAmount}${item.attenuationAmountUnit}`))
      console.log(nominalList.value, 'nominalList.valuenominalList.valuenominalList.value')
    }
    // 设置默认选中
    if (isFirst.value) {
      listQuery.value.nominal = nominalList.value
      loading.value = !!nominalList.value.length
      searchList()
      setTimeout(() => {
        isFirst.value = false
      }, 2000)
    }
  }
})
// 查询
function searchList() {
  xAxisData.value = []
  dataTrend.value = []
  data.value = []
  loading.value = true
  let flag = true
  for (const i in listQuery.value) {
    if (i === 'ponit') {
      flag = !!listQuery.value[i].length
    }
    else if (i === 'type') {
      flag = standardCode.value === '1' ? !!listQuery.value[i] : true
    }
    else if (i === 'nominal') {
      flag = standardCode.value === '18' || standardCode.value === '11' ? !!listQuery.value[i] : true
    }
    else {
      flag = !!listQuery.value[i]
    }
    if (!flag) {
      break
    }
  }
  if (flag) {
    setTimeout(() => {
      //  模拟数据
      xAxisData.value = getRangeAllTime(listQuery.value.startTime, listQuery.value.endTime).map(item => item)
      if (standardCode.value === '18' || standardCode.value === '11') {
        dataTrend.value = listQuery.value.nominal.map((item: any) => ({
          name: item,
          data: xAxisData.value.map(item => Math.floor(Math.random() * 100) + 1),
        }))
      }
      else {
        dataTrend.value = listQuery.value.ponit.map((item: any) => ({
          name: item,
          data: xAxisData.value.map(item => Math.floor(Math.random() * 100) + 1),
        }))
      }
      data.value = [{
        name: '稳定性合格',
        value: Math.floor(Math.random() * 10) + 1,
      },
      {
        name: '稳定不性合格',
        value: Math.floor(Math.random() * 10) + 1,
      }]
      setTimeout(() => {
        const resize = new Event('resize')
        window.dispatchEvent(resize)
      })
      loading.value = false
    }, 2000)
  }
  else {
    if (isFirst.value) {
      loading.value = false
      return
    }
    ElMessage.warning('查询条件不能为空')
    setTimeout(() => {
      loading.value = false
    }, 1000)
  }
}
// 清空查询
const clearList = () => {
  dateRange.value = []
  listQuery.value = {
    id: '',
    config: '',
    ponit: [],
    startTime: '',
    endTime: '',
    type: '',
    nominal: '',
  }
  listQuery.value.id = ''
  listQuery.value.config = ''
  listQuery.value.ponit = []
  allConfigData.value = []
  configList.value = []
  ponitList.value = []
  xAxisData.value = []
  dataTrend.value = []
  data.value = []
}
</script>

<template>
  <div>
    <!-- 查询条件 -->
    <search-area :need-clear="true" @search="searchList" @clear="clearList">
      <search-item>
        <el-select
          v-model="listQuery.id"
          placeholder="设备"
          class="short-input"
          filterable
          clearable
          style="width: 170px;"
        >
          <el-option v-for="item in deviceList" :key="item.id" :label="`${item.equipmentName}-${item.model}-${item.manufactureNo}`" :value="item.id" />
        </el-select>
      </search-item>
      <search-item v-if="standardCode === '1'">
        <el-select
          v-model="listQuery.type"
          placeholder="分类"
          class="short-input"
          filterable
          clearable
          style="width: 170px;"
        >
          <el-option v-for="item in TypeList" :key="item" :label="item" :value="item" />
        </el-select>
      </search-item>
      <search-item v-if="standardCode !== '8' && standardCode !== '15' && standardCode !== '18'">
        <el-select
          v-model="listQuery.config"
          placeholder="核查项"
          class="short-input"
          filterable
          clearable
          style="width: 170px;"
        >
          <el-option v-for="item in configList" :key="item" :label="item" :value="item" />
        </el-select>
      </search-item>
      <search-item>
        <el-select
          v-model="listQuery.ponit"
          placeholder="核查点"
          class="short-input"
          filterable
          clearable
          :multiple="standardCode !== '18' && standardCode !== '11'"
          collapse-tags
          style="width: 200px;"
        >
          <el-option v-for="item in ponitList" :key="item" :label="item" :value="item" />
        </el-select>
      </search-item>
      <search-item v-if="standardCode === '18' || standardCode === '11'">
        <el-select
          v-model="listQuery.nominal"
          placeholder=""
          class="short-input"
          filterable
          clearable
          :multiple="standardCode === '18' || standardCode === '11'"
          collapse-tags
          style="width: 200px;"
        >
          <el-option v-for="item in nominalList" :key="item" :label="item" :value="item" />
        </el-select>
      </search-item>
      <search-item>
        <el-date-picker
          v-model="dateRange"
          class="short-input"
          type="daterange"
          range-separator="至"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </search-item>
    </search-area>
    <!-- 图表-展示 -->
    <div v-loading="loading" class="show-content">
      <div class="board-item">
        <div class="board-header">
          <div class="board-title">
            核查数据变化趋势
          </div>
          <div class="board-select" />
        </div>
        <!-- v-loading="loading" -->
        <div class="board-chart">
          <line-chart v-if="xAxisData.length" :x-axis-data="xAxisData" :data="dataTrend" :smooth="false" :grid="{ top: 47, left: 5, right: 5, bottom: 10, containLabel: true }" :gradient="false" :legend="{ itemWidth: 8, itemHeight: 2, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '5' }" />
          <el-empty v-else :image-size="100" description="暂无数据" />
        </div>
      </div>
      <div class="board-item-device">
        <div class="board-header">
          <div class="board-title">
            核查结果分析
          </div>
          <div class="board-select" />
        </div>
        <!-- v-loading="loading" -->
        <div class="board-chart">
          <pie-chart v-show="data.length" :data="data" :center="['50%', '60%']" label-formatter="{style1|{c}}" label-position="outside" radius="70%" :grid="{ top: 50, left: 15, right: 15, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
          <el-empty v-show="!data.length" :image-size="100" description="暂无数据" />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.board-item {
  margin: 5px 0;
  padding: 2px 10px;
  // border: 2px solid #cedaf6;
  box-sizing: content-box;
  border-radius: 6px;
  width: 65%;

  .board-header {
    display: flex;
    justify-content: space-between;

    .board-title {
      color: #0dabf1;
      font-weight: 700;
    }
  }

  .board-chart {
    height: 300px;
  }
}

.board-item-device {
  margin: 5px 0;
  padding: 2px 10px;
  // border: 2px solid #cedaf6;
  box-sizing: content-box;
  width: 35%;

  .board-header {
    display: flex;
    justify-content: space-between;

    .board-title {
      color: #0dabf1;
      font-weight: 700;
    }
  }

  .board-chart {
    height: 300px;
  }
}

.show-content {
  display: flex;
}
</style>