<!-- 数据详情 -->
<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 sampleChartRef = ref()

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

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

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

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="数据详情">
      <line-chart ref="sampleChartRef" :data="sampleDataArray" height="500px" :gradient="false" :show-x-axis="false" :title="chartTitle" />
    </detail-block>
  </el-dialog>
</template>