<!--
  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
// 监测类型  用来判断碳排趋势chart显不显示
const monitorType = ref('')
monitorType.value = $route.query.monitor as string
// 设备类型
const deviceType = ref('')
deviceType.value = $route.query.deviceType as string
// 监测趋势时间段
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) => {
    deviceInfo.value = res.data
  })
}
// 节点监测趋势数据
const xAxisData1 = ref([])
const data1 = ref<any[]>([])
const loadingChart1 = ref(true)
const selected = ref({})
// 节点碳排趋势数据
const xAxisData2 = ref([])
const data2 = ref<any[]>([])
// 获取设备监测分析
const fetchDeviceAnalysis = () => {
  loadingChart1.value = true
  getDeviceDetailAnalysis({
    deviceId: $route.query.id,
    type: range.value,
  }).then((res) => {
    const data = res.data
    // 整理节点监测趋势数据-用电
    if (data.monitorTrends?.rp.length && deviceType.value === '1') {
      xAxisData1.value = data.monitorTrends?.rp?.map((item: any) => item.time)
      data1.value = [
        {
          name: '有功功率(KW)',
          data: data.monitorTrends?.rp?.map((item: any) => item.value),
        },
        {
          name: '无功功率(KVAr)',
          data: data.monitorTrends?.ap?.map((item: any) => item.value),
        },
      ]
      selected.value = {
        '有功功率(KW)': true,
        '无功功率(KVAr)': false,
      }
    }
    // 整理节点监测趋势数据-用热/用气
    if (data.monitorTrends?.val.length && deviceType.value !== '1') {
      xAxisData1.value = data.monitorTrends?.val?.map((item: any) => item.time)
      data1.value = [
        {
          name: '监测值',
          data: data.monitorTrends?.val?.map((item: any) => item.value),
        },
      ]
      selected.value = {}
    }
    // 整理节点碳排趋势数据
    if (data.emissionsTrends?.data?.length) {
      const emissionsTrends = data.emissionsTrends.data
      xAxisData2.value = emissionsTrends.map((item: any) => item.time)
      data2.value = [
        {
          name: `碳排趋势(${deviceType.value !== '2' ? 'gCO2/kWh' : 'gCO2/KJ'})`,
          data: emissionsTrends.map((item: any) => item.value),
        },
      ]
    }
    loadingChart1.value = false
  }).catch(() => {
    data1.value = []
    data2.value = []
    loadingChart1.value = false
  })
}
// 监听 监测趋势时间段 变化 重新获取数据
watch(() => range.value, (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 label="hour">
              小时
            </el-radio>
          </el-radio-group>
        </el-col>
      </el-row>
      <el-row v-show="!loadingChart1" :gutter="24" style="margin-top: 30px;">
        <el-col :span="1" />
        <!--  -->
        <el-col v-loading="loadingChart1" :span="monitorType === '5' ? 11 : 23">
          <div class="chart-title">
            节点监测趋势
          </div>
          <line-chart height="400px" :selected="selected" :width="`${monitorType === '5' ? 11 * width : 23 * width}px`" :data="data1" :x-axis-data="xAxisData1" />
        </el-col>
        <el-col v-if="monitorType === '5'" :span="1" />
        <el-col v-if="monitorType === '5'" 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>