<route>
{
  meta: {
    ignoreRouterCheck: true,
  }
}
</route>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}

.total {
  width: 95%;
  margin: 0 auto 0 auto;
}

// 顶部标题
.top_title_box {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  margin-left: 1.5rem;
}

.point {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 1rem;
  background-color: #A72027;
  z-index: 2;
}

.top_title {
  font-size: 25px;
  // font-weight: bold;
}

// 顶部盒子
.top_box_pos {
  width: 350px;
  height: 250px;
  background-color: #ffffff;
  box-shadow: 0 0 30px 10px #f8f8fd;
  border-radius: 10px;
  margin-top: 0.3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  cursor: pointer;
}

.top_content_box {
  width: 100%;
  height: 40%;
  // background-color: green;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}


#main3 {
  width: 1850px;
  height: 100%;
  margin-top: 30px;
  margin-left: -7%;
}

// 柱状图
.Wave_pattern {
  width: 95%;
  height: 450px;
  margin: 0rem auto;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 2px solid #f3f3f3;
  border-radius: 15px;
}

.Wave_pattern>P {
  float: left;
  margin-top: 40px;
  font-family: 幼圆;
}
</style>

<template>
  <!-- 顶部的所有盒子 -->
  <div class="top_title_box">
    <span class="point"></span>
    <p class="top_title">数据预览</p>
  </div>

  <div class="total">
    <div class="top_content_box">

      <CountBox :data="teacherEchartsData" :idx="1" :text="'产品总数'" :img="'img/home/group-1-10.png'"
        :count="teacherData.count" :percentage="teacherData.percentage">
      </CountBox>

      <CountBox :data="infoArticleEchartsData" :idx="2" :text="'新闻总数'" :img="'img/home/group-1-11.png'"
        :count="infoArticleData.count" :percentage="infoArticleData.percentage">
      </CountBox>

      <CountBox :data="flowEchartsData" :idx="3" :text="'访客总数'" :img="'img/home/group-1-12.png'" :count="flowData.count"
        :percentage="flowData.percentage">
      </CountBox>

      <CountBox :data="worksEchartsData" :idx="4" :text="'留言总数'" :img="'img/home/group-1-13.png'" :count="worksData.count"
        :percentage="worksData.percentage">
      </CountBox>

    </div>

  </div>

  <div class="top_title_box" style="margin-top: 50px;">
    <!-- main3是柱状图 -->
    <span class="point"></span>
    <p class="top_title">留言统计</p>
  </div>
  <div class="Wave_pattern">

    <!-- <div class="middle_show_box">

      <div class="middle_pos_box">
        <div class="middle_title_box">
          <span class="point"></span>
          <p class="top_title">预约课程统计</p>
        </div>

        <div class="year_select_box">
          <div class="year_text">2021</div>
          <div class="year_text">2022</div>
          <div class="year_text year_text_actice">2023</div>
        </div>
      </div>

    </div> -->

    <div id="main3"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';
import CountBox from "~/components/Echarts/CountBox.vue"
import { getHomeData } from '~/service/home';

// Echarts数据
let teacherEchartsData = [
  ['1', 500],
  ['2', 900],
  ['3', 460],
  ['4', 1150],
  ['5', 300],
  ['6', 1000],
  ['7', 400],
]

let infoArticleEchartsData = [
  ['1', 500],
  ['2', 900],
  ['3', 460],
  ['4', 1150],
  ['5', 300],
  ['6', 1000],
  ['7', 400],
]

let flowEchartsData = [
  ['1', 500],
  ['2', 900],
  ['3', 460],
  ['4', 1150],
  ['5', 300],
  ['6', 1000],
  ['7', 400],
]

let worksEchartsData = [
  ['1', 500],
  ['2', 900],
  ['3', 460],
  ['4', 1150],
  ['5', 300],
  ['6', 1000],
  ['7', 400],
]

let teacherData = ref({
  count: 12,
  percentage: 0
})
let infoArticleData = ref({
  count: 223,
  percentage: 0
})
let flowData = ref({
  count: 3321,
  percentage: 12.0
})
let worksData = ref({
  count: 12,
  percentage: 0
})
let enrolData = ref({
  "signup": [
    0,
    0,
    0,
    0,
    18,
    0,
    0,
    0,
    0,
    0,
    0,
    0
  ],
  "leave_message": [
    0,
    0,
    0,
    0,
    5,
    0,
    0,
    0,
    0,
    0,
    0,
    0
  ]
})

onMounted(async () => {
  await getHome()
  await echartsInit3()
})

onBeforeUnmount(() => {
  echarts.dispose(document.getElementById('main3'));
});


// 获取接口数据
async function getHome() {
  const { code, data } = await getHomeData();
  if (code == 0) {
    console.log(data,'resaaaaaaaaaaaaaaaaaaaaaaaaaa');
    teacherData.value = data.data_preview.product
    infoArticleData.value = data.data_preview.info_article
    flowData.value = data.data_preview.flow
    worksData.value = data.data_preview.works

    enrolData.value = data.statistics
    console.log(data, "首页");
  }
}



// 柱形图
async function echartsInit3() {
  var chartDom = document.getElementById('main3');
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      right: 200,
      itemWidth: 20, // 设置图标宽度为10px
      itemHeight: 20, // 设置图标宽度为10px
      textStyle: { // 设置字体样式
        color: '#a0a5b2',
        fontSize: 16,
        fontWeight: 'bold',
        padding: [0, 5, 0, 8] // 设置字体和图标之间的间距
      },
      data: ['报名人数', '留言人数']
    },
    calculable: true,
    xAxis: [
      {
        axisTick: {
          show: false // 不显示坐标轴刻度线
        },
        axisLine: {
          lineStyle: {
            color: '#eaeff7' // 坐标轴轴线的颜色
          }
        },
        axisLabel: {
          textStyle: {
            color: '#a4bade', // 坐标轴标签的颜色
            fontSize: 15, // 坐标轴标签的字体大小
            fontWeight: "bold", // 坐标轴标签的字体大小
            lineHeight: 40 // 坐标轴标签的行高，即字体间距
          }
        },
        type: 'category',
        data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
      }
    ],
    yAxis: [
      {
        name: '人数', // 设置 y 轴名称为 "人数"
        nameGap: 35, // 设置名称和轴线之间的距离为 10 像素
        nameTextStyle: {
          color: '#a4bade',
          fontSize: 15,
          padding: [0, 0, 0, -73], // 设置名称文字与轴线之间的间距为 [0, 0, 10, 0]
          fontWeight: "bold", // 坐标轴标签的字体大小
        },
        splitLine: {
          lineStyle: {
            color: '#eaeff7' // 设置网格线的颜色为 #eaeff7
          }
        },
        axisLabel: {
          padding: [0, 15, 0, 0],
          textStyle: {
            color: '#a4bade', // 坐标轴标签的颜色
            fontSize: 15, // 坐标轴标签的字体大小
            fontWeight: "bold", // 坐标轴标签的字体大小
          }
        },
        type: 'value'
      }
    ],
    series: [
      {
        name: '留言人数',
        type: 'bar',
        barWidth: 25,
        itemStyle: {
          normal: {
            color: "#74be8c",
            barBorderRadius: 3,
          },
        },
        data: enrolData.value.leave_message
      }
    ]
  }
  option && myChart.setOption(option);
};


</script>