<!-- 环境看板- 温度变化趋势 -->
<script name="TemperatureTrend" lang="ts" setup>
import debounce from 'lodash/throttle'
import { colors } from './colors'
import { getTemperatureTrend } from '@/api/dataManagement/environmentBoard'

const $props = defineProps({
  // 地点下拉数据
  position: {
    type: Array,
    default: () => ([]),
  },
  // 实验室
  lab: {
    type: String,
    default: '',
  },
  // 时间类型
  dateType: {
    type: String,
    default: '',
  },
  // 自定义时间范围
  timeRang: {
    type: Array,
    default: () => ([]),
  },
  placeLoading: {
    type: Boolean,
    default: true,
  },
})
// 地点数据
const place = ref<any>([])
// 选择的地点
const slectPlace = ref<string[]>([])
// 图表数据
const loading = ref(true)
const xAxisData = ref<any>([])
const data = ref<any>([])
// 获取图表数据
const fetchData = debounce(() => {
  if ((($props.lab && $props.dateType !== '自定义时间') || ($props.lab && $props.dateType === '自定义时间' && $props.timeRang.length)) && slectPlace.value.length) {
    loading.value = true
    getTemperatureTrend({
      beginTime: $props.dateType === '自定义时间' ? $props.timeRang[0] : '',
      endTime: $props.dateType === '自定义时间' ? $props.timeRang[1] : '',
      recentlyDay: $props.dateType === '自定义时间' ? null : $props.dateType === '当日' ? '1' : $props.dateType === '近7日' ? '7' : $props.dateType === '近14天' ? '14' : '',
      labName: $props.lab,
      locationName: slectPlace.value,
    }).then((res) => {
      xAxisData.value = []
      data.value = []
      for (const i in res.data) {
        if (res.data[slectPlace.value[0] || '']) {
          xAxisData.value = res.data[slectPlace.value[0]].map((item: any) => item.dataTime)
        }
        else {
          xAxisData.value = []
        }
        data.value.push({
          name: i,
          data: res.data[i].map((item: any) => String(item.value)),
          symbol: 'emptyCircle',
        })
      }
      loading.value = false
    }).catch(() => {
      loading.value = false
    })
  }
}, 1000)

watch(() => $props, (newVal) => {
  // 地点变化
  if (newVal.position && newVal.position.length) {
    place.value = newVal.position
    // 设置默认值
    slectPlace.value = [place.value[0].name]
  }
  else {
    place.value = []
    slectPlace.value = []
  }
  fetchData()
  if (!newVal.placeLoading && !newVal.position.length) {
    loading.value = false
    xAxisData.value = []
    data.value = []
  }
}, {
  deep: true,
})
// 地点变化重新获取数据
watch(() => slectPlace.value, () => {
  fetchData()
}, {
  deep: true,
})
</script>

<template>
  <div class="board-item">
    <div class="board-header">
      <div class="board-title">
        温度变化趋势
      </div>
      <div class="board-select">
        <el-select
          v-model="slectPlace"
          style="width: 150px;"
          multiple
          collapse-tags
          placeholder="地点"
          size="small"
        >
          <el-option
            v-for="item in place"
            :key="item.id"
            :label="item.name"
            :value="item.name"
          />
        </el-select>
      </div>
    </div>
    <div v-loading="loading" class="board-chart">
      <line-chart v-if="xAxisData.length" :colors="colors" :x-axis-data="xAxisData" :data="data" unit="℃" :smooth="false" :grid="{ top: 47, left: 5, right: 5, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '5' }" />
      <el-empty v-else :image-size="100" description="暂无数据" />
    </div>
  </div>
</template>

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

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

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

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