<template>
  <div class="content ">
    <div class="flex-1 box" style="width:100%;height:390px">
      <h3 class="title ph15">学生健康数据异常分析</h3>
      <div id="barChart" style="width:60%;height:85%;box-sizing: border-box;display:inline-block;margin-right:30px"></div>
      <div id="pieChart" style="width:35%;height:85%;box-sizing: border-box;display:inline-block"></div>
    </div>
    <div style="width:100%;">
      <div class="box mt10" style="width:49.7%;display:inline-block;margin-right:0.6%">
        <h3 class="title ph15">学校健康异常数据报警</h3>
        <div class="ph15 pv20">
          <table class="data-table">
            <tr>
              <th width="40%" class="left">学校名称</th>
              <th width="30%">总人数</th>
              <th width="30%">异常人数</th>
            </tr>
            <tr v-for="item in totalData.school_alert">
              <td>{{item.xxmc}}</td>
              <td class="center">{{item.zrs}}</td>
              <td class="center"><span class="text-red">{{item.ycrs}}</span></td>
            </tr>

          </table>
        </div>
      </div>
      <div class="box" style="width:49.7%;display:inline-block;">
        <div class="title ph15 d-flex flex-between">
          <span>全市/县/学校学生体质健康达标率动态变化</span>
          <el-dropdown class="mr25 hand">
            <span class="el-dropdown-link">
              {{ currentYear }}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="(item,index) in yearData" :key="index" @click="yearSelectHandle(item)">{{ item }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="ph15 pv20">
          <table class="data-table">
            <tr>
              <th width="20%" class="left"></th>
              <th width="30%" class="left">时间</th>
              <th width="20%">不及格率</th>
              <th width="30%" class="left">变化</th>
            </tr>
            <tr v-for="item in totalData.phase_alert">
              <td>{{item.xd}}</td>
              <td>{{item.sj}}</td>
              <td class="center"><span class="text-red">{{item.bjgl}}</span></td>
              <td><span class="text-red">{{item.bh}}</span></td>
            </tr>
          </table>
        </div>
      </div>
    </div>

  </div>

</template>

<script>
import * as echarts from 'echarts';
import { sjgl } from "./api";
export default {
  name: "index",
  data() {
    return {
      totalData: {},
      barData_male: [],
      barData_famale: [],
      bar_xAxisData: [],
      pieData: [],
      yearData: [],
      year: [],
      currentYear: "2022"
    }
  },
  methods: {
    // 处理年份选择数据请求
    yearSelectHandle(param) {
      this.currentYear = param
      //请求后端数据axios
      this.getTotalData(param)
    },
    getTotalData(year) {
      let data = {
        year: ""
      }
      sjgl({ data }).then(res => {
        if (res.code == 1) {
          this.yearData = res.data.year;
          this.totalData = res.data.charts;
          this.middleData = this.totalData.bar.data;
          console.log("%%%%", this.totalData);

          // this.yearData.forEach(item => {
          //   this.year.push(item[1])
          // })

          this.middleData.forEach(item => {
            this.barData_male.push(item[1])
            this.barData_famale.push(item[2])
            this.bar_xAxisData.push(item[0])
          })

          this.totalData.pie.forEach(item => {
            this.pieData.push({
              name: item[0],
              value: item[1]
            })
          })
          this.$nextTick(() => {
            this.barChart();
            this.pieChart();
          })
        }
      })
    },
    barChart() {
      var chartDom = document.getElementById('barChart');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          subtext: '总人数：' + this.totalData.bar.total,
          left: '2%'
        },
        legend: {
          data: ['男', '女'],
          top: '5%',
          right: '5%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.bar_xAxisData,
            axisLabel: {
              interval: 0
            },
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: {
              show: 'true'
            }
          }
        ],
        series: [
          {
            name: '男',
            type: 'bar',
            barWidth: '30px',
            itemStyle: {
              color: '#265CD4'
            },
            data: this.barData_male
          },
          {
            name: '女',
            type: 'bar',
            barWidth: '30px',
            itemStyle: {
              color: '#FD5555'
            },
            data: this.barData_famale
          }
        ]
      };

      option && myChart.setOption(option);
    },
    pieChart() {
      var chartDom = document.getElementById('pieChart');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            //name: 'Access From',
            type: 'pie',
            radius: '50%',
            label: {
              formatter: '{b} {d}%',
            },
            data: this.pieData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      option && myChart.setOption(option);

    }
  },
  mounted() {
    this.getTotalData("2022");
  }
}
</script>

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

.box {
  background: #fff;
  border-radius: 6px;
  box-sizing: border-box;
  padding: 0;
  .title {
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid #f3f3f3;
    font-size: 16px;
    color: #000;
    line-height: 30px;
    padding: 5px 15px;
  }
}
</style>

<style lang="scss" scoped>
.data-table {
  width: 100%;
  border: 0;

  tr {
    width: 100%;
  }

  th {
    font-size: 16px;
    color: #000;

    &.left {
      text-align: left;
    }
  }

  td {
    font-size: 16px;
    color: rgba(0, 0, 0, 0.53);
    padding: 8px 0;

    &.center {
      text-align: center;
    }
  }
}

::v-deep .el-dropdown {
  color: #000000;
}
</style>