<template>
  <div class="context">
    <div class="panel">
      <div class="panel-body">
        <br>
        <el-page-header @back="goBack" content="课程成绩">
          <br>
        </el-page-header>
        <span class="classNames">
                    {{ title }}
                </span>
      </div>
    </div>
    <div class="table">
      <el-table
          :data="tableData"
          border
          is-horizontal-resize
          :default-sort="{prop: 'date', order: 'descending'}"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          class=""
      >
        >
        <el-table-column
            type="index"
            label="排名"
            align="center"
            width="50">
        </el-table-column>
        <el-table-column
            prop="head"
            label="头像"
            align="center"
            sortable
        >
          <template slot-scope="scope">
            <!--<img class="head" :src="scope.row.Head" alt="" height="51" width="51" v-if="scope.row.Head">-->
            <div class="demo-image__preview" v-if="scope.row.Head">
              <el-image
                  style="width: 25px; height: 25px"
                  :src="scope.row.Head"
                  :preview-src-list="[scope.row.Head]"

              >
              </el-image>
            </div>
            <img src="../../assets/img/nav/head.png" alt="" v-else width="25px" height="25px">
            <!--<img class="head" src="../assets/img/nav/head.png" height="51" width="51" v-else/>-->
          </template>
        </el-table-column>
        <el-table-column
            prop="Name"
            label="会员名"
            sortable
        >
        </el-table-column>

        <el-table-column
            prop="Cle"
            label="卡路里"
            :formatter="filterCle"
            sortable
        >
        </el-table-column>
        <el-table-column
            prop="Ck"
            label="ck值"
            :formatter="filterCK"
            sortable
        >
        </el-table-column>
        <el-table-column
            prop="MaxHr"
            label="最大心率"
            sortable
        >
        </el-table-column>
        <el-table-column
            prop="AvgHr"
            label="平均心率"
            sortable
        >
        </el-table-column>
        <el-table-column
            prop="Weight"
            label="体重（kg）"
            :formatter="filterWeight"
            sortable
        >
        </el-table-column>
        <el-table-column
            prop="Height"
            label="身高(cm)"
            sortable
        >
        </el-table-column>
        <el-table-column
            prop="Sex"
            label="性别"
            sortable
        >
          <template slot-scope="scope">
            <span v-if="scope.row.Sex == 1">男</span>
            <span v-if="scope.row.Sex == 2">女</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="GroupNo"
            label="队伍"
            sortable
        >
          <template slot-scope="scope">
            <span v-if="scope.row.GroupNo == 0">不分组</span>
            <span v-if="scope.row.GroupNo == 1" style="color: red">红队</span>
            <span v-if="scope.row.GroupNo == 2" style="color: blue">蓝队</span>
            <span v-if="scope.row.GroupNo == 3" style="color: goldenrod">黄队</span>
          </template>
        </el-table-column>
      </el-table>
      <br>
      <el-pagination
          background
          :total="pageination.total"
          :page-size="pageination.pageItem"
          @current-change="pageChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script>

import Global from '../../Global.js'
import {
  ClassOverDetailListQuery,
  FinshedDispPlanQuery,
} from "../../api/getApiRes";

let qs = require('qs');
export default {
  data() {
    return {
      tableData: [],
      title: '',
      dialogdata: [],
      gridData: [],
      dialogValue: [],
      allTableData: [],
      pageination: {
        pageItem: 10,
        pageoptions: pageOptions(),
        total: 100,
        pageIndex: 1,
      },
    }
  },
  mounted() {
    this.getTableQuery();
    this.title = this.$route.query.ClassName + ' ' + this.$route.query.BeginStr + '-' + this.$route.query.EndStr;
  },
  watch: {
    $route(to) {
      if (to.name == 'classInfoDetail') {
        this.allTableData = [];
        this.getTableQuery();
        this.title = this.$route.query.ClassName + ' ' + this.$route.query.BeginStr + '-' + this.$route.query.EndStr;
      }
    },
  },
  methods: {
    goBack() {
      this.$router.push({
        path: '/coursesHistory', query: {}
      });
    },
    // 页面数据查询
    getTableQuery() {
      let that = this;
      that.loading = true;
      let param = {
        token: localStorage.token,
        stdId: this.$route.query.StdId,
        start: 1,//
        tableMax: 9999,//
      };
      let postdata = qs.stringify(param);
      FinshedDispPlanQuery(postdata).then(res => {
        let json = res;
        if (json.Code == 0) {
          that.loading = false;
          if (json.Rs) {
            that.allTableData = json.Rs;
            that.recordsTotal = json.Rs.length;
          } else {
            that.allTableData = [];
            that.recordsTotal = 0;
          }
          // 设置分页数据
          that.setPaginations();
        } else {
          that.allTableData = [];
          that.recordsTotal = 0;
          that.$message.error(json.Memo + ' 错误码：' + json.Code);
        }
      })
    },
    // 设置分页数据
    setPaginations() {
      // 分页属性
      let that = this;
      that.pageination.total = that.recordsTotal;

      // 默认分页
      that.tableData = that.allTableData.filter((item, index) => {
        return index < that.pageination.pageItem;
      });
    },
    // 每页显示数量
    handleSizeChange() {
      let that = this;
      that.tableData = that.allTableData.filter((item, index) => {
        return index < that.pageination.pageItem;
      });
      that.draw = that.pageination.pageItem;
      // that.getTableQuery();
    },
    // 翻页
    pageChange(pageIndex) {
      let that = this;
      // 获取当前页
      let index = that.pageination.pageItem * (pageIndex - 1);
      // 数据总数
      let nums = that.pageination.pageItem * pageIndex;
      // 容器
      let tables = [];
      for (var i = index; i < nums; i++) {
        if (that.allTableData[i]) {
          tables.push(that.allTableData[i])
        }
        this.tableData = tables;
      }
      that.start = index * that.draw;
      // that.getTableQuery();
    },
    // 单位转换去6个零
    filterCle(value, row, column) {
      return parseInt(column / 1000000);
    },
    // 单位转换去6个零
    filterCK(value, row, column) {
      return parseFloat(column / 1000000).toFixed(1);
    },
    // 单位转换去1个零
    filterWeight(value, row, column) {
      return parseInt(column / 10);
    },

  },
}
</script>

<style scoped>
@import "../../assets/css/panel.css";

.context {
  /* height: 770px; */
  overflow-y: scroll;
  display: block;
  margin: 0 auto;
  background-color: #fff !important;
  padding: 30px;
}

.classNames {
  width: 211px;
  height: 25px;
  background: #f0f2f5;
  font-family: "Source Han Sans CN";
  font-weight: normal;
  font-size: 16px;
  color: #3799ff;
  border-radius: 250px;
  text-align: center;
  margin-top: 15px;
  margin-bottom: 3px;
  float: left;
}

.head {
  overflow: hidden;
  display: block;
  margin: 0 auto;
  border-radius: 250px;
}
</style>
