<template>
  <div>
    <el-row class="width-100" justify="space-between">
      <el-row :gutter="20" class="width-100">
        <el-col :span="6">
          <el-card>
            <template #header>
              <el-row :gutter="15" justify="space-between">
                <el-col :span="12">
                  <h2>框架访问人数</h2>
                </el-col>
                <el-col :span="12">
                  <h1>100</h1>
                </el-col>
              </el-row>
            </template>
            今天的天气也很好呀
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card>
            <template #header>
              <el-row :gutter="15" justify="space-between">
                <el-col :span="12">
                  <h2>留言总数</h2>
                </el-col>
                <el-col :span="12">
                  <h1>3205</h1>
                </el-col>
              </el-row>
            </template>
            每一天都有希望
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card>
            <template #header>
              <el-row :gutter="15" justify="space-between">
                <el-col :span="12">
                  <h2>用户数量</h2>
                </el-col>
                <el-col :span="12">
                  <h1>421</h1>
                </el-col>
              </el-row>
            </template>
            期待美好的事情发生
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card>
            <template #header>
              <el-row :gutter="15" justify="space-between">
                <el-col :span="12">
                  <h2>总文章数</h2>
                </el-col>
                <el-col :span="12">
                  <h1>421</h1>
                </el-col>
              </el-row>
            </template>
            明天将会发生什么呢
          </el-card>
        </el-col>
      </el-row>
    </el-row>

    <el-row style="margin-top: 15px" :gutter="20" class="width-100">
      <el-col :span="18" style="height: 500px">
        <el-card class="height-100" body-style="height:100%">
          <baseEcharts></baseEcharts>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="height: 500px; overflow-y: auto">
          <template #header> 更新动态 </template>
          <p v-for="i in 20" :key="i">今天这里是第{{ i }}篇文章</p>
        </el-card>
      </el-col>
      <el-col :span="24" style="margin-top: 15px">
        <el-card>
          <baseEcharts :option="lineStack" style="height: 500px"></baseEcharts>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
import baseEcharts from "@/components/baseEcharts/baseEcharts.vue";

const data = reactive({});
const lineStack = reactive({
  title: {
    text: "Stacked Line",
  },
  tooltip: {
    trigger: "axis",
  },
  legend: {
    data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true,
  },
  toolbox: {
    feature: {
      saveAsImage: {},
    },
  },
  xAxis: {
    type: "category",
    boundaryGap: false,
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      name: "Email",
      type: "line",
      stack: "Total",
      data: [120, 132, 101, 134, 90, 230, 210],
    },
    {
      name: "Union Ads",
      type: "line",
      stack: "Total",
      data: [220, 182, 191, 234, 290, 330, 310],
    },
    {
      name: "Video Ads",
      type: "line",
      stack: "Total",
      data: [150, 232, 201, 154, 190, 330, 410],
    },
    {
      name: "Direct",
      type: "line",
      stack: "Total",
      data: [320, 332, 301, 334, 390, 330, 320],
    },
    {
      name: "Search Engine",
      type: "line",
      stack: "Total",
      data: [820, 932, 901, 934, 1290, 1330, 1320],
    },
  ],
});
</script>
<style lang="scss" scoped>
.el-carousel__item h3 {
  display: flex;
  color: #475669;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
  text-align: center;
  width: 100%;
}
</style>
