<!-- 数据详情 -->
<script name="DataDetailDialog" lang="ts" setup>
import type { IBizDataInfo, IFrameLogInfo } from './data-query'
import { getDataFrameLog } from '@/api/data/query'

const emit = defineEmits(['recordSaved'])

const dataDetail = ref<IFrameLogInfo>({
  id: '',
  devcode: '',
  rawFrame: '',
  rawBizFrame: '',
  dataJson: '',
  logtime: '',
})

const showDialog = ref<boolean>(false)

// 逻辑
const resetForm = () => {
  dataDetail.value = {
    id: '',
    devcode: '',
    rawFrame: '',
    rawBizFrame: '',
    dataJson: '',
    logtime: '',
  }

  showDialog.value = false
}

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

  getDataFrameLog(row.frameLogId).then((res) => {
    if (res.code === 200) {
      dataDetail.value = res.data
    }
    else {
      resetForm()
    }
  })
}

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.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.rawFrame" type="textarea" :rows="5" :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.rawBizFrame" type="textarea" :rows="5" :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>