<template>
  <div class="context">
    <div class="panel">
      <div class="panel-body">
        <el-page-header @back="goBack" content="动作评分"/>
        <span class="classNames">{{ title }}</span>
        <div class="likeTab">
          <el-button @click="goType('courseEdit')" size="mini" v-if="FinishClass == 2 || FinishClass == 3">人员管理</el-button>
          <el-button type="primary" @click="goType('actionScore')" size="mini">动作评分</el-button>
          <el-button @click="goType('scoreResult')" size="mini">评分结果</el-button>
        </div>
        <div class="panel_control">
          <el-row :gutter="0">
            <el-col :span="22">
              <el-radio-group v-model="action" size="mini" @change="handleClick" align="left"
                              style="margin-left: -10px;float: left;padding-left: 10px">
                <el-radio v-for="item in actionList" :label="item.HAgdId"
                          border style="margin-top: 10px;margin-left: -10px">
                  {{ item.EaName }}
                </el-radio>
              </el-radio-group>
            </el-col>
          </el-row>
          <el-row :gutter="0" align="left">
          </el-row>
        </div>
      </div>
      <div class="change">
        <span v-if="actionDesc" align="left" style="float: left;">{{ actionDesc }}</span>
        <el-button @click="postPageMember" :disabled="FinishClass == 0 || FinishClass == 3" type="success" size="mini" :loading="enablePost" style="float: right;">提交本页</el-button>
      </div>
    </div>
    <div class="table">
      <el-table
          :data="tableData"
          border
          is-horizontal-resize
          :default-sort="{ prop: 'data', order: 'descending' }"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          class
          ref="multipleTable"
      >
        <el-table-column
            type="index"
            label="排名"
            fixed
            align="center"
            width="50"
        />
        <el-table-column
            prop="Name"
            label="会员名"
            width="90"
            fixed
            sortable
        />
        <el-table-column
            prop="head"
            label="头像"
            width="75"
            align="center"
            sortable
        >
          <template slot-scope="scope">
            <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"
            />
          </template>
        </el-table-column>
        <el-table-column
            prop="Usercode"
            label="手机号"
            width="120"
            sortable
        />

        <el-table-column
            prop="Scores"
            label="评价"
            width="110"
            sortable
        >
          <template slot-scope="scope">
            <el-radio-group v-model="scope.row.EaScoreLevel" @change="editMemberRow(scope.row)">
              <el-radio :label=2 style="width: 110px;">优秀</el-radio>
              <el-radio :label=1 style="width: 110px;">不达标</el-radio>
              <el-radio :label=0 style="width: 110px;">未完成</el-radio>
            </el-radio-group>
          </template>
        </el-table-column>

        <el-table-column
            v-for="item in bodyList" :key="item.HEnID" :label="item.BnName" :prop="''+item.HEnID" width ="180rem">
          <template slot-scope="scope">
            <el-switch
                v-model="scope.row.BodyNodeRs[''+item.HEnID]"
                :disabled="scope.row.EaScoreLevel == 0"
                inactive-color="#13ce66"
                active-color="#ff4949"
                inactive-text="优秀"
                active-text="不达标">
            </el-switch>
          </template>
        </el-table-column>
      </el-table>
      <br/>
      <el-pagination
          background
          :total="pagination.total"
          :page-size="pagination.pageItem"
          @current-change="pageChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import Global from "../Global.js";
import {
  ScoreClassDetailQuery,
  AGDetailCurrStdQuery,
  ENRelationCurrStdQuery,
  ScoreClassDetailBatchScore,
  ScoreClassScoreFinish,
} from "../api/getApiRes";

let qs = require("qs");
export default {
  data() {
    return {
      AgId: 0,
      ScoreIsFinish: true,
      ClassType: 0,
      PkNum: 0,
      BeginTime: "",
      ClassName: "",
      FinishClass: 0, //当前上课状态 1已下课 2已上课 3准备上课 FinishClass
      title: "",
      action: "",
      enablePost: false,
      actionList: [],
      actionDesc: "",
      tableData: [],
      searchBtnStatus: false,
      dialogTitle: "新增会员",
      current: getNowDate(),
      cur_page: 1,
      bodyList: [],
      memberList: [],
      // panel 配置项目
      panel: {
        draw: 1,
        start: 0,
        recordsTotal: 0,
        tableData: [],
        allTableData: [],
        loading: false,
        BeginTime: "",
        ClassName: "",
        time1: globalBt(),
      },
      form: {
        coachOptions: [],
        btnType: 0, //0新建，1编辑编辑
      },
      pagination: {
        pageItem: 1000,
        pageOptions: pageOptions(),
        total: 1000,
        pageIndex: 1,
      },
      isCollapse: document.body.clientWidth < 1366,
    };
  },
  mounted() {
    this.getActionQuery();
    this.AgId = this.$route.query.AgId;
    this.ClassType = this.$route.query.ClassType;
    this.PkNum = this.$route.query.PkNum;
    this.FinishClass = this.$route.query.FinishClass;
    this.title =
        this.$route.query.ClassName +
        " " +
        this.$route.query.BeginStr +
        "-" +
        this.$route.query.EndStr;
  },
  methods: {
    handleClick(hAgdId) {
      let that = this;
      that.getActionBodyNode(hAgdId);
    },
    //获取动作下的身体节点
    getActionBodyNode(hAgdId) {
      let that = this;
      let param = {
        token: localStorage.token,
        stdId: this.$route.query.StdId,
        hAgdId: hAgdId
      };
      let postdata = qs.stringify(param);
      ENRelationCurrStdQuery(postdata).then((res) => {
        let json = res;
        if (json.Code == 0) {
          if (json.Rs) {
            that.bodyList = json.Rs;
            that.getTableQuery(hAgdId);
          } else {
            that.bodyList = [];
          }
        } else {
          that.$message.error(json.Memo + " 错误码：" + json.Code);
        }
      });
    },
    postPageMember() {
      let that = this;

      that.pausePushButton();
      //拼接打分权重数据
      let rowScore = deepClone(that.tableData[0].BodyNodeRs);
      console.log(JSON.stringify(rowScore));
      for (let key in rowScore) {
        for (let i = 0; i < that.bodyList.length; i++) {//遍历table中的人员名单
          for (let bodyNd in that.bodyList[i]) {
            if (key == that.bodyList[i].HEnID) {
              // console.log(key, that.bodyList[i].HEnID, rowScore[key]);
              rowScore[key] = that.bodyList[i].DefScore;
              break;
            }
          }
        }
      }
      console.log(JSON.stringify(rowScore));

      //拼接人员数据
      let scoreRs = [];
      let thisRow = {};
      for (let i = 0; i < that.tableData.length; i++) {//遍历table中的人员名单
        thisRow = deepClone(that.tableData[i]);
        thisRow.BodyNodeScore = rowScore;
        thisRow.EaScore = 0;//默认评分是0
        if (thisRow.EaScoreLevel == 1 || thisRow.EaScoreLevel == 2) {//不达标时、优秀时计算分数

          for (let nodeScore in rowScore) {
            // console.log(key, that.bodyList[i].HEnID, rowScore[key]);
            // console.log(nodeScore, rowScore[nodeScore]);

            for (let nodeName in thisRow.BodyNodeRs) {
              // console.log(nodeName, thisRow.BodyNodeRs[nodeName]);
              if (nodeScore == nodeName) {
                //找对应节点的状态
                if (!thisRow.BodyNodeRs[nodeName]) {//false为优秀
                  thisRow.EaScore += rowScore[nodeScore];
                }
              }
            }
          }
        }
        this.$delete(thisRow, 'Head');//删除Head属性
        this.$delete(thisRow, 'Usercode');//删除Usercode属性
        scoreRs.push(thisRow);
      }
      let param = {
        token: localStorage.token,
        stdId: this.$route.query.StdId,
        scoreRs: JSON.stringify(scoreRs)
      };
      let postData = qs.stringify(param);
      ScoreClassDetailBatchScore(postData).then((res) => {
        let json = res;
        if (json.Code == 0) {
          that.$message({
            showClose: true,
            message: '提交成功！',
            type: 'success'
          });
        } else {
          that.$message.error(json.Memo + " 错误码：" + json.Code);
        }
      });
    },
    pausePushButton(){
      let that = this;
      let totalTime = 2;
      that.enablePost = true;
      let clock = window.setInterval(() => {
        totalTime--;
        if (totalTime < 0) {
          totalTime = 2;
          that.enablePost = false;
        }
      }, 1000);
    },
    editMemberRow(row) {
      let that = this;
      //默认等级优秀
      if (row.EaScoreLevel == 2) {
        for (let tempBody in that.bodyList) {
          row.BodyNodeRs[that.bodyList[tempBody]["HEnID"]] = false;
        }
      }
      //默认等级不达标
      if (row.EaScoreLevel == 1) {
        for (let tempBody in that.bodyList) {
          row.BodyNodeRs[that.bodyList[tempBody]["HEnID"]] = true;
        }
      }
      if (row.EaScoreLevel == 0) {
      }
    },
    clearForm() {
      // clear
      this.form.name = "";
      this.form.userCode = "";
      this.form.shopId = "";
      this.dialogCoachValue = [];
    },
    //查询动作
    getActionQuery() {
      let that = this;
      let param = {
        token: localStorage.token,
        stdId: this.$route.query.StdId
      };
      let postData = qs.stringify(param);
      AGDetailCurrStdQuery(postData).then((res) => {
        let json = res;
        if (json.Code == 0) {
          if (json.Rs) {
            that.actionList = json.Rs;
            that.action = json.Rs[0].HAgdId;
            that.getActionBodyNode(that.action);
          } else {
            that.actionList = [];
          }
        } else {
          that.$message.error(json.Memo + " 错误码：" + json.Code);
        }
      });
    },
    goBack() {
      this.$router.push({
        path: "/courses",
        query: {},
      });
    },
    // 页面数据查询
    getTableQuery(hAgdId) {
      let that = this;
      that.loading = true;
      let param = {
        token: localStorage.token,
        hAgdId: hAgdId,
        stdId: this.$route.query.StdId
      };
      that.allTableData = [];
      that.tableData = [];
      that.recordsTotal = 0;
      let postData = qs.stringify(param);
      ScoreClassDetailQuery(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;
          }
          console.log(that.allTableData);

          // 设置分页数据
          that.setPagination();
        } else {
          that.$message.error(json.Memo + " 错误码：" + json.Code);
        }
      });
    },
    // 设置分页数据
    setPagination() {
      // 分页属性
      let that = this;
      that.pagination.total = that.recordsTotal;

      // 默认分页
      that.tableData = that.allTableData.filter((item, index) => {
        return index < that.pagination.pageItem;
      });
    },
    // 每页显示数量
    handleSizeChange() {
      let that = this;
      that.tableData = that.allTableData.filter((item, index) => {
        return index < that.pagination.pageItem;
      });
      that.draw = that.pagination.pageItem;
    },
    // 翻页
    pageChange(pageIndex) {
      let that = this;
      // 获取当前页
      let index = that.pagination.pageItem * (pageIndex - 1);
      // 数据总数
      let nums = that.pagination.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;
    },
    goType(url) {
      this.$router.push({
        path: '/' + url, query: {
          AgId: this.$route.query.AgId,
          ScoreIsFinish: this.$route.query.ScoreIsFinish,
          StdId: this.$route.query.StdId,
          ClassName: this.$route.query.ClassName,
          BeginStr: this.$route.query.BeginStr,
          EndStr: this.$route.query.EndStr,
          FinishClass: this.$route.query.FinishClass,
          ClassType: this.$route.query.ClassType,
          PkNum: this.$route.query.PkNum,
        }
      });
    }
  },
  watch: {
    $route(to) {
      if (to.name == "actionScore") {
        this.getActionQuery();
        this.AgId = this.$route.query.AgId;
        this.ScoreIsFinish = this.$route.query.ScoreIsFinish,
            this.FinishClass = this.$route.query.FinishClass;
        this.ClassType = this.$route.query.ClassType;
        this.PkNum = this.$route.query.PkNum;
        this.title =
            this.$route.query.ClassName +
            " " +
            this.$route.query.BeginStr +
            "-" +
            this.$route.query.EndStr;
      }
    },
  },
};
</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 {
  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;
  padding-left: 10px;
  padding-right: 10px;
}

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

.panel_control {
  width: 100%;
  overflow: hidden;
  display: block;
  margin: 0 auto;
}

.likeTab {
  width: 100%;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  padding-top: 10px;
  padding-bottom: 0;
  border-bottom: 1px solid #ccc;
  margin-bottom: 10px;
}

.likeTab button {
  float: left;
  border-radius: 0;
}

.likeTab button.pull-right {
  float: right;
}

/*.panel-body {*/
.panel_control {
  padding: 20px;
  background: #f0f2f5;
}

.change {
  width: 100%;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  padding-top: 10px;
  padding-bottom: 10px;
}

.change button {
  float: left;
}

.change button.pull-right {
  float: right;
}

.lessons {
  padding: 1px 7px;
  border-radius: 250px;
  float: left;
  color: #000;
}

/deep/ .el-transfer-panel__item .el-checkbox__input {
  /*float: left;*/
  left: 10%;
}

/*/deep/ .el-checkbox  .el-checkbox {*/
/*margin-right: 1px;*/
/*}*/
/deep/ .el-checkbox__label span {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  float: left;
}

.cell em {
  margin-left: 5px;
  margin-right: 5px;
}

/deep/
.el-transfer-panel
.el-transfer-panel__header
.el-checkbox
.el-checkbox__label
span {
  width: 50px;
  float: right;
  right: 0;
}

/*/deep/ .el-table .red-row {*/
/*background: #fb88c1;*/
/*}*/

/*/deep/ .el-table .blue-row {*/
/*background: #7099d0;*/
/*}*/
/*/deep/ .el-table .yellow-row {*/
/*background: #fbe56e;*/
/*}*/

/deep/ .el-table__header .el-table-column--selection .cell .el-checkbox:after {
  content: " 是否网课";
}

/deep/
.el-table__body-wrapper
.el-table-column--selection
.cell
.el-checkbox:after {
  content: " 网课";
}
</style>
