<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-card
      v-show="itemshow"
      class="box-card"
      style="width: 95%; margin: 0 auto"
    >
      <div slot="header" style="text-align: center">身体素质测试</div>
      <el-row style="text-align: center">
        <el-col
          :span="5"
          class="toptitle"
          style="
            border-right: 1px solid #ededed;
            border-bottom: 1px solid #ededed;
          "
          >身体素质测试</el-col
        >
        <el-col
          :span="5"
          class="toptitle"
          style="
            border-right: 1px solid #ededed;
            border-bottom: 1px solid #ededed;
          "
          >测量值</el-col
        >
        <el-col
          :span="9"
          class="toptitle"
          style="
            border-right: 1px solid #ededed;
            border-bottom: 1px solid #ededed;
          "
          >成绩</el-col
        >
        <el-col
          :span="5"
          class="toptitle"
          style="border-bottom: 1px solid #ededed"
          >综合评价</el-col
        >
      </el-row>
      <el-row
        style="text-align: center"
        v-for="(item, index) in studentscorelist"
        :key="index"
      >
        <el-col
          :span="5"
          class="text"
          style="
            height: 100px;
            line-height: 100px;
            border-right: 1px solid #ededed;
            border-bottom: 1px solid #ededed;
          "
        >
          {{ item.itemName }}
        </el-col>
        <el-col
          class="text"
          :span="5"
          style="
            height: 100px;
            line-height: 100px;
            border-right: 1px solid #ededed;
            border-bottom: 1px solid #ededed;
          "
        >
          {{ item.itemScore ? item.itemScore : "" }}
          {{ item.scoreDictValue ? item.scoreDictValue : "" }}
          {{ item.measureUnit }}
        </el-col>

        <el-col
          class="text"
          v-if="item.itemScore"
          :span="9"
          style="
            height: 100px;
            border-right: 1px solid #ededed;
            border-bottom: 1px solid #ededed;
            position: relative;
            overflow: hidden;
          "
        >
          <span style="position: absolute; left: 5%; top: 10px"
            >{{
              item.measureUnit == "s" || item.measureUnit == "h" ? "时间" : ""
            }}{{
              item.measureUnit == "cm" || item.measureUnit == "m" ? "距离" : ""
            }}
            {{ item.measureUnit == "kg" ? "千克" : "" }}
            {{ item.measureUnit == "g" ? "克" : "" }}({{ item.measureUnit }})
          </span>

          <span style="position: absolute; left: 6%; top: 70%">评价</span>
          <div
            style="
              width: 65%;
              margin: 0 auto;
              margin-top: 10px;
              margin-left: 25%;
              position: relative;
            "
          >
            <div
              style="
                position: absolute;
                top: 1px;
                left: 75%;
                line-height: 20px;
                overflow: hidden;
                width: 40px;
              "
            >
              {{
                (
                  ((item.maxScore - item.minScore) / 5) * 4 +
                  item.minScore
                ).toFixed(1)
              }}
            </div>
            <div
              style="
                position: absolute;
                top: 20px;
                left: 80%;
                width: 1px;
                height: 15px;
                background: #a2a4a1;
              "
            ></div>
            <div
              style="
                position: absolute;
                top: 1px;
                left: 55%;
                overflow: hidden;
                line-height: 20px;
                width: 40px;
              "
            >
              {{
                (
                  ((item.maxScore - item.minScore) / 5) * 3 +
                  item.minScore
                ).toFixed(1)
              }}
            </div>
            <div
              style="
                position: absolute;
                top: 20px;
                left: 60%;
                width: 1px;
                height: 15px;
                background: #a2a4a1;
              "
            ></div>
            <div
              style="
                position: absolute;
                top: 1px;
                left: 35%;
                line-height: 20px;
                overflow: hidden;
                width: 40px;
              "
            >
              {{
                (
                  ((item.maxScore - item.minScore) / 5) * 2 +
                  item.minScore
                ).toFixed(1)
              }}
            </div>
            <div
              style="
                position: absolute;
                top: 20px;
                left: 40%;
                width: 1px;
                height: 15px;
                background: #a2a4a1;
              "
            ></div>

            <div
              style="
                position: absolute;
                top: 1px;
                left: 15%;
                line-height: 20px;
                overflow: hidden;
                width: 40px;
              "
            >
              {{
                (
                  ((item.maxScore - item.minScore) / 5) * 1 +
                  item.minScore
                ).toFixed(1)
              }}
            </div>
            <div
              style="
                position: absolute;
                top: 20px;
                left: 20%;
                width: 1px;
                height: 15px;
                background: #a2a4a1;
              "
            ></div>
            <div
              style="
                position: absolute;
                top: 1px;
                left: -5%;
                line-height: 20px;
                overflow: hidden;
                width: 32px;
              "
            >
              {{ item.minScore == null ? 0 : item.minScore }}
            </div>
            <div
              style="
                position: absolute;
                top: 20px;
                left: 0%;
                width: 1px;
                height: 15px;
                background: #a2a4a1;
              "
            ></div>

            <div
              style="
                position: absolute;
                top: 1px;
                right: -3%;
                line-height: 20px;
                overflow: hidden;
                width: 32px;
              "
            >
              {{ item.maxScore == null ? 100 : item.maxScore }}
            </div>
            <div
              style="
                position: absolute;
                top: 20px;
                right: 0%;
                width: 2px;
                height: 15px;
                background: #a2a4a1;
              "
            ></div>

            <div
              class="cz2"
              :style="{
                width:
                  ((item.itemScore - item.minScore) /
                    (item.maxScore - item.minScore)) *
                    100 +
                  '%',
              }"
            ></div>
          </div>

          <div style="position: absolute; left: 30%; top: 72%">
            {{ item.leveName }}
          </div>
        </el-col>
        <el-col
          class="text"
          v-else
          :span="9"
          style="
            height: 100px;
            border-right: 1px solid #ededed;
            border-bottom: 1px solid #ededed;
            position: relative;
          "
        >
          <span
            style="
              margin-top: 20px;
              float: left;
              margin-left: 5%;
              margin-top: 7%;
            "
            >成绩评价</span
          >
          <div style="position: absolute; left: 25%; top: 40%">
            {{ item.scoreDictValue }}
          </div>
        </el-col>
        <el-col
          class="text"
          :span="5"
          style="
            height: 100px;
            line-height: 100px;
            border-bottom: 1px solid #ededed;
          "
          >{{ item.syntheticalAssess }}</el-col
        >
      </el-row>
    </el-card>
    <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 student from "@/views/assembly/student.vue";
import { getRoleInfo, testBodyScoreInfo } from "@/api/system/quality";

export default {
  name: "quality",
  components: {
    student,
  },
  data() {
    return {
      itemshow: false,
      itemshow2: false,
      // 显示搜索条件
      showSearch: true,
      //学生成绩
      studentscorelist: [],
      // 成绩查询参数
      studentscore: {
        pageNum: 1,
        pageSize: 999,
        studentId: "",
        batchCode: "",
        // studentId: "27",
        // batchCode: "PC202208230011",
        // studentId: "14",
        // batchCode: "PC202208030005",
        // studentId: "9",
        // batchCode: "PC202208030004",
      },
    };
  },

  created() {},
  methods: {
    itemlists(studentId, batchCode) {
      console.log(studentId, batchCode);
      this.studentscore.studentId = studentId;
      this.studentscore.batchCode = batchCode;
    },
    /** 查看按钮操作 */
    handleQuery() {
      this.studenttext();
    },
    //学生身体素质
    studenttext() {
      testBodyScoreInfo(this.studentscore).then((res) => {
        // res.rows[3].levelMaxScore = 19.5;
        // res.rows[3].levelMinScore = 4.5;
        // res.rows[3].itemScore = 7.5;
        if (!res.rows || res.rows == "" || res.rows == []) {
          this.itemshow2 = true;
          this.itemshow = false;
        } else {
          this.itemshow = true;
          this.itemshow2 = false;
          this.studentscorelist = res.rows;
          console.log(this.studentscorelist);
        }
      });
    },
    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'>
.text {
  font-size: 14px;
}
.toptitle {
  height: 50px;
  line-height: 50px;
  background-color: #f8f8f9;
  font-size: 15px;
  font-weight: 600;
}
::v-deep .el-card__header {
  border: none;
}
.cz2 {
  background: #db6b6f;
  height: 5px;
  align-items: center;
  line-height: 30px;
  position: absolute;
  top: 40px;
}
::v-deep .el-form {
  display: inline;
}
</style>
