<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="11" class="card-box" style="margin-left: 30px; margin-right: 50px">
        <el-card>
          <div slot="header" style="text-align: center">
            <span>{{ analysislist.shapeTitle }}</span>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="commandstats" style="height: 100px">{{ analysislist.shapeDescription }}</div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="11" class="card-box">
        <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="commandstats" style="height: 100px">
              <table cellspacing="0" style="width: 100%; height: 100px">
                <tbody>
                  <tr>
                    <td class="el-table__cell is-leaf" style="text-align: center">
                      <div class="cell">
                        姓名:
                        {{ analysislist.studentName }}
                      </div>
                    </td>
                    <td class="el-table__cell is-leaf" style="text-align: center">
                      <div class="cell">
                        {{
                        analysislist.heightName
                        ? analysislist.heightName
                        : "身高"
                        }}: {{ analysislist.heightScore
                        }}{{ analysislist.heightMeasureUnit }}
                      </div>
                    </td>
                    <td class="el-table__cell is-leaf" style="text-align: center">
                      <div class="cell">
                        {{
                        analysislist.weightName
                        ? analysislist.weightName
                        : "体重"
                        }}: {{ analysislist.weightScore
                        }}{{ analysislist.weightMeasureUnit }}
                      </div>
                    </td>
                    <td class="el-table__cell is-leaf" style="text-align: center">
                      <div class="cell">
                        <div class="cell">BMI值: {{ analysislist.bmi }}</div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row style="margin-top: 50px" v-show="itemshow">
      <!-- <el-col
        :span="11"
        class="card-box"
        style="margin-left: 30px; margin-right: 50px; height: 370px"
      >
        <el-card>
          <div slot="header" style="text-align: center">
            <span>年龄身高体重比图</span>
          </div>

          <div
            class="el-table el-table--enable-row-hover el-table--medium"
            style="height: 310px"
          >
            <div
              v-show="heightshow"
              slot="header"
              style="text-align: center; font-size: 12px; padding-top: 20px"
            >
              <span>年龄身高比</span>

              <div
                style="
                  width: 400px;
                  margin: 0 auto;
                  height: 70px;
                  margin-top: 10px;
                  position: relative;
                "
              >
                <div
                  style="
                    position: absolute;
                    top: 1px;
                    left: 79%;
                    line-height: 20px;
                  "
                >
                  {{
                    ((((heightMax - heightMin) / heightMin) * heightMin) / 5) *
                      4 +
                    heightMin
                  }}
                </div>
                <div
                  style="
                    position: absolute;
                    top: 20px;
                    left: 80%;
                    width: 1px;
                    height: 15px;
                    background: #a2a4a1;
                  "
                ></div>
                <div
                  style="
                    position: absolute;
                    top: 1px;
                    left: 59%;
                    line-height: 20px;
                  "
                >
                  {{
                    ((((heightMax - heightMin) / heightMin) * heightMin) / 5) *
                      3 +
                    heightMin
                  }}
                </div>
                <div
                  style="
                    position: absolute;
                    top: 20px;
                    left: 60%;
                    width: 1px;
                    height: 15px;
                    background: #a2a4a1;
                  "
                ></div>
                <div
                  style="
                    position: absolute;
                    top: 1px;
                    left: 39%;
                    line-height: 20px;
                  "
                >
                  {{
                    ((((heightMax - heightMin) / heightMin) * heightMin) / 5) *
                      2 +
                    heightMin
                  }}
                </div>
                <div
                  style="
                    position: absolute;
                    top: 20px;
                    left: 40%;
                    width: 1px;
                    height: 15px;
                    background: #a2a4a1;
                  "
                ></div>

                <div
                  style="
                    position: absolute;
                    top: 1px;
                    left: 19%;
                    line-height: 20px;
                  "
                >
                  {{
                    ((((heightMax - heightMin) / heightMin) * heightMin) / 5) *
                      1 +
                    heightMin
                  }}
                </div>
                <div
                  style="
                    position: absolute;
                    top: 20px;
                    left: 20%;
                    width: 1px;
                    height: 15px;
                    background: #a2a4a1;
                  "
                ></div>
                <div
                  style="
                    position: absolute;
                    top: 1px;
                    left: -1%;
                    line-height: 20px;
                  "
                >
                  {{ heightMin }}
                </div>
                <div
                  style="
                    position: absolute;
                    top: 20px;
                    left: 0%;
                    width: 1px;
                    height: 15px;
                    background: #a2a4a1;
                  "
                ></div>

                <div
                  style="
                    position: absolute;
                    top: 1px;
                    right: -1%;
                    line-height: 20px;
                  "
                >
                  {{ heightMax }}
                </div>
                <div
                  style="
                    position: absolute;
                    top: 20px;
                    right: 0%;
                    width: 2px;
                    height: 15px;
                    background: #a2a4a1;
                  "
                ></div>

                <div
                  class="cz2"
                  :style="{
                    width:
                      ((itemheight - heightMin) / (heightMax - heightMin)) *
                        100 +
                      '%',
                  }"
                ></div>
              </div>

              <div>{{ analysislist.ageHeightDescription }}</div>
              <div>
                标准:{{ analysislist.ageHeightMin }}-{{
                  analysislist.ageHeightMax
                }}{{ analysislist.heightMeasureUnit }}
              </div>
            </div>

            <div
              slot="header"
              v-show="weightshow"
              style="
                text-align: center;
                margin-top: 20px;
                font-size: 12px;
                padding-top: 20px;
              "
            >
              <span>年龄体重比</span>

              <div
                style="
                  width: 400px;
                  margin: 0 auto;
                  height: 70px;
                  margin-top: 10px;
                  position: relative;
                "
              >
                <div
                  style="
                    position: absolute;
                    top: 1px;
                    left: 79%;
                    line-height: 20px;
                  "
                >
                  {{
                    ((((weightMax - weightMin) / weightMin) * weightMin) / 5) *
                      4 +
                    weightMin
                  }}
                </div>
                <div
                  style="
                    position: absolute;
                    top: 20px;
                    left: 80%;
                    width: 1px;
                    height: 15px;
                    background: #a2a4a1;
                  "
                ></div>
                <div
                  style="
                    position: absolute;
                    top: 1px;
                    left: 59%;
                    line-height: 20px;
                  "
                >
                  {{
                    ((((weightMax - weightMin) / weightMin) * weightMin) / 5) *
                      3 +
                    weightMin
                  }}
                </div>
                <div
                  style="
                    position: absolute;
                    top: 20px;
                    left: 60%;
                    width: 1px;
                    height: 15px;
                    background: #a2a4a1;
                  "
                ></div>
                <div
                  style="
                    position: absolute;
                    top: 1px;
                    left: 39%;
                    line-height: 20px;
                  "
                >
                  {{
                    ((((weightMax - weightMin) / weightMin) * weightMin) / 5) *
                      2 +
                    weightMin
                  }}
                </div>
                <div
                  style="
                    position: absolute;
                    top: 20px;
                    left: 40%;
                    width: 1px;
                    height: 15px;
                    background: #a2a4a1;
                  "
                ></div>

                <div
                  style="
                    position: absolute;
                    top: 1px;
                    left: 19%;
                    line-height: 20px;
                  "
                >
                  {{
                    ((((weightMax - weightMin) / weightMin) * weightMin) / 5) *
                      1 +
                    weightMin
                  }}
                </div>
                <div
                  style="
                    position: absolute;
                    top: 20px;
                    left: 20%;
                    width: 1px;
                    height: 15px;
                    background: #a2a4a1;
                  "
                ></div>
                <div
                  style="
                    position: absolute;
                    top: 1px;
                    left: -1%;
                    line-height: 20px;
                  "
                >
                  {{ weightMin }}
                </div>
                <div
                  style="
                    position: absolute;
                    top: 20px;
                    left: 0%;
                    width: 1px;
                    height: 15px;
                    background: #a2a4a1;
                  "
                ></div>

                <div
                  style="
                    position: absolute;
                    top: 1px;
                    right: -1%;
                    line-height: 20px;
                  "
                >
                  {{ weightMax }}
                </div>
                <div
                  style="
                    position: absolute;
                    top: 20px;
                    right: 0%;
                    width: 2px;
                    height: 15px;
                    background: #a2a4a1;
                  "
                ></div>

                <div
                  class="cz2"
                  :style="{
                    width:
                      ((itemweight - weightMin) / (weightMax - weightMin)) *
                        100 +
                      '%',
                  }"
                ></div>
              </div>
              <div>{{ analysislist.ageWeightDescription }}</div>
              <div>
                标准:{{ analysislist.ageWeightMin }}-{{
                  analysislist.ageWeightMax
                }}{{ analysislist.weightMeasureUnit }}
              </div>
            </div>
          </div>
        </el-card>
      </el-col>-->

      <el-col
        :span="11"
        class="card-box"
        v-show="itemshow3"
        style="margin-left: 30px; margin-right: 50px; height: 370px"
      >
        <el-card>
          <div slot="header" style="text-align: center">
            <span>BMI</span>
          </div>

          <div
            class="el-table el-table--enable-row-hover el-table--medium"
            style="height: 310px; position: relative"
          >
            <div ref="chart" id="chart" style="width: 450px; height: 320px; margin: 0 auto"></div>

            <div
              style="
                position: absolute;
                left: 50%;
                top: 45%;
                transform: translate(-50%);
              "
            >
              得分:
              <span style="color: red">{{ analysislist.bmi }}</span>
            </div>
            <div
              style="
                position: absolute;
                left: 50%;
                top: 55%;
                transform: translate(-50%);
              "
            >{{ analysislist.bmiDescription }}</div>
            <!-- <div
              class="texts"
              style="
                width: 285px;
                height: 60px;
                line-height: 20px;
                margin: 0 auto;
                font-size: 12px;
              "
            >
              <span
                class="text"
                style="display: inline-block; margin-right: 10px"
                v-for="(item, index) in bmiItemLevel"
                :key="index"
              >
                <span
                  style="
                    vertical-align: middle;
                    width: 30px;
                    height: 14px;
                    background: #91cd77;
                    display: inline-block;
                    margin-right: 5px;
                    border-radius: 2px;
                  "
                ></span>
                <span>{{ item.levelName }}</span>
                <div style="text-align: center">
                  {{ item.levelMinScore }}~{{ item.levelMaxScore }}
                </div>
              </span>

               <span
                class="text"
                style="display: inline-block; margin-right: 10px"
              >
                <span
                  style="
                    vertical-align: middle;
                    width: 30px;
                    height: 14px;
                    background: #5470c6;
                    display: inline-block;
                    margin-right: 5px;
                    border-radius: 2px;
                  "
                ></span>
                <span>健康</span>
                <div style="text-align: center">
                  {{ item.levelMinScore }}~{{ item.levelMaxScore }}
                </div>
              </span>

              <span
                class="text"
                style="display: inline-block; margin-right: 10px"
              >
                <span
                  style="
                    vertical-align: middle;
                    width: 30px;
                    height: 14px;
                    background: #fc8251;
                    display: inline-block;
                    margin-right: 5px;
                    border-radius: 2px;
                  "
                ></span>
                <span>过重</span>
                <div style="text-align: center">
                  {{ item.levelMinScore }}~{{ item.levelMaxScore }}
                </div>
              </span>

              <span class="text" style="display: inline-block">
                <span
                  style="
                    vertical-align: middle;
                    width: 30px;
                    height: 14px;
                    background: #ef6567;
                    display: inline-block;
                    margin-right: 5px;
                    border-radius: 2px;
                  "
                ></span>
                <span>肥胖</span>
                <div style="text-align: center">
                  {{ item.levelMinScore }}~{{ item.levelMaxScore }}
                </div>
              </span>
            </div>-->
            <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/shape";
export default {
  name: "shape",
  components: { student },
  data() {
    return {
      itemshow: false,
      itemshow2: false,
      itemshow3: true,
      weightshow: true,
      heightshow: true,
      itemweight: "",
      weightMax: 70,
      weightMin: 10,
      itemheight: "",
      heightMax: 150,
      heightMin: 30,
      // 显示搜索条件
      showSearch: true,
      //身体形态list
      analysislist: [],
      //bmi
      bmiItemLevel: [],
      //身体形态传值
      analysisstudent: {
        // studentId: "10",
        // batchCode: "PC202208030005",
        studentId: "",
        batchCode: ""
      }
    };
  },
  mounted() {},
  created() {
    // this.studentanalysis();
  },
  methods: {
    itemlists(studentId, batchCode) {
      this.analysisstudent.studentId = studentId;
      this.analysisstudent.batchCode = batchCode;
    },
    /** 查看按钮操作 */
    handleQuery() {
      this.studentanalysis();
    },
    //学生身体形态
    studentanalysis() {
      analysis(this.analysisstudent).then(res => {
        if (!res.data || res.data == "") {
          this.itemshow2 = true;
          this.itemshow3 = false;
          this.itemshow = false;
        } else if (res.data.weightScore == 0 || res.data.weightScore == null) {
          this.weightshow = false;
          this.analysislist = res.data;
          this.itemheight = res.data.heightScore;
          this.bmiItemLevel = res.data.bmiItemLevel;
          this.itemweight = res.data.weightScore;
          this.itemshow2 = false;
          this.itemshow3 = false;
          this.itemshow = true;
        } else if (res.data.heightScore == 0 || res.data.heightScore == null) {
          this.heightshow = false;
          this.analysislist = res.data;
          this.itemheight = res.data.heightScore;
          this.bmiItemLevel = res.data.bmiItemLevel;
          this.itemweight = res.data.weightScore;
          this.itemshow2 = false;
          this.itemshow3 = false;
          this.itemshow = true;
        } else if (res.data.bmiItemLevel == null) {
          this.analysislist = res.data;
          this.itemheight = res.data.heightScore;
          this.bmiItemLevel = res.data.bmiItemLevel;
          this.itemweight = res.data.weightScore;
          this.itemshow2 = false;
          this.itemshow3 = false;
          this.itemshow = true;
        } else {
          this.analysislist = res.data;
          this.itemheight = res.data.heightScore;
          this.bmiItemLevel = res.data.bmiItemLevel;
          this.itemweight = res.data.weightScore;
          let seriesData = [];
          res.data.bmiItemLevel.forEach(el => {
            seriesData.push({
              value: el.levelMaxScore,
              name:
                el.levelName +
                " " +
                "(" +
                el.levelMinScore +
                "~" +
                el.levelMaxScore +
                ")"
            });
          });
          var myChart = echarts.init(document.getElementById("chart"));
          var option = {
            series: [
              {
                type: "pie",
                radius: ["40%", "70%"],
                // center: ["37%", "50%"],
                itemStyle: {
                  normal: {
                    color: function(colors) {
                      var colorList = [
                        "#91cd77",
                        "#5470c6",
                        "#fc8251",
                        "#ef6567",
                        "#f9c956",
                        "#75bedc"
                      ];
                      return colorList[colors.dataIndex];
                    }
                  }
                },
                data: seriesData,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 1)"
                  }
                }
              }
            ]
          };
          option && myChart.setOption(option);
          this.itemshow2 = false;
          this.itemshow = true;
          this.itemshow3 = true;
        }
      });
    },
    getList() {
      //用户权限
      getRoleInfo().then(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;
}
.cz2 {
  background: #ffc000;
  height: 5px;
  align-items: center;
  line-height: 30px;
  position: absolute;
  top: 40px;
}
::v-deep .el-form {
  display: inline;
}
</style>
