<template>
  <div class="content">
    <div class="d-flex">
      <div class="flex-1 content-box">
        <h3 class="title">五育占比</h3>
        <div id="pieChart" style="height: 450px"></div>
      </div>
      <!-- <div class="ml20 flex-1 content-box">
        <h3 class="title">点评率</h3>
        <div class="mt15 text-right pr20">
          <el-select
            placeholder="请选择年级"
            v-model="grade"
            @change="switchGrade"
          >
            <el-option
              v-for="item in gradeList"
              :label="item.grade_name"
              :value="item.grade_id"
            ></el-option>
          </el-select>
        </div>
        <div id="lineChart" style="height: 410px"></div>
      </div> -->
    </div>
    <div class="mt20 content-box">
      <!-- <h3 class="title">成长树</h3> -->
      <!-- <ul class="mt20 ml20 type-list">
        <li>
          <span class="dot purple"></span>
          <span class="d-in-block v-mid">思想品德</span>
        </li>
        <li>
          <span class="dot green"></span>
          <span class="d-in-block v-mid">勤劳勇敢</span>
        </li>
        <li>
          <span class="dot yellow"></span>
          <span class="d-in-block v-mid">综合素质</span>
        </li>
        <li>
          <span class="dot red"></span>
          <span class="d-in-block v-mid">礼貌待人</span>
        </li>
        <li>
          <span class="dot blue"></span>
          <span class="d-in-block v-mid">其他</span>
        </li>
      </ul> -->
      <!-- <div class="mt30 text-center"> -->
      <!-- <img src="@/assets/tree.png" class="w60" alt="" /> -->
      <theTree />
      <!-- </div> -->
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { grade_list, wypj_data } from "./api";
import theTree from './tree.vue'
export default {
  name: "index",
  data() {
    return {
      grade: "",
      gradeList: [],
      content: {},
      curInfo: {},
    };
  },
  components: {
    theTree
  },
  methods: {
    getGradeList() {
      let data = {
        page: 1,
        limit: 999,
      };
      grade_list(data).then((res) => {
        if (res.code == 1) {
          this.gradeList = res.data.page_data;
          this.grade = this.gradeList[0].grade_id;
          this.getWyData();
        }
      });
    },
    getWyData() {
      let data = {
        // grade_id: this.grade,
      };
      wypj_data(data).then((res) => {
        if (res.code == 1) {
          this.content = res.data.content_json;
          if (Object.keys(res.data.content_json).length != 0) {
            // this.curInfo = res.data.content_json.dpl[0];
          }

          this.$nextTick(() => {
            this.getPieBox();
            // this.getLineBox();
          });
        }
      });
    },
    getPieBox() {
      var chartDom = document.getElementById("pieChart");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        legend: {
          top: "30px",
          icon: "circle",
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 40,
        },
        toolbox: {
          show: true,
        },
        series: [
          {
            name: "Nightingale Chart",
            type: "pie",
            radius: [50, 120],
            center: ["50%", "50%"],
            // roseType: "area",
            label: {
              show: true,
              position: "outside",
              formatter: `{b} {d}%`,
              fontSize: 14,
              color: "#333",
            },
             emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: 'bold'
              }
            },
            itemStyle: {
              borderRadius: 0,
            },
            data: this.content,
          },
        ],
      };

      option && myChart.setOption(option);
    },
    getLineBox() {
      var chartDom = document.getElementById("lineChart");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: "axis",
          formatter: "点评率<br /> {c0}%",
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.curInfo?.class_info?.class_name,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.curInfo?.class_info?.class_data,
            type: "line",
            itemStyle: {
              normal: {
                color: "#B479DA",
              },
            },
            lineStyle: {
              color: "#B479DA",
            },
            areaStyle: {
              color: "#B479DA",
              opacity: 0.2,
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },
    // switchGrade() {
    //   for (let i in this.content.dpl) {
    //     if (this.grade == this.content.dpl[i].grade_id) {
    //       this.curInfo = this.content.dpl[i];
    //     }
    //   }
      // this.getLineBox();
    // },
  },
  mounted() {
    this.getGradeList();
  },
};
</script>

<style lang="scss" scoped>
.content {
  background: #f2f6fc;
  height: 100%;
  width: 100%;
  margin: -10px;
  padding-right: 20px;
  padding-bottom: 20px;
}

.content-box {
  width: 100%;
  background: #fff;
  border-radius: 6px;

  .title {
    box-sizing: border-box;
    width: 100%;
    font-size: 18px;
    border-bottom: 1px solid #e4e6e8;
    padding: 15px 0 15px 20px;
  }
}

.type-list {
  display: flex;

  li {
    font-size: 12px;
    color: #171721;

    &+li {
      margin-left: 40px;
    }

    .dot {
      display: inline-block;
      vertical-align: middle;
      width: 10px;
      height: 10px;
      margin-right: 7px;
      border-radius: 50%;

      &.purple {
        background: #5470c6;
      }

      &.green {
        background: #91cc75;
      }

      &.yellow {
        background: #fac858;
      }

      &.red {
        background: #ee6666;
      }

      &.blue {
        background: #73c0de;
      }
    }
  }
}
</style>