<!-- 数据详情 -->
<script name="DataDetailDialog" lang="ts" setup>
import type { IDataDetailInfo } from './data-query'
import LineChart from '@/components/Echart/LineChart.vue'
import { detailDataInfo } from '@/api/data/query'
import type { lineDataI } from '@/components/Echart/echart-interface'

const showDialog = ref<boolean>(false)

const sampleDataArray = ref<Array<lineDataI>>([])
const chartTitle = ref<string>('')

const radioItems = ref([
  { name: '波形图', value: 'data-wave' },
  { name: '频谱图', value: 'data-spectrum' },
])
const current = ref('')
const currentLabel = ref('')

const sampleChartRef = ref()

// 逻辑
// 详情页的各个tab切换操作
const radioChangeHandler = (newVal: string | number | boolean) => {
  const radioTarget = radioItems.value.filter(item => item.name === newVal)
  if (radioTarget.length > 0) {
    currentLabel.value = radioTarget[0].name
    current.value = radioTarget[0].value
  }
  else {
    currentLabel.value = radioItems.value[0].name
    current.value = radioItems.value[0].value
  }
}

const resetForm = () => {
  showDialog.value = false
}

const initDialog = (row: IDataDetailInfo) => {
  // 从路由中获取参数
  showDialog.value = true

  // 默认显示第一个tab内容
  current.value = radioItems.value[0].value
  currentLabel.value = radioItems.value[0].name

  detailDataInfo({ id: row.id }).then((res) => {
    if (res.code === 200) {
      chartTitle.value = `${row.devcode} / ${row.uptime}`
      sampleDataArray.value[0] = {
        name: '采样点',
        data: JSON.parse(res.data.rawData),
      }
    }
  })
}

defineExpose({
  initDialog,
})
</script>

<template>
  <el-dialog v-model="showDialog" title="数据详情" :append-to-body="true" :close-on-click-modal="false" width="75%" @closed="resetForm">
    <detail-block title="数据详情">
      <el-radio-group v-model="currentLabel" style="margin-bottom: 20px;" @change="radioChangeHandler">
        <el-radio-button v-for="item in radioItems" :key="item.value" :label="item.name" />
      </el-radio-group>

      <div v-show="current === 'data-wave'">
        <line-chart ref="sampleChartRef" :data="sampleDataArray" height="500px" :gradient="false" :show-x-axis="false" :title="chartTitle" />
      </div>

      <div v-show="current === 'data-spectrum'">
        <detail-block :need-title="false" title="">
          敬请期待
        </detail-block>
      </div>
    </detail-block>
  </el-dialog>
</template>