<template>
  <div class="box">
    <!-- 学生体重变化趋势 -->
    <div class="polyline">
      <div class="polyline_title">学生体重变化趋势</div>
      <div ref="polylineChart" class="polyline_chart"></div>
    </div>
    <!-- 异常告警分析 -->
    <div class="form">
      <div class="form_title">异常告警分析</div>

      <div class="form_table">
        <el-table :data="tableData">
          <el-table-column label="告警类型" align="center">
            <template #default="{ row }">
              <div class="green" v-if="row.type === 1">缺勤</div>
              <div class="blue" v-if="row.type === 2">留宿</div>
              <div class="red" v-if="row.type === 3">频繁起夜</div>
            </template>
          </el-table-column>

          <el-table-column prop="name" label="姓名" align="center" />
          <el-table-column prop="college" label="学院" width="100" align="center" />
          <el-table-column prop="date" label="时间" width="110" align="center" />
        </el-table>
      </div>
    </div>
    <!-- 能耗统计趋势 -->
    <div class="line">
      <div class="line_title">能耗统计趋势</div>
      <div ref="lineChart" class="line_chart"></div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import * as Echarts from 'echarts'
import { getNearSevenMonth } from '@/utils/getNearSevenMonth.js'
import { getNearSevenDay } from '@/utils/getNearSevenDay.js'
import { getRandomNumList } from '@/utils/getRandomNumList.js'
import { isToday } from '@/utils/isToday.js'

const polylineChart = ref(null)
const lineChart = ref(null)

// 近七月数组
const NearSevenMonthList = ref([])
// 近七天数组
const NearSevenDayList = ref([])

// 表格数组
const tableData = ref([
  {
    type: 1,
    date: new Date().toLocaleDateString(),
    name: '何文羽',
    college: '计科-2020'
  },
  {
    type: 2,
    date: new Date().toLocaleDateString(),
    name: '夏叶轩',
    college: '计科-2020'
  },
  {
    type: 2,
    date: new Date().toLocaleDateString(),
    name: '李芮',
    college: '计科-2020'
  },
  {
    type: 3,
    date: new Date().toLocaleDateString(),
    name: '但学文',
    college: '计科-2020'
  },
  {
    type: 2,
    date: new Date().toLocaleDateString(),
    name: '罗凡',
    college: '计科-2020'
  },
  {
    type: 2,
    date: new Date().toLocaleDateString(),
    name: '单承宣',
    college: '计科-2020'
  }
])

// 用电数组
const electricityList = ref([])
// 用水数组
const waterList = ref([])

let myPolylineChart
let myLineChart

onMounted(() => {
  myPolylineChart = Echarts.init(polylineChart.value)
  myLineChart = Echarts.init(lineChart.value)
  getData()
})

const getData = () => {
  electricityList.value = getRandomNumList(0, 15, 6)
  waterList.value = getRandomNumList(0, 6, 6)
  NearSevenDayList.value = getNearSevenDay().splice(1, 6)
  NearSevenMonthList.value = getNearSevenMonth()
  initpolylineChart()
  initLineChart()

  isToday(getData)
}

// 初始化学生体重变化趋势图
const initpolylineChart = () => {
  const options = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      top: 15,
      icon: 'roundRect',
      data: ['何文羽', '夏叶轩', '李芮', '但学文'],
      textStyle: {
        color: '#fff'
      }
    },
    grid: {
      left: '2%',
      right: '8%',
      bottom: '5%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: true,
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#fff'
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: ['#506482'],
          type: 'dashed'
        }
      },
      data: NearSevenMonthList.value
    },
    yAxis: {
      type: 'value',
      name: 'kg',
      min: 30,
      max: 100,
      splitLine: {
        show: true,
        lineStyle: {
          color: ['#506482'],
          type: 'dashed'
        }
      }
    },
    color: ['#00B3FF', '#44F36F', '#1AEECA', '#658DA7'],
    series: [
      {
        name: '何文羽',
        type: 'line',
        tooltip: {
          valueFormatter: function (value) {
            return value + 'kg'
          }
        },
        data: getRandomNumList(50, 55, 7)
      },
      {
        name: '夏叶轩',
        type: 'line',
        tooltip: {
          valueFormatter: function (value) {
            return value + 'kg'
          }
        },
        data: getRandomNumList(50, 65, 7)
      },
      {
        name: '李芮',
        type: 'line',
        tooltip: {
          valueFormatter: function (value) {
            return value + 'kg'
          }
        },
        data: getRandomNumList(50, 60, 7)
      },
      {
        name: '但学文',
        type: 'line',
        tooltip: {
          valueFormatter: function (value) {
            return value + 'kg'
          }
        },
        data: getRandomNumList(50, 50, 7)
      }
    ]
  }
  myPolylineChart.setOption(options)
}

// 初始化能耗统计趋势图
const initLineChart = () => {
  const options = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      top: 15,
      icon: 'roundRect',
      data: ['用电', '用水'],
      textStyle: {
        color: '#fff'
      }
    },
    grid: {
      left: '5%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#fff'
      },
      data: NearSevenDayList.value
    },
    yAxis: [
      {
        type: 'value',
        name: '单位：kw/h',
        nameTextStyle: {
          color: '#00E0DB'
        },
        axisLabel: {
          color: '#fff'
        },
        //分割线
        splitLine: {
          show: true,
          lineStyle: {
            color: ['#506482'],
            type: 'dashed'
          }
        }
      },
      {
        type: 'value',
        name: '单位：t',
        nameTextStyle: {
          color: '#43BAFF'
        },
        axisLabel: {
          color: '#fff'
        },
        //分割线
        splitLine: {
          show: false
        }
      }
    ],
    series: [
      {
        name: '用电',
        type: 'line',
        smooth: true,
        yAxisIndex: 0,
        tooltip: {
          valueFormatter: function (value) {
            return value.toFixed(0) + 'kw/h'
          }
        },
        data: electricityList.value,
        itemStyle: {
          color: '#00E0DB'
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 1,
            x2: 0,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(31, 146, 246, 0)' // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(31, 146, 246, 0.3)' // 100% 处的颜色
              }
            ]
          }
        }
      },
      {
        name: '用水',
        type: 'line',
        smooth: true,
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value.toFixed(0) + 't'
          }
        },
        data: waterList.value,
        itemStyle: {
          color: '#3061C0'
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 1,
            x2: 0,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(31, 146, 246, 0)' // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(31, 146, 246, 0.3)' // 100% 处的颜色
              }
            ]
          }
        }
      }
    ]
  }

  myLineChart.setOption(options)
}
</script>
<style lang="scss" scoped>
.box {
  box-sizing: border-box;
  padding: 37px 20px 0 20px;
  margin-right: 30px;
  width: 410px;
  height: 928px;
  background: linear-gradient(rgba(8, 31, 55, 0.8), rgba(18, 50, 81, 0.8));

  .polyline {
    width: 370px;

    .polyline_title {
      display: flex;
      align-items: center;
      padding-left: 37px;
      height: 38px;
      color: #fff;
      font-size: 20px;
      font-weight: bold;
      background-image: url(@/assets/images/title_bg.png);
      background-size: 100% 100%;
    }

    .polyline_chart {
      width: 370px;
      height: 252px;
    }
  }

  .form {
    width: 370px;
    .form_title {
      display: flex;
      align-items: center;
      padding-left: 37px;
      height: 38px;
      color: #fff;
      font-size: 20px;
      font-weight: bold;
      background-image: url(@/assets/images/title_bg.png);
      background-size: 100% 100%;
    }

    .form_table {
      margin-top: 10px;
      height: 270px;
      overflow: hidden;
      .green {
        color: #54e2a9;
      }

      .blue {
        color: #00a0e9;
      }

      .red {
        color: #e04236;
      }
    }
  }

  .line {
    width: 370px;
    .line_title {
      display: flex;
      align-items: center;
      padding-left: 37px;
      height: 38px;
      color: #fff;
      font-size: 20px;
      font-weight: bold;
      background-image: url(@/assets/images/title_bg.png);
      background-size: 100% 100%;
    }
    .line_chart {
      width: 370px;
      height: 235px;
    }
  }
}

/*最外层透明*/
.form_table ::v-deep(.el-table),
.form_table ::v-deep(.el-table__expanded-cell) {
  background-color: transparent;
  color: white;
  border: none;
}
/* 表格内背景颜色 */
.form_table ::v-deep(.el-table th),
.form_table ::v-deep(.el-table tr),
.form_table ::v-deep(.el-table td),
::v-deep(.el-table th.el-table__cell.is-leaf) {
  background-color: transparent !important;
  //表格字体颜色
  color: white;
  border: none;
  height: 52px;
}

::v-deep(.el-table__inner-wrapper::before) {
  height: 0;
}

::v-deep(.el-scrollbar__view) {
  animation: run 12s linear infinite;
}
</style>
