<!--
  Description: 节点监测趋势echarts
  Author: 李亚光
  Date: 2023-06-05
 -->
<script lang="ts" setup name="TrendChart">
import { getDeviceDetailAnalysis } from '@/api/api/index'
const props = defineProps({
  height: {
    type: Number,
    default: 400,
  },
  width: {
    type: Number,
    default: 400,
  },
  deviceId: {
    type: Number || String,
    require: true,
  },
  deviceType: {
    type: Number || String,
    require: true,
  },
})
const loading = ref(true)
const range = ref('')
defineExpose({ range })
const yAxisData = ref([])
const xAxisData = ref([])
// 获取设备监测分析
const fetchDeviceAnalysis = () => {
  loading.value = true
  getDeviceDetailAnalysis({
    deviceId: props?.deviceId,
    type: range.value,
  }).then((res) => {
    const data = res.data
    // 整理节点监测趋势数据-用电
    if (data.monitorTrends?.rp.length && Number(props.deviceType) === 1) {
      console.log('用电设备')
      xAxisData.value = data.monitorTrends?.rp?.map((item: any) => item.time)
      yAxisData.value = [
        {
          name: '有功功率',
          data: data.monitorTrends?.rp?.map((item: any) => Number(item.value)),
        },
        {
          name: '无功功率',
          data: data.monitorTrends?.ap?.map((item: any) => Number(item.value)),
        },
      ]
    }
    // 整理节点监测趋势数据-用热/用气
    if (data.monitorTrends?.val.length && Number(props.deviceType) !== 1) {
      console.log('用热设备')
      xAxisData.value = data.monitorTrends?.val?.map((item: any) => item.time)
      yAxisData.value = [
        {
          name: '监测值',
          data: data.monitorTrends?.val?.map((item: any) => Number(item.value)),
        },
      ]
    }
    loading.value = false
    console.log(yAxisData.value, 'yAxisData.value')
  }).catch(() => {
    console.log('请求失败')
    xAxisData.value = []
    loading.value = false
  })
}
// 监听 监测趋势时间段 变化 重新获取数据
watch(() => range.value, (newVal) => {
  fetchDeviceAnalysis()
},
{
  deep: true,
  // immediate: true,
})
</script>

<template>
  <div style="padding: 10px;">
    <div class="chart-title">
      节点监测趋势
    </div>
    <el-radio-group v-model="range">
      <el-radio label="day">
        日
      </el-radio>
      <el-radio label="month">
        月
      </el-radio>
      <el-radio label="year">
        年
      </el-radio>
    </el-radio-group>
    <line-chart
      v-loading="loading" :height="`${props.height}px`" :width="`${props.width}px`" :data="yAxisData"
      :x-axis-data="xAxisData"
    />
  </div>
</template>

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