<template>
  <div class="container">
    <!-- 标题区域 -->
    <div class="title">
      <div class="title_text">校园介绍</div>
      <div class="title_sub">Campus Introduction</div>
    </div>

    <!-- 内容区域 -->
    <div class="content">
      <div class="sub_title">校园简介</div>
      <div class="school_msg">
        <span :title="desc">
          {{ desc }}
        </span>
      </div>
      <div class="sub_title">办学规模</div>
      <!-- 办学规模图 -->
      <div class="pieChart">
        <!-- 左边区域 -->
        <div class="pieChart_left">
          <!-- 每一个年级区域 -->
          <div class="left_box" v-for="(item, index) in classList" :key="index">
            <div class="icon">
              <el-icon v-if="index === 0" size="18" color="#5AC8ED"
                ><UserFilled />
              </el-icon>
              <el-icon v-if="index === 1" size="18" color="#3099F0"
                ><UserFilled
              /></el-icon>
              <el-icon v-if="index === 2" size="18" color="#E3B97B"
                ><UserFilled
              /></el-icon>
              <el-icon v-if="index === 3" size="18" color="#5CE0A3"
                ><UserFilled
              /></el-icon>
            </div>
            <div class="msg">
              <div class="msg_class">{{ item.name }}</div>
              <div class="msg_num" ref="numDom" :data-value="item.value">
                {{ item.value }}
              </div>
            </div>
          </div>
        </div>
        <!-- 右边区域 -->
        <div class="pieChart_right" ref="pieChart"></div>
      </div>
      <div class="sub_title">近一年访客管理</div>
      <!-- 访客管理图 -->
      <div class="lineChart" ref="lineChart"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick, watch } from "vue";
import * as Echarts from "echarts";
import { countUpNum } from "@/utils/countUpNum";
import { reqGetSchoolScale, reqGetSchoolVisitor } from "@/api/school/index";
import type { classData } from "@/api/school/type";

// 办学规模数组
const classList = ref<classData[]>([]);
// 总人数数据
const peopleNum = ref<number>(0);
// DOM元素数组
const numDom = ref();

// 校园简介数据
const desc = ref(
  "万载县第三中学，位于万载县城内。学校始建于1957年，由一个祠堂改造而成，原名叫东风镇中学，当时校园面积仅14258平方米。后来改名为康乐中学，2007年更名为万载县第三中学。康乐中学是一所与时俱进，充满生机，面向未来，不断创新的学校。学校设有标准的理、化、生实验室。多媒体教室、语音室、微机室、阅览室、图书馆。建成了Internet宽带校园网与有线电视网络。2001年向全校教职工筹资500万元兴建三栋学生公寓（可容纳1500住宿）和一栋学生食堂（可同时容纳3000多人用餐）。另外，文化长廊、雕塑、草坪、假山，以及标准的运动场地，为学生创造了优良的休息和活动环境。学校还加强校园绿化工作，实现了花香、草青、树绿的园林式学校布局"
);

// 办学规模图表实例
let myPieChart: any;
// 办学规模图表DOM
const pieChart = ref(null);

// 访客管理图表实例
let myLineChart: any;
// 访客管理图表DOM
const lineChart = ref(null);

onMounted(() => {
  // 获取办学规模信息
  getSchoolScale();

  // 获取近一年访客管理信息
  getSchoolVisitor();

  // 初始化访客管理图表
  initLineChart();
});

// 监听数据变化
watch(classList, () => {
  // 让数字跳动
  getCountUpNum();
});

// 获取办学规模信息
const getSchoolScale = async () => {
  const res = await reqGetSchoolScale();
  // console.log(res);
  classList.value = res.data;

  // 把num属性换成value属性
  let arr: any = [];

  classList.value.forEach((ele) => {
    arr.push({
      value: ele.num,
      name: ele.name,
    });
  });

  classList.value = arr;

  // 计算出总人数
  peopleNum.value = classList.value.reduce((pre, cur) => pre + cur.value, 0);

  // 初始化办学规模图表
  initPieChart();
};

// 获取近一年访客管理信息
const getSchoolVisitor = async () => {
  const res = await reqGetSchoolVisitor();
  // console.log(res);
};

// 初始化办学规模图表
const initPieChart = () => {
  myPieChart = Echarts.init(pieChart.value);
  // 图表配置
  const options = {
    tooltip: {
      trigger: "item",
    },
    title: {
      text: peopleNum.value,
      left: "32%",
      top: "40%",
      textStyle: {
        fontSize: 34.5,
        color: "#FFF",
      },
      subtext: "{a|总人数}",
      subtextStyle: {
        fontSize: 12,
        color: "#99C5FF",
        rich: {
          a: {
            padding: [0, 0, 0, 20],
          },
        },
      },
    },
    color: ["#5AC8ED", "#3099F0", "#E3B97B", "#5CE0A3"],
    series: [
      {
        name: "办学规模",
        type: "pie",
        radius: ["50%", "65%"],
        center: ["52%", "50%"],
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        tooltip: {
          valueFormatter: function (value: any) {
            return value + "人";
          },
        },
        data: classList.value,
      },
    ],
  };
  myPieChart.setOption(options);
};

// 初始化访客管理图表
const initLineChart = () => {
  myLineChart = Echarts.init(lineChart.value);
  // 图表配置
  const options = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {
      data: ["访客", "家长"],
      left: "60%",
      top: 18,
      textStyle: {
        color: "#fff",
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    color: ["#50A4E1", "#FFE0B3"],
    xAxis: {
      type: "category",
      axisTick: {
        show: false,
      },
      axisLabel: {
        margin: 12,
        interval: 0,
        fontSize: 13,
        color: "#fff",
      },
      boundaryGap: false,
      data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
    },
    yAxis: {
      type: "value",
      name: "人",
      nameTextStyle: {
        fontSize: 13,
        color: "#fff",
      },
      axisLabel: {
        color: "#fff",
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(108, 128, 151, 0.1)",
        },
      },
    },
    series: [
      {
        name: "访客",
        type: "line",
        smooth: true,
        showSymbol: false,
        areaStyle: {
          color: new Echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(80, 164, 225, 0.2)",
            },
            {
              offset: 1,
              color: "rgba(80, 164, 225, 0)",
            },
          ]),
        },
        data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90],
      },
      {
        name: "家长",
        type: "line",
        smooth: true,
        showSymbol: false,
        areaStyle: {
          color: new Echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(255, 224, 179, 0.2)",
            },
            {
              offset: 1,
              color: "rgba(255, 224, 179, 0)",
            },
          ]),
        },
        data: [220, 182, 191, 234, 120, 132, 101, 134, 90, 290, 330, 310],
      },
    ],
  };
  myLineChart.setOption(options);
};

// 让数字跳动
const getCountUpNum = () => {
  nextTick(() => {
    numDom.value.forEach((el: any) => {
      countUpNum(el, el.dataset.value);
    });
  });
};
</script>

<style lang="scss" scoped>
.container {
  width: 435px;
  height: 951px;
  color: #fff;
  background-image: url(@/assets/images/box-bg.png);

  .title {
    display: flex;
    align-items: center;
    width: 430px;
    height: 47px;
    font-family: "庞门正道标题体";
    background-image: url(@/assets/images/title-bg.png);
    background-size: 100% 100%;

    .title_text {
      margin-left: 38px;
      font-size: 20px;
      text-shadow: 0px 0px 9px #158eff;
    }

    .title_sub {
      margin-left: 19px;
      font-size: 12px;
      color: #215a8e;
    }
  }

  .content {
    padding: 20px 19px 0 14px;
    height: 904px;

    .sub_title {
      padding-left: 28px;
      height: 35px;
      line-height: 18px;
      color: #abd6ff;
      font-weight: bold;
      background-image: url(@/assets/images/title-bg2.png);
      background-size: 100% 100%;
    }

    .school_msg {
      padding: 20px 0;
      height: 268px;
      line-height: 23px;
      font-size: 12px;

      span {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 10;
        overflow: hidden;
      }
    }

    .pieChart {
      display: flex;
      height: 259px;

      .pieChart_left {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;
        padding: 20px 0;
        height: 100%;

        .left_box {
          display: flex;
          align-items: center;
          height: 45px;
          background-image: url(@/assets/images/class-bg.png);
          background-size: 100% 100%;

          .icon {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 10px 0 12px;
            width: 33px;
            height: 33px;
            background-size: 100% 100%;
            background-image: url(@/assets/images/icon-bg.png);
          }

          .msg {
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .msg_class {
              color: #cce6ff;
              font-size: 12px;
            }

            .msg_num {
              color: #d5e3ea;
              font-size: 16px;
              font-weight: bold;
            }
          }
        }
      }

      .pieChart_right {
        width: 240px;
        height: 100%;
      }
    }

    .lineChart {
      height: 251px;
    }
  }
}
</style>
