<!--
  Description: 详情分析页面
  Author: 李亚光
  Date: 2023-06-05
 -->
<script lang="ts" setup name="sceneEdit">
import { getDeviceDetail, getDeviceDetailAnalysis } from '@/api/api/index'
const $router = useRouter()
const $route = useRoute()
// 监测趋势时间段
const range = ref('year')
const goBak = () => {
  $router.push({
    name: 'Ddevice',
  })
}
const deviceInfo = ref<{ [key: string]: string | any }>({})
// 获取设备基本信息
const fetchDeviceInfo = () => {
  getDeviceDetail($route.query.id).then((res) => {
    console.log(res.data, '设备基本信息')
    deviceInfo.value = res.data
  })
}
// 获取设备监测分析
const fetchDeviceAnalysis = () => {
  getDeviceDetailAnalysis({
    deviceId: $route.query.id,
    type: range.value,
  }).then((res) => {
    console.log(res.data, '设备监测分析')
  })
}
onMounted(() => {
  fetchDeviceInfo()
  // fetchDeviceAnalysis()
})
</script>

<template>
  <app-container style="overflow: hidden;">
    <detail-page :title="deviceInfo.deviceName">
      <template #btns>
        <el-button type="primary" @click="goBak">
          返回
        </el-button>
      </template>
      <el-row :gutter="24">
        <el-col :span="1" />
        <el-col :span="3">
          当前设备:
        </el-col>
        <el-col :span="8">
          {{ deviceInfo.deviceName }}
        </el-col>
        <el-col :span="3">
          监测对象:
        </el-col>
        <el-col :span="8">
          {{ deviceInfo.deviceTypeName }}
        </el-col>
      </el-row>
      <el-row :gutter="24" style="margin-top: 30px;">
        <el-col :span="1" />
        <el-col :span="3">
          安装位置:
        </el-col>
        <el-col :span="8">
          {{ deviceInfo.installLocaltion }}
        </el-col>
      </el-row>
      <el-row :gutter="24" style="margin-top: 30px;">
        <el-col :span="1" />
        <el-col :span="3">
          安装时间:
        </el-col>
        <el-col :span="8">
          {{ deviceInfo.installTime }}
        </el-col>
        <el-col :span="3">
          当前状态:
        </el-col>
        <el-col :span="8">
          {{ deviceInfo.statName }}
        </el-col>
      </el-row>
      <el-row :gutter="24" style="margin-top: 30px;">
        <el-col :span="1" />
        <el-col :span="4">
          趋势查看方式:
        </el-col>
        <el-col :span="18">
          <el-radio-group v-model="range">
            <el-radio label="year">
              年
            </el-radio>
            <el-radio label="month">
              月
            </el-radio>
            <el-radio label="week">
              周
            </el-radio>
          </el-radio-group>
        </el-col>
      </el-row>
      <!-- <el-row :gutter="24" style="margin-top: 30px;">
        <el-col :span="1" />
        <el-col :span="3">
          现场人员总数:
        </el-col>
        <el-col :span="2">
          {{ data.workerList?.length }}人
        </el-col>
        <el-col :span="1" />
        <el-col :span="2">
          安全树 :
        </el-col>
        <el-col :span="15">
          {{ data.deviceList?.length }}棵
          <span v-if="data.deviceList?.length">(编号: <span v-for="(item, index) in data?.deviceList" :key="index">{{
            item.deviceCode }}{{ index === data.deviceList?.length - 1 ? '' : '\\' }}</span>)</span>
        </el-col>
      </el-row> -->
    </detail-page>
  </app-container>
</template>