<!-- 到期提醒趋势 -->
<script lang="ts" setup name="RemindTrend">
import { remindTrend } from '@/api/eqpt/device/remind'
const height = ref(document.body.clientHeight - 335)
window.addEventListener('resize', () => {
  const bodyHeight = document.body.clientHeight - 335
  height.value = bodyHeight
})
const loadingMonth = ref(true)
const dataMonth = ref([])
const xAxisMonth = ref([])
const loadingYear = ref(true)
const dataYear = ref([])
const xAxisYear = ref([])
const fetchData = () => {
  remindTrend({ type: 'month' }).then((res) => {
    // 数据，格式为[{name:'系列名',data:[0,0,0,...0], color:'可选'},...]
    xAxisMonth.value = res.data.map((item: any) => item.name)
    dataMonth.value = [{
      name: '月趋势',
      data: res.data.map((item: any) => item.count),
      color: '#2d8cf0',
    }]
    loadingMonth.value = false
  })
  remindTrend({ type: 'year' }).then((res) => {
    // 数据，格式为[{name:'系列名',data:[0,0,0,...0], color:'可选'},...]
    xAxisYear.value = res.data.map((item: any) => item.name)
    dataYear.value = [{
      name: '年趋势',
      data: res.data.map((item: any) => item.count),
      color: '#19be6b',
    }]
    loadingYear.value = false
  })
}
fetchData()
</script>

<template>
  <div style="padding: 10px;position: reactive;">
    <!-- 月趋势 -->
    <div :style="`height:${height / 2}px;width:100%;position: relative;`" class="container">
      <div v-if="!loadingMonth" class="title">
        未来3月在用设备到期趋势
      </div>
      <line-chart :loading="loadingMonth" :x-axis-data="xAxisMonth" :data="dataMonth" />
    </div>
    <!-- 年趋势 -->
    <div :style="`height:${height / 2}px;width:100%;position: relative;margin-top:15px;`" class="container">
      <div v-if="!loadingYear" class="title">
        未来1年在用设备到期趋势
      </div>
      <line-chart :loading="loadingYear" :x-axis-data="xAxisYear" :data="dataYear" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  // position: ;

  .title {
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    position: absolute;
    width: 100%;
    top: 15px;
  }
}
</style>