<!--
  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('')
const flag = ref(true)
// defineExpose({ range })
const yAxisData = ref([])
const xAxisData = ref([])
const selected = ref({})
// 获取设备监测分析
const fetchDeviceAnalysis = () => {
  loading.value = true
  xAxisData.value = []
  yAxisData.value = []
  getDeviceDetailAnalysis({
    deviceId: props?.deviceId,
    type: range.value,
  }).then((res) => {
    const data = res.data
    // 整理节点监测趋势数据-用电
    if (data.monitorTrends?.rp.length && Number(props.deviceType) === 1) {
      xAxisData.value = data.monitorTrends?.rp?.map((item: any) => item.time)
      yAxisData.value = [
        {
          name: '有功功率(MW)',
          data: data.monitorTrends?.rp?.map((item: any) => Number(item.value)),
        },
        {
          name: '无功功率(MVAr)',
          data: data.monitorTrends?.ap?.map((item: any) => Number(item.value)),
        },
      ]
    }
    // 整理节点监测趋势数据-用热/用气
    if (data.monitorTrends?.val.length && Number(props.deviceType) !== 1) {
      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
  }).catch(() => {
    xAxisData.value = []
    loading.value = false
  })
}
// 监听 监测趋势时间段 变化 重新获取数据
watch(() => props.deviceId, (newVal) => {
  if (newVal) {
    range.value = 'day'
    fetchDeviceAnalysis()
  }
  if (Number(props.deviceType) === 1) {
    selected.value = {
      '有功功率(MW)': true,
      '无功功率(MVAr)': false,
    }
  }
  else {
    selected.value = {}
  }
},
{
  deep: true,
  // immediate: true,
})
watch(() => range.value, (newVal) => {
  if (newVal) {
    fetchDeviceAnalysis()
  }
},
{
  deep: true,
  // immediate: true,
})

const expand = ref(true)
const expandChart = () => {
  expand.value = !expand.value
  if (!expand.value) {
    range.value = ''
    xAxisData.value = []
    yAxisData.value = []
    setTimeout(() => {
      range.value = 'day'
    })
  }
}
defineExpose({ range, expand, fetchDeviceAnalysis })
</script>

<template>
  <div style="padding: 10px;">
    <div class="chart-title" @click="expandChart">
      节点监测趋势
      <div class="btn">
        <el-icon v-if="expand">
          <arrow-right-bold />
        </el-icon>
        <el-icon v-else>
          <arrow-down-bold />
        </el-icon>
      </div>
    </div>
    <div v-if="!expand">
      <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" :selected="selected"
      />
    </div>
  </div>
</template>

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

  .btn {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
  }
}
</style>