<!-- 环境看板- UPS电源间变化趋势 -->
<script name="UPSTrend" lang="ts" setup>
const $props = defineProps({
  position: {
    type: Array,
    default: () => ([]),
  },
})
const place = ref<any>([])
const slectPlace = ref([])
watch(() => $props, (newVal) => {
  console.log(newVal, 'UPS电源间变化趋势')
  if (newVal.position && newVal.position.length) {
    place.value = newVal.position
    // 设置默认值
    slectPlace.value = [place.value[0].id]
  }
  else {
    place.value = []
    slectPlace.value = []
  }
}, {
  deep: true,
})
// 图表数据
const loading = ref(true)
const xAxisData = ref<any>([])
const data = ref<any>([])
const fetchData = () => {
  loading.value = true
  setTimeout(() => {
    xAxisData.value = ['1', '2', '3', '4', '5', '6', '7']
    data.value = [
      {
        name: 'test1',
        data: [1, 4, 2, 7, 8, 14, 35],
        symbol: 'circle',
        symbolSize: 6,
      },
      {
        name: 'test111111111111111111111',
        data: [1, 8, 1, 7, 22, 14, 15],
        symbol: 'circle',
        symbolSize: 6,
      },
      {
        name: 'test111112111122',
        data: [2, 8, 3, 7, 22, 18, 15],
        symbol: 'circle',
        symbolSize: 6,
      },
      {
        name: 'test12',
        data: [2, 8, 3, 7, 22, 18, 15],
        symbol: 'circle',
        symbolSize: 6,
      },
    ] as any
    loading.value = false
  }, 2000)
}
fetchData()
</script>

<template>
  <div class="board-item">
    <div class="board-header">
      <div class="board-title">
        UPS电源间变化趋势
      </div>
      <div class="board-select">
        <el-select
          v-model="slectPlace"
          multiple
          collapse-tags
          placeholder="地点"
          size="small"
        >
          <el-option
            v-for="item in place"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </div>
    </div>
    <div v-loading="loading" class="board-chart">
      <line-chart :x-axis-data="xAxisData" :data="data" :smooth="false" :grid="{ top: 40, left: 5, right: 5, bottom: 10, containLabel: true }" :gradient="false" :legend="{ itemWidth: 8, itemHeight: 2, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.board-item {
  margin: 5px 0;
  padding: 2px 10px;
  border: 2px solid #cedaf6;
  box-sizing: content-box;

  .board-header {
    display: flex;
    justify-content: space-between;

    .board-title {
      color: #0dabf1;
      font-weight: 700;
    }
  }

  .board-chart {
    height: 223px;
  }
}
</style>