<template>
  <div class="dashboard-editor-container">
    <el-menu :default-active="'1'" class="el-menu-demo" mode="horizontal">
      <el-menu-item index="1">
        <router-link to="/overview" style="padding: 10px 0">概述</router-link>
      </el-menu-item>
      <el-menu-item index="2">
        <router-link to="/node/list" style="padding: 10px 0">节点列表</router-link>
      </el-menu-item>
    </el-menu>
    <panel-group @handleSetLineChartData="handleSetLineChartData"/>

    <el-form :inline="true" :model="formInline">
      <el-form-item label="展示时间区间">
        <el-select v-model="formInline.user" placeholder="展示时间区间" @change="handleSetLineChartData(undefined)">
          <el-option label="近7秒" value="近7秒"></el-option>
          <el-option label="近7分" value="近7分"></el-option>
          <el-option label="近7小时" value="近7小时"></el-option>
          <el-option label="近7天" value="近7天"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="刷新机制">
        <el-select v-model="formInline.region" placeholder="展示时间区间">
          <el-option label="关闭" value="关闭"></el-option>
          <el-option label="自动" value="自动"></el-option>
          <el-option label="5秒" value="5秒"></el-option>
          <el-option label="10秒" value="10秒"></el-option>
          <el-option label="30秒" value="30秒"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-popover
          placement="right"
          width="400"
          trigger="hover">
          <el-collapse v-model="activeName" accordion>
            <el-collapse-item title="关闭" name="1">
              <div>不再自动刷新图表数据</div>
            </el-collapse-item>
            <el-collapse-item title="自动" name="2">
              <div>根据展示时间区间进行自动刷新</div>
              <div>近七天、近7小时、近7分：每30秒刷新一次</div>
              <div>近7秒：每3秒刷新一次</div>
            </el-collapse-item>
            <el-collapse-item title="其余" name="3">
              <div>根据选择刷新机制进行自动刷新</div>
            </el-collapse-item>
          </el-collapse>
          <el-button slot="reference" icon="el-icon-question"></el-button>
        </el-popover>
      </el-form-item>
    </el-form>
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="lineChartData"/>
    </el-row>

    <el-row :gutter="32">
      <el-col :lg="8" :sm="24" :xs="24">
        <div class="chart-wrapper">
          <el-tabs v-model="activeTopName" type="card">
            <el-tab-pane label="最长在线TOP10" name="最长在线TOP10">
              <el-card class="box-card">
                <div v-for="o in 10" :key="o" class="text item">
                  {{'VIN123456789' + (o - 1) }} <span style="float:right;">{{56 - o}}分钟</span>
                </div>
              </el-card>
            </el-tab-pane>
            <el-tab-pane label="最新上线车辆" name="最新上线车辆">
              <el-card class="box-card">
                <div v-for="o in 10" :key="o" class="text item">
                  {{'VIN123456789' + (o - 1) }} <span style="float:right;">2024-4-13 23:06:5{{(10-o)}}</span>
                </div>
              </el-card>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
      <el-col :lg="8" :sm="24" :xs="24">
        <div class="chart-wrapper">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>网关节点负载</span>
              <el-switch
                style="float: right; display: block"
                v-model="value1"
                active-color="#13ce66"
                inactive-color="#5ab1ef"
                active-text="正序"
                inactive-text="倒序">
              </el-switch>
            </div>
            <div v-for="o in 10" :key="o" class="text item">
              {{'node-gateway-' + (o - 1) }} <span style="float:right;">{{(10-o)}}%</span>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :lg="8" :sm="24" :xs="24">
        <div class="chart-wrapper">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>网关节点负载</span>
              <el-switch
                style="float: right; display: block"
                v-model="value2"
                active-color="#13ce66"
                inactive-color="#5ab1ef"
                active-text="正序"
                inactive-text="倒序">
              </el-switch>
            </div>
            <div v-for="o in 10" :key="o" class="text item">
              {{'node-gateway-' + (o - 1)%5 + "-parsing-" + (o - 1)%7  }} <span style="float:right;">{{(40-o)}}%</span>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'
import RaddarChart from './dashboard/RaddarChart'
import PieChart from './dashboard/PieChart'
import BarChart from './dashboard/BarChart'


const yType = {
  "近7秒": ['34:22','34:23','34:24','34:25','34:26','34:27','34:28'],
  "近7分": ['32', '33', '34', '35', '36', '37', '38'],
  "近7小时": ['2', '3', '4', '5', '6', '7', '8'],
  "近7天":['2024-4-12', '2024-4-13', '2024-4-14', '2024-4-15', '2024-4-16', '2024-4-17', '2024-4-18' ],
}

const lineChartData = {
  gatewayNodeSum: {
    title: "网关收集节点数量",
    dataList: [100, 120, 161, 134, 105, 160, 165],
    yType: yType['近7天']
  },
  dataParsingSum: {
    title: "数据解析节点数量",
    dataList: [200, 192, 120, 144, 160, 130, 140],
    yType: yType['近7天']
  },
  overallLoad: {
    title: "整体负载",
    dataList: [80, 100, 121, 104, 105, 90, 100],
    yType: yType['近7天']
  },
  vehicleOnlineSum: {
    title: "车辆在线数",
    dataList: [130, 140, 141, 142, 145, 150, 160],
    yType: yType['近7天']
  }
}

export default {
  name: 'overview',
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart
  },
  data() {
    return {
      lineChartData: lineChartData.gatewayNodeSum,
      formInline: {
        user: '近7天',
        region: '关闭'
      },
      activeName: 1,
      activeTopName: "最长在线TOP10",
      value1: true,
      value2: true
    }
  },
  methods: {
    handleSetLineChartData(type) {
      if (type){
        lineChartData[type].yType = yType[this.formInline.user]
        this.lineChartData = lineChartData[type]
      }else {
        this.lineChartData.yType = yType[this.formInline.user]
      }

    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}
</style>
