<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">
        <el-card>
          <div slot="header" style="text-align: center; margin-bottom: 10px">
            <span>学生基本信息</span>
          </div>
          <div
            class="el-table--enable-row-hover el-table--medium"
            style="
              margin-top: 10px;
              padding-bottom: 20px;
              border-bottom: 1px solid #f0f0f0;
              padding-left: 20px;
            "
          >
            <div style="display: flex; justify-content: space-around">
              <div class="cell" style="width: 20%">姓名:{{ sythesizestudent.studentName }}</div>
              <div
                class="cell"
                style="width: 20%"
              >性别:{{ sythesizestudent.studentSex == "MALE" ? "男" : "女" }}</div>
              <div class="cell" style="width: 20%">年龄:{{ sythesizestudent.studentAge }}岁</div>
              <div class="cell" style="width: 20%">民族:{{ sythesizestudent.nationName }}</div>
              <div class="cell" style="width: 20%">ID:{{ sythesizestudent.studentNumber }}</div>
            </div>
            <div style="display: flex; margin-top: 20px">
              <div class="cell" style="width: 60%">所属幼儿园:{{ sythesizestudent.kindergartenName }}</div>
              <div class="cell">班级:{{ sythesizestudent.className }}</div>
            </div>
            <div style="width: 60%; margin-top: 20px">
              <div class="cell">地址:{{ sythesizestudent.kindergartenAddress }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="24" class="card-box">
        <el-card style="margin-top: 10px">
          <div
            class="el-table--enable-row-hover el-table--medium"
            style="
              margin: 20px auto;
              height: 110px;
              text-align: center;
              border-bottom: 1px solid #f0f0f0;
              line-height: 40px;
            "
          >
            <div style="text-align: center; font-size: 18px; margin-bottom: 10px">幼儿综合得分</div>
            <div style="display: inline-block">
              <span
                style="
                  position: relative;
                  display: inline-block;
                  text-align: center;
                "
                v-for="(item, index) in sythesizestudent.firstItemCategoryList"
                :key="index"
              >
                <span :style="index == 0 ? '' : 'margin:0 20px'">
                  {{
                  index == 0 ? null : "+"
                  }}
                </span>
                <span>{{ item.categoryName }}( {{ item.categoryScore }})</span>
              </span>
            </div>
            <div style="display: inline-block; position: relative">
              <span style="margin: 0 20px">=</span>
              <span>综合得分({{ sythesizestudent.totalCategoryScore }})</span>
              <span
                style="
                  display: inline-block;
                  position: absolute;
                  top: 20px;
                  width: 80px;
                  left: 29px;
                "
              ></span>
            </div>
          </div>
          <div style="text-align: center; font-size: 18px; margin-top: 20px">获取徽章</div>
          <div
            style="
              width: 70%;
              display: flex;
              text-align: center;
              justify-content: space-around;
              margin: 20px auto 10px;
            "
          >
            <span v-for="(item, index) in sythesizestudent.categoryNameList" :key="index">
              <img style="width: 60px; height: 60px" src="@/icons/金牌2.png" alt />
              <div style="margin-top: 10px; font-size: 14px">{{ item }}</div>
            </span>
          </div>
        </el-card>
      </el-col>

      <el-col :span="24" class="card-box" style="margin-top: 10px">
        <el-card>
          <div slot="header" style="text-align: center">
            <span>综合体质分析图</span>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="chart" id="chart" style="width: 1000px; height: 600px; margin: 0 auto"></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 type="text/javascript" src="../jquery.min.js"></script>
<script>
import * as echarts from "echarts";
import student from "@/views/assembly/student.vue";
import { getRoleInfo } from "@/api/system/quality";
import { synthesize } from "@/api/system/comprehensive";

export default {
  name: "comprehensive",
  components: { student },
  data() {
    return {
      itemshow: false,
      itemshow2: false,
      // 显示搜索条件
      showSearch: true,
      //学生基本信息
      sythesizestudent: [],
      // 综合体质分析查询参数
      synthesizelist: {
        studentId: "",
        batchCode: ""
        // studentId: "27",
        // batchCode: "PC202208230011",
      }
    };
  },

  created() {
    // this.synthesizeinfo();
  },
  methods: {
    itemlists(studentId, batchCode) {
      this.synthesizelist.studentId = studentId;
      this.synthesizelist.batchCode = batchCode;
    },
    /** 查看按钮操作 */
    handleQuery() {
      this.synthesizeinfo();
    },
    //综合体质分析素质
    synthesizeinfo() {
      synthesize(this.synthesizelist).then(res => {
        if (res.data == [] || !res.data) {
          this.itemshow2 = true;
          this.itemshow = false;
        } else {
          this.sythesizestudent = res.data;
          let seriesData = [];
          let yindicator = [];
          if (res.data.physiqueCategoryList.length == 1) {
            var obj = {
              categoryName: "暂无",
              categoryNameAbbreviate: "暂无",
              categoryScore: null,
              levelName: "暂无",
              maxScore: null
            };
            res.data.physiqueCategoryList.push(obj);
            res.data.physiqueCategoryList.push(obj);
            res.data.physiqueCategoryList.push(obj);
          }
          if (res.data.physiqueCategoryList.length == 2) {
            var obj = {
              categoryName: "暂无",
              categoryNameAbbreviate: "暂无",
              categoryScore: null,
              levelName: "暂无",
              maxScore: null
            };
            res.data.physiqueCategoryList.push(obj);
            res.data.physiqueCategoryList.push(obj);
          }
          res.data.physiqueCategoryList.forEach(el => {
            seriesData.push(el.categoryScore);
            if (el.levelName == null) {
              el.levelName = "暂无";
            }
            yindicator.push({
              name: el.categoryName,
              max: el.maxScore
            });
          });
          var myChart = echarts.init(document.getElementById("chart"));
          let option = {
            //配置维度的最大值
            color: "blue",
            radar: {
              name: {
                show: true,
                color: "black"
              },
              center: ["50%", "50%"],
              //   雷达图的指示器，用来指定雷达图中的多个变量（维度）
              indicator: yindicator,
              shape: "polygon" //对雷达图形设置成一个圆形,可选 circle:圆形,polygon:多角形(默认)
            },
            series: [
              {
                type: "radar",
                label: {
                  show: true,
                  color: "blue" //显示数值
                },
                areaStyle: {}, //每个雷达图形成一个阴影的面积
                data: [
                  {
                    name: "成绩区域",
                    value: seriesData
                  }
                ],
                areaStyle: {
                  color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
                    {
                      color: "rgba(50, 50, 255, 0.1)",
                      offset: 0
                    },
                    {
                      color: "rgba(50, 50, 200, 0.9)",
                      offset: 1
                    }
                  ])
                }
              }
            ]
          };
          // 绘制图表
          myChart.setOption(option);
          this.itemshow2 = false;
          this.itemshow = true;
          // postImage();
          // function postImage() {
          //   // 向后台发起请求保存图片到指定目录.
          //   $.ajax({
          //     type: "POST",
          //     dataType: "json",
          //     url: "http://192.168.16.62:8080",
          //     data: { picInfo:  },
          //     success: function () {
          //       alert("通过post请求传输数据成功!");
          //     },
          //   });
          // }
        }
        // var myChart = echarts.init(document.getElementById("chart"));
        // var option;
        // option = {
        //   color: ["#f6da22", "#bbe2e8", "#6cacde"],
        //   legend: {
        //     data: ["Allocated Budget", "Actual Spending"],
        //   },
        //   radar: {
        //     indicator: yindicator,
        //     color: "#fff",
        //   },
        //   series: [
        //     {
        //       name: "Budget vs spending",
        //       type: "radar",
        //       data: [
        //         {
        //           value: seriesData,
        //           name: "综合体质分析图",
        //   areaStyle: {
        //     color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
        //       {
        //         color: "rgba(255, 145, 124, 0.1)",
        //         offset: 0,
        //       },
        //       {
        //         color: "rgba(255, 145, 124, 0.9)",
        //         offset: 1,
        //       },
        //     ]),
        //   },
        // },
        //       ],
        //     },
        //   ],
        // };
        // option && myChart.setOption(option);
        // option = {
        //   legend: {
        //     top: "bottom",
        //   },
        //   toolbox: {
        //     show: true,
        //     feature: {
        //       mark: { show: true },
        //       dataView: { show: true, readOnly: false },
        //       restore: { show: true },
        //       saveAsImage: { show: true },
        //     },
        //   },
        //   series: [
        //     {
        //       name: "Nightingale Chart",
        //       type: "pie",
        //         radius: '50%',
        //       center: ["50%", "50%"],
        //       roseType: "area",
        //       itemStyle: {
        //         normal: {
        //           color: function (colors) {
        //             var colorList = [
        //               "#91cd77",
        //               "#5470c6",
        //               "#fc8251",
        //               "#ef6567",
        //               "#f9c956",
        //               "#75bedc",
        //               "#FCEF03",
        //               "#E12BE4",
        //               "#0070C0",
        //             ];
        //             return colorList[colors.dataIndex];
        //           },
        //         },
        //       },
        //       data: seriesData,
        //     },
        //   ],
        // };
        // option && myChart.setOption(option);
      });
    },
    getList() {
      //用户权限
      getRoleInfo().then(res => {
        this.classqueryParams.kindergartenId = res.data.kindergartenId;
        var user = res.data.roleKeys;
        if (user.includes("enchou")) {
          this.showyey = false;
          return;
        } else if (user.includes("teacher")) {
          this.showyey = false;
          return;
        } else if (user.includes("parent")) {
          this.showyey = false;
          this.showbj = false;
          return;
        }
      });
    },
    // 表单重置
    reset() {
      this.form = {};
      this.resetForm("form");
    }
  }
};
</script>
<style scoped='scss'>
::v-deep .el-form {
  display: inline;
}
</style>