<template>
  <div class="p-4">
    <a-row :gutter="40">

      <a-col :span="14">

        <a-divider orientation="left">基本信息</a-divider>

        <a-descriptions bordered class="mt-4" :column="2" size="small">
          <a-descriptions-item label="摄像头名称"> 
            {{ detailInfo.name }}
          </a-descriptions-item>
          <a-descriptions-item label="功能分类"> 
            {{ detailInfo.model }}
          </a-descriptions-item>
          <a-descriptions-item label="摄像头分类"> 
            {{ detailInfo.cameraType }}
          </a-descriptions-item>
          <a-descriptions-item label="摄像头状态"> 
            {{ detailInfo.status }}
          </a-descriptions-item>
          <a-descriptions-item label="设备厂商"> 
            {{ detailInfo.manufacturer }}
          </a-descriptions-item>
          <a-descriptions-item label="设备序列号"> 
            {{ detailInfo.serialNumber }}
          </a-descriptions-item>
          <a-descriptions-item label="设备通道"> 
            {{ detailInfo.channel }}
          </a-descriptions-item>
          <a-descriptions-item label="平台IP"> 
            {{ detailInfo.ip }}
          </a-descriptions-item>
          <a-descriptions-item label="平台端口"> 
            {{ detailInfo.port }}
          </a-descriptions-item>
          <a-descriptions-item label="APPKey"> 
            {{ detailInfo.appKey }}
          </a-descriptions-item>
          <a-descriptions-item label="APPSecret"> 
            {{ detailInfo.appSecret }}
          </a-descriptions-item>
          
          <a-descriptions-item label="摄像头位置"> 
            {{ detailInfo.lng }} , {{ detailInfo.lat }}
          </a-descriptions-item>
          <a-descriptions-item label="更新时间"> 
            {{ detailInfo.updateTime }}
          </a-descriptions-item>
          <a-descriptions-item label="原始路径"> 
            {{ detailInfo.regionPathName }}
          </a-descriptions-item>
          
        </a-descriptions>
      </a-col>

      <a-col :span="10">
        <a-divider orientation="left">位置信息</a-divider>
        <div class="map-container">
          <Map :position="[detailInfo.lng,detailInfo.lat]"></Map>
        </div>
      </a-col>
    </a-row>
    
  </div>
</template>
<script setup lang="ts">
  import { ref,defineProps,watch } from 'vue';
  import Map from '../components/Map.vue';

  const props = defineProps({
    detailInfo:{
      type:Object,
      defaultValue:{},
    }
  });


  const detailInfo: any = ref({});

  detailInfo.value = props.detailInfo;

  watch(
    ()=>props.detailInfo,
    (newVal,oldVal)=>{
      detailInfo.value = newVal;
    }
  )
  


  console.log("detailInfo.value",detailInfo.value);
  const dataSource = ref([]);
  const columns = ref([
    {
      title: '人员名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '手机号',
      dataIndex: 'account',
      key: 'account',
    },
  ]);
  const form = ref({
    content: '',
  });

  const examine = (status: number) => {
    const params = {
      status,
    };
    console.log(params);
  };
</script>

<style scoped>
.map-container{
  height:500px;
}
</style>
