<!--
  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 width = (document.body.clientWidth - 180 - 20 - 40 - 24) / 24
// 监测趋势时间段
const range = ref('day')
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 xAxisData1 = ref([])
const data1 = ref<any[]>([])
const loadingChart1 = ref(true)
// 节点碳排趋势数据
const xAxisData2 = ref([])
const data2 = ref<any[]>([])
// 获取设备监测分析
const fetchDeviceAnalysis = () => {
  loadingChart1.value = true
  getDeviceDetailAnalysis({
    deviceId: $route.query.id,
    type: range.value,
  }).then((res) => {
    console.log(res.data, '设备监测分析')
    const data = res.data
    // 整理节点监测趋势数据
    if (data.monitorTrends?.rp.length) {
      xAxisData1.value = data.monitorTrends?.rp?.map((item: any) => item.time)
      data1.value = [
        {
          name: '有功功率',
          data: data.monitorTrends?.rp?.map((item: any) => item.value),
        },
        {
          name: '无功功率',
          data: data.monitorTrends?.ap?.map((item: any) => item.value),
        },
      ]
    }
    // 整理节点碳排趋势数据
    if (data.emissionsTrends?.data?.length) {
      xAxisData1.value = data.emissionsTrends?.data?.map((item: any) => item.time)
      data2.value = [
        {
          name: '碳排趋势',
          data: data.emissionsTrends?.data?.map((item: any) => item.value),
        },
      ]
    }
    loadingChart1.value = false
  }).catch(() => {
    data1.value = []
    data1.value = []
    loadingChart1.value = false
  })
}
// 监听 监测趋势时间段 变化 重新获取数据
watch(() => range.value, (newVal) => {
  console.log(newVal, '选择时间段')
  fetchDeviceAnalysis()
},
{
  deep: true,
})
onMounted(() => {
  fetchDeviceInfo()
  fetchDeviceAnalysis()
})
</script>

<template>
  <app-container style="overflow: hidden;">
    <detail-page title="设备详情分析">
      <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.monitorObjName }}
        </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="day">
              日
            </el-radio>
          </el-radio-group>
        </el-col>
      </el-row>
      <el-row :gutter="24" style="margin-top: 30px;">
        <el-col :span="1" />
        <!-- :span="data2.length ? 11 : 23" -->
        <el-col v-loading="loadingChart1" :span="11">
          <div class="chart-title">
            节点监测趋势
          </div>
          <line-chart height="400px" :width="`${11 * width}px`" :data="data1" :x-axis-data="xAxisData1" />
        </el-col>
        <!--  v-if="data2.length" -->
        <el-col :span="1" />
        <el-col v-loading="loadingChart1" :span="11">
          <div class="chart-title">
            节点碳排趋势
          </div>
          <line-chart height="400px" :width="`${11 * width}px`" :data="data2" :x-axis-data="xAxisData2" />
        </el-col>
      </el-row>
    </detail-page>
  </app-container>
</template>

<style lang="scss" scoped>
.chart-title {
  background-color: #ccc;
}
</style>