<template>
  <div class="app-container home" style="max-height: 100vh; overflow: auto">
    <el-row :gutter="15">
      <el-col :sm="24" :lg="12" style="padding-left: 15px; padding-bottom: 15px">
        <el-card>
          <template #header>
            <div class="flex items-center justify-between">
              <h2>常用功能</h2>
              <el-button>
                <template #icon>
                  <el-icon :size="30" color="red"><Setting /></el-icon>
                </template>
              </el-button>
            </div>
          </template>
          <div class="h-45 text-center flex items-center justify-center"><span>请点击右上方按钮，添加常用功能模块！</span></div>
        </el-card>
      </el-col>

      <el-col :sm="24" :lg="12" style="padding-left: 15px; padding-bottom: 15px">
        <el-card>
          <template #header><h2>我的一卡通</h2></template>
          <div class="h-45 text-center flex items-center justify-center leading-7">
            <img class="w-150px h-150px mr-10px" src="@/assets/images/defaultPhoto.jpg" />
            <div class="text-left">
              <p>
                学/工号：<span style="color: #1c87bb"></span>
                <br />
                用户名：<span style="color: #1c87bb">{{ userStore.nickname }}</span>
                <br />
                主部门：<span style="color: #1c87bb"></span>
                <br />
                主岗位：<span style="color: #1c87bb"></span>
                <br />
                余额：<span style="color: #1c87bb">￥</span><span style="color: #1c87bb">0</span>
                <br />
              </p>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :sm="24" :lg="12" style="padding-left: 15px; padding-bottom: 10px">
        <el-card class="h-110">
          <template #header><h2>服务器资源占用</h2></template>
          <div class="pt-8 h-80" style="overflow-y: auto; overflow-x: hidden">
            <el-row :gutter="30">
              <el-col :sm="24" :lg="12">
                <div id="cpu" ref="cpu" class="h-70"></div>
              </el-col>
              <el-col :sm="24" :lg="12">
                <div id="mem" ref="mem" class="h-70"></div>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>

      <el-col :sm="24" :lg="12" style="padding-left: 15px; padding-bottom: 10px">
        <el-card class="h-110" style="overflow-y: auto">
          <template #header><h2>消费数据、充值/补贴</h2></template>
          <div class="h-80" style="overflow-y: auto; overflow-x: hidden">
            <el-row :gutter="20">
              <el-col :sm="24" :lg="12">
                <el-table v-loading="consumptionLoading" :data="consumptionList" height="310" border>
                  <el-table-column label="消费时间" align="left" header-align="center" prop="termId" show-overflow-tooltip />
                  <el-table-column label="消费金额" align="left" header-align="center" prop="termNo" show-overflow-tooltip />
                  <template #empty>
                    <!-- 自定义没有数据时的显示 -->
                    <p style="color: #303133">暂无消费数据...</p>
                  </template>
                </el-table>
                <!-- 翻页组件 -->
                <!-- <pagination
                  v-show="total > 0"
                  v-model:page="queryParams.pageNum"
                  v-model:limit="queryParams.pageSize"
                  :total="total"
                  @pagination="getList"
                /> -->
              </el-col>
              <el-col :sm="24" :lg="12">
                <el-table v-loading="rechargeLoading" :data="rechargeList" height="310" border>
                  <el-table-column label="充值时间" align="left" header-align="center" prop="termId" show-overflow-tooltip />
                  <el-table-column label="充值/补贴金额" align="left" header-align="center" prop="termNo" show-overflow-tooltip />
                  <template #empty>
                    <!-- 自定义没有数据时的显示 -->
                    <p style="color: #303133">暂无充值/补贴数据...</p>
                  </template>
                </el-table>
                <!-- 翻页组件 -->
                <!-- <pagination
                  v-show="total > 0"
                  v-model:page="queryParams.pageNum"
                  v-model:limit="queryParams.pageSize"
                  :total="total"
                  @pagination="getList"
                /> -->
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-divider />
    <CopyrightIcp></CopyrightIcp>
  </div>
</template>

<script setup name="Index" lang="ts">
import { Setting } from '@element-plus/icons-vue';
import * as echarts from 'echarts';
import CopyrightIcp from '@/components/copyright-icp.vue';
import useUserStore from '@/store/modules/user';
/* const goTarget = (url: string) => {
  window.open(url, '__blank');
};
 */
type EChartsOption = echarts.EChartsOption;

const consumptionLoading = ref(false);

const rechargeLoading = ref(false);

const consumptionList = ref([]);
const rechargeList = ref([]);

const userStore = useUserStore();

onMounted(() => {
  initCpu();
  initMem();
  window.addEventListener('resize', () => {
    myChart.resize();
    myChartMem.resize();
  });
});

onUnmounted(() => {
  // 销毁echarts实例
  if (window.document.getElementById('cpu')) {
    echarts.dispose(window.document.getElementById('cpu')!);
  }
  if (window.document.getElementById('mem')) {
    echarts.dispose(window.document.getElementById('mem')!);
  }
  window.removeEventListener('resize', () => {
    myChart.resize();
    myChartMem.resize();
  });
});

let option: EChartsOption;

option = {
  title: {
    text: 'CPU',
    subtext: '',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'CPU空闲率' },
        { value: 580, name: 'CPU使用率' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ],
  color: ['#9fe080', '#ff7070', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
};

let optionMeM: EChartsOption;

optionMeM = {
  title: {
    text: '内存',
    subtext: '',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 484, name: '内存空闲率' },
        { value: 20, name: '内存使用率' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ],
  color: ['#5c7bd9', '#ffdc60', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
};

let myChart = null;
function initCpu() {
  let chartDom = null;
  chartDom = window.document.getElementById('cpu')!;
  myChart = echarts.init(chartDom);
  option && myChart.setOption(option);
}

let myChartMem = null;
function initMem() {
  let chartDomMem = window.document.getElementById('mem')!;
  myChartMem = echarts.init(chartDomMem);
  optionMeM && myChartMem.setOption(optionMeM);
}

</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 20px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: 'open sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 15px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>
