<template>
  <div class="app-container">
    <el-form
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="90px"
    >
      <student
        style="width: 500px; display: inline"
        @itemlist="itemlists"
      ></student>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >查看</el-button
        >
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-row v-show="itemshow">
      <el-col :span="24" class="card-box" style="">
        <el-card>
          <div style="margin-left: 50px">
            <span>学校排名:</span
            ><span style="margin-left: 20px; margin-right: 20px">{{
              analysislist.schoolRank
            }}</span
            >名 <span style="margin-left: 50px">区域排名:</span
            ><span style="margin-left: 20px; margin-right: 20px">{{
              analysislist.areaRank
            }}</span
            >名 <span style="margin-left: 50px">区域成绩占比:</span
            ><span style="margin-left: 20px; margin-right: 20px">{{
              analysislist.areaProportion
            }}</span
            >
          </div>

          <div slot="header" style="text-align: center; font-size: 25px">
            <span>体测项目分值与全校、全市对比</span>
          </div>
          <div style="width: 100%; display: flex; flex-wrap: wrap">
            <div
              v-for="(item, index) in analysislist.itemScoreList"
              :key="index"
              style="
                width: 30%;
                height: 300px;
                margin-left: 3%;
                margin-top: 20px;
              "
            >
              <div
                class="bar"
                style="width: 400px; height: 300px; margin: 0 auto"
              ></div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" v-if="itemshow2">
      <el-col :span="24" :offset="0">
        <el-card>
          <div slot="header" style="text-align: center">
            <img style="width: 40px" src="@/icons/笑脸.png" alt="" />

            <div><!-- card title -->该学生此批次暂没数据</div>
          </div>
          <!-- card body -->
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import * as echarts from "echarts";
import student from "@/views/assembly/student.vue";
import { getRoleInfo } from "@/api/system/quality";
import { analysis } from "@/api/system/constitution";
export default {
  name: "constitution",
  components: {
    student,
  },
  data() {
    return {
      itemshow: false,
      itemshow2: false,
      // 显示搜索条件
      showSearch: true,
      //analysislist
      analysislist: [],
      //查询传值
      analysisqueryParams: {
        studentId: "",
        batchCode: "",
      },
    };
  },
  mounted() {},
  created() {},
  methods: {
    itemlists(studentId, batchCode) {
      console.log(studentId, batchCode);
      this.analysisqueryParams.studentId = studentId;
      this.analysisqueryParams.batchCode = batchCode;
    },
    /** 查看按钮操作 */
    handleQuery() {
      this.analysislists();
    },
    options() {
      var myEchart = document.getElementsByClassName("bar");
      // var myEchart = document.querySelectorAll(".bar");
      for (var i = 0; i < this.analysislist.itemScoreList.length; i++) {
        var ydata = [
          this.analysislist.itemScoreList[i].itemScore,
          this.analysislist.itemScoreList[i].schoolAvgScore,
          this.analysislist.itemScoreList[i].cityAvgScore,
        ];

        var textname = this.analysislist.itemScoreList[i].itemName;
        //   console.log(ydata);
        var myChart = echarts.init(myEchart[i]);
        var option = {
          title: {
            text: textname,
            subtext: "",
            left: "50%",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
            formatter: function (params) {
              var tar = params[1];
              return tar.name + "<br/>" + tar.seriesName + " : " + tar.value;
            },
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: {
            type: "category",
            splitLine: { show: false },
            data: this.analysislist.itemStudentList,
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              name: "Placeholder",
              type: "bar",
              stack: "Total",
              itemStyle: {
                borderColor: "blue",
                color: "blue",
              },
              emphasis: {
                itemStyle: {
                  borderColor: "transparent",
                  color: "transparent",
                },
              },
              data: [0, 0, 0],
            },
            {
              name: "分数",
              type: "bar",
              stack: "Total",
              // center: ["50%", "50%"],
              barWidth: 35,
              label: {
                show: true,
                position: "inside",
              },
              itemStyle: {
                normal: {
                  color: function (colors) {
                    var colorList = [
                      "#91cd77",
                      "#5470c6",
                      "#fc8251",
                      "#ef6567",
                      "#f9c956",
                      "#75bedc",
                    ];
                    return colorList[i];
                  },
                },
              },

              // itemStyle: {
              //   borderColor: "#94D8F6",
              //   color: "#94D8F6",
              // },
              data: ydata,
            },
          ],
        };

        myChart.setOption(option);
        this.itemshow = true;
        this.itemshow2 = false;
      }
    },
    //综合体质分析
    analysislists() {
      analysis(this.analysisqueryParams).then((res) => {
        console.log(res);
        if (!res.data || res.data == "") {
          this.itemshow2 = true;
          this.itemshow = false;
          // this.batchCodeName = "请选择批次";
          // this.batchCodeId = "";
        } else {
          this.analysislist = res.data;
          this.$nextTick(() => {
            this.options();
          });
        }
      });
    },
    getList() {
      //用户权限
      getRoleInfo().then((res) => {
        console.log(res);
        this.classqueryParams.kindergartenId = res.data.kindergartenId;
        var user = res.data.roleKeys;
        if (user.includes("enchou")) {
          return;
        } else if (user.includes("teacher")) {
          return;
        } else if (user.includes("parent")) {
          return;
        }
      });
    },
    // 表单重置
    reset() {
      this.form = {};
      this.resetForm("form");
    },
  },
};
</script>
<style scoped='scss'>
::v-deep .el-card__header {
  border: none;
}
::v-deep .el-form {
  display: inline;
}
</style>
