<!-- 数据详情 -->
<script name="DataDetailDialog" lang="ts" setup>
import type { IDataDetailInfo } from './data-query'

const emit = defineEmits(['recordSaved'])

const dataDetail = ref<IDataDetailInfo>({
  id: '',
  devcode: '',
  groupId: '',
  groupName: '',
  deviceTypeName: '',
  cell: '',
  dataJson: '',
  uptime: '',
  logtime: '',
})

const showDialog = ref<boolean>(false)

// 逻辑
const resetForm = () => {
  dataDetail.value = {
    id: '',
    devcode: '',
    groupId: '',
    groupName: '',
    deviceTypeName: '',
    cell: '',
    dataJson: '',
    uptime: '',
    logtime: '',
  }

  showDialog.value = false
}

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

defineExpose({
  initDialog,
})
</script>

<template>
  <el-dialog v-model="showDialog" title="数据详情" :append-to-body="true" :close-on-click-modal="false" @closed="resetForm">
    <detail-block title="数据详情">
      <el-form ref="infoFormRef" :model="dataDetail" label-position="right" label-width="110px" stripe>
        <el-row :gutter="24">
          <el-col :span="18" :offset="3">
            <el-form-item label="数据id">
              <el-input v-model="dataDetail.id" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="18" :offset="3">
            <el-form-item label="设备编号">
              <el-input v-model="dataDetail.devcode" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="18" :offset="3">
            <el-form-item label="分组">
              <el-input v-model="dataDetail.groupName" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="18" :offset="3">
            <el-form-item label="设备类型">
              <el-input v-model="dataDetail.deviceTypeName" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="18" :offset="3">
            <el-form-item label="电量">
              <el-input v-model="dataDetail.cell" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="18" :offset="3">
            <el-form-item label="采集时间">
              <el-input v-model="dataDetail.logtime" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="18" :offset="3">
            <el-form-item label="上报时间">
              <el-input v-model="dataDetail.uptime" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="18" :offset="3">
            <el-form-item label="内容">
              <el-input v-model="dataDetail.dataJson" type="textarea" :rows="5" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </detail-block>
  </el-dialog>
</template>