<template>
  <div
    style="width: 94%; margin: 0 auto 10px; height: 100%"
    :class="table.length > 0 ? 'isOverFlow' : ''"
  >
    <div class="student_head">
      <div class="student_search">
        <!-- <div>数据筛选</div>
        <el-select v-model="mChoose">
          <el-option label="全部" value="">全部</el-option>
          <el-option
            v-for="(c, cIndex) in messageJuri"
            :key="cIndex"
            :value="c.id"
            :label="c.name"
          ></el-option>
        </el-select>
        <div
          style="
            line-height: 35px;
            font-size: 14px;
            min-width: 60px;
            margin-left: 10px;
          "
        >
          分类筛选
        </div>
        <el-select v-model="tChoose">
          <el-option label="全部" value="">全部</el-option>
          <el-option
            v-for="(e, eIndex) in typeJuri"
            :key="eIndex"
            :value="e.id"
            :label="e.title"
          ></el-option>
        </el-select>
        <el-input
          v-model="cn"
          placeholder="筛选项目名称"
          @input="search"
        ></el-input> -->
      </div>
      <div class="student_search_right">
        <el-select v-model="mName" filterable placeholder="请输入名称">
          <el-option
            v-for="item in stuJuri"
            :key="item.userid"
            :label="item.sName"
            :value="item.userid"
          >
          </el-option>
        </el-select>
        <!-- <el-input v-model="mName" placeholder="请输入名称"></el-input> -->
        <el-button size="mini" type="primary" @click="searchModel"
          >查询</el-button
        >
      </div>
    </div>
    <div
      class="pb_content_body"
      style="width: 100%; height: 100%; position: relative"
    >
      <!-- v-loading="isLoading" -->
      <el-table
        :data="table"
        border
        style="width: 100%; margin-top: 10px"
        :row-class-name="tableRowClassName"
      >
        <el-table-column
          prop="order"
          align="center"
          label="序号"
          min-width="25%"
        >
        </el-table-column>
        <el-table-column
          prop="title"
          align="center"
          label="数据"
          min-width="25%"
        >
          <template slot-scope="scope">
            <div class="noOpen">
              <div>
                {{ scope.row.title }}
              </div>
              <div class="noOpenNav" v-if="scope.row.isOpen == 1">未开放</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="typeName"
          align="center"
          label="分类"
          min-width="25%"
        >
        </el-table-column>
        <el-table-column
          prop="detail"
          align="center"
          label="说明"
          min-width="25%"
        >
        </el-table-column>
        <el-table-column label="值" align="center" min-width="25%">
          <template slot-scope="scope">
            <!-- <input
              type="checkbox"
              :id="scope.row.id"
              :value="scope.row.title"
              @change="isChooseS(scope.row.id)"
            /> -->
            <div>{{ scope.row.value }}</div>
          </template>
        </el-table-column>
      </el-table>
      <div class="modelButton" @click="isNoJump">组建模型</div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["uuid", "ooid"],
  data() {
    return {
      isLoading: false,
      messageJuri: [],
      typeJuri: [],
      isChooseList: [],
      mChoose: "",
      tChoose: "",
      mName: "",
      cn: "",
      table: [],
      stuJuri: [],
      table1: [
        {
          id: 1,
          order: 1,
          title: "登录时长",
          typeName: "课堂学习",
          detail: "一段时间内的平台登录时长",
          isOpen: 0,
          value: "",
        },
        {
          id: 2,
          order: 2,
          title: "学习时长",
          typeName: "课堂学习",
          detail:
            "单个课程的学习时长:单个课程进入[立即学习]后的时长。多个课程的学习时长:多个课程在[立即学习] 后的时长累计。 阶段学习时长: 某个时间段内，在[课程中心]的时长。",
          isOpen: 0,
          value: "",
        },
        {
          id: 3,
          order: 3,
          title: "工具提交率",
          typeName: "工具使用",
          detail:
            "单个课程的工具提交率:单个课程在当前使用工具完成作业并提交的比例( 包括选择题)。多个课程的工具提交率:多个课程在当前使用工具完成作业并提交的比例(包括选择题)。",
          isOpen: 0,
          value: "",
        },
        {
          id: 4,
          order: 4,
          title: "工具使用（类型）",
          typeName: "工具使用",
          detail:
            "单个课程的工具使用类型: 单个课程内的不同类型工具分布。多个课程的工具使用类型:多个课程内的不同类型工具分布。",
          isOpen: 0,
          value: "",
        },
        {
          id: 5,
          order: 5,
          title: "课程平均得分",
          typeName: "课程得分",
          detail:
            "单个课程得分:单个课程内，所有工具的平均得分。多个课程得分: 多个课程内，所有工具的平均得分。",
          isOpen: 0,
          value: "",
        },
        {
          id: 6,
          order: 6,
          title: "资料阅读率",
          typeName: "课堂学习",
          detail:
            "单个课程阅读完成度:单个课程的PDF文件、视频阅读完成率。多个课程阅读完成度:多个课程的PDF文件、视频阅读平均完成率。",
          isOpen: 1,
          value: "未开放",
        },
        {
          id: 7,
          order: 7,
          title: "资料阅读时长",
          typeName: "课堂学习",
          detail:
            "单个课程阅读时长：单个课程的PDF文件、视频阅读完成时长。多个课程阅读时长：多个课程的PDF文件、视频阅读完成平均时长。",
          isOpen: 1,
          value: "未开放",
        },
        {
          id: 8,
          order: 8,
          title: "目标得分",
          typeName: "课堂学习",
          detail: "单个/多个课程的目标得分计算（教学评一体化）。",
          isOpen: 0,
          value: 0,
        },
        {
          id: 9,
          order: 9,
          title: "学习状态综合分析",
          typeName: "课堂学习",
          detail: "一段时间内多个课程综合得分与目标评价结果及表现数据汇总。",
          isOpen: 1,
          value: "未开放",
        },
        {
          id: 10,
          order: 10,
          title: "分组工具使用数量",
          typeName: "同伴交互",
          detail: "使用“分组”工具的数量",
          isOpen: 0,
          value: 0,
        },
        {
          id: 11,
          order: 11,
          title: "工具提交次数",
          typeName: "工具使用",
          detail: "使用工具提交的总次数（不算多次提交的情况）",
          isOpen: 0,
          value: 0,
        },
        {
          id: 12,
          order: 12,
          title: "参与评论次数",
          typeName: "同伴交互",
          detail: "回复他人的次数",
          isOpen: 0,
          value: 0,
        },
        {
          id: 13,
          order: 13,
          title: "回复评论次数",
          typeName: "同伴交互",
          detail: "回复他人给自己的评论的次数",
          isOpen: 1,
          value: "未开放",
        },
        {
          id: 14,
          order: 14,
          title: "获得评论次数",
          typeName: "同伴交互",
          detail: "获得他人回复评论的次数",
          isOpen: 0,
          value: 0,
        },
        {
          id: 15,
          order: 15,
          title: "点赞他人次数",
          typeName: "同伴交互",
          detail: "点赞他人联系的次数",
          isOpen: 0,
          value: 0,
        },
        {
          id: 16,
          order: 16,
          title: "获得点赞次数",
          typeName: "同伴交互",
          detail: "获得他人点赞的次数",
          isOpen: 0,
          value: 0,
        },
        {
          id: 17,
          order: 17,
          title: "客观题平均得分",
          typeName: "同伴交互",
          detail: "单个/多个课程的客观题得分计算（依据正确率统计）",
          isOpen: 1,
          value: "未开放",
        },
      ],
    };
  },
  methods: {
    goTo(path) {
      this.$router.push(path);
    },
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "even_row";
      } else {
        return "";
      }
    },
    isChooseS(id) {
      if (this.isChooseList.length > 0) {
        if (this.isChooseList.indexOf(id) == -1) {
          this.isChooseList.push(id);
        } else {
          this.isChooseList.splice(this.isChooseList.indexOf(id), 1);
        }
      } else {
        this.isChooseList.push(id);
      }
      this.$forceUpdate();
    },
    isNoJump() {
      this.$message.warning("暂未开放此功能！");
    },
    searchModel() {
      if (this.mName != "") {
        let params = {
          cn: this.mName,
          oid: this.ooid,
        };
        this.ajax
          .get(this.$store.state.api + "selectModelList", params)
          .then((res) => {
            var evaList = res.data[0];
            var courseList = res.data[1];
            var sWorksList = res.data[2];
            var studyAllTime = res.data[3];
            var loginAllTime = res.data[4];
            var courseRateList = res.data[5];
            var commentList = res.data[6];
            var likesList = res.data[7];
            var otherLikes = res.data[8];
            var otherComment = res.data[9];
            var sWorksCList = [];
            var cList = [];
            var tool = 0;
            var isFinish = 0;
            var scoreXarray = [];
            let overPer = {};
            for (var i = 0; i < evaList.length; i++) {
              evaList[i].course = [];
              evaList[i].isChoose = [];
              for (var j = 0; j < courseList.length; j++) {
                if (evaList[i].id == courseList[j].evaId) {
                  evaList[i].course.push(courseList[j]);
                }
              }
            }
            for (var i = 0; i < courseList.length; i++) {
              cList.push(JSON.parse(courseList[i].chapters));
              scoreXarray.push(courseList[i].title);
            }
            for (var i = 0; i < courseRateList.length; i++) {
              sWorksCList.push({
                courseid: courseRateList[i].courseId,
                title: courseRateList[i].title,
                rate: courseRateList[i].rate,
                eTitle: courseRateList[i].eTitle,
              });
            }
            for (var i = 0; i < cList.length; i++) {
              for (var j = 0; j < cList[i].length; j++) {
                for (
                  var k = 0;
                  k < cList[i][j].chapterInfo[0].taskJson.length;
                  k++
                ) {
                  let _toolsAarry = [
                    1, 3, 6, 7, 16, 15, 4, 40, 41, 42, 49, 50, 52, 32, 57,
                  ];
                  for (
                    var q = 0;
                    q <
                    cList[i][j].chapterInfo[0].taskJson[k].toolChoose.length;
                    q++
                  ) {
                    if (
                      _toolsAarry.indexOf(
                        cList[i][j].chapterInfo[0].taskJson[k].toolChoose[q]
                          .tool[0]
                      ) != -1
                    ) {
                      tool++;
                    }
                  }
                }
              }
            }
            var toolList = [
              [10, 49], //互动类
              [7, 1, 52, 3], //思维类
              [4, 45, 15, 16, 50, 40, 41, 47, 48], //评价类
              [18, 21, 22, 23, 24, 32, 57], //编程类
              [28, 37, 38, 31, 39, 58, 59, 60], //学科类
              [26, 25], //其他
            ];
            var toolAllArray = [];
            for (var p = 0; p < toolList.length; p++) {
              toolAllArray[p] = [];
              for (var i = 0; i < cList.length; i++) {
                for (var j = 0; j < cList[i].length; j++) {
                  for (
                    var k = 0;
                    k < cList[i][j].chapterInfo[0].taskJson.length;
                    k++
                  ) {
                    for (
                      var q = 0;
                      q <
                      cList[i][j].chapterInfo[0].taskJson[k].toolChoose.length;
                      q++
                    ) {
                      if (
                        toolList[p].indexOf(
                          cList[i][j].chapterInfo[0].taskJson[k].toolChoose[q]
                            .tool[0]
                        ) != -1
                      ) {
                        toolAllArray[p].push(
                          cList[i][j].chapterInfo[0].taskJson[k].toolChoose[q]
                            .tool[0]
                        );
                      }
                    }
                  }
                }
              }
            }
            var tTypeAnaArray = [];
            var allTypeNum = 0;
            for (var i = 0; i < toolAllArray.length; i++) {
              tTypeAnaArray.push(toolAllArray[i].length);
              allTypeNum += toolAllArray[i].length;
            }
            var hdGdp = Math.floor((tTypeAnaArray[0] / allTypeNum) * 100),
              swGdp = Math.floor((tTypeAnaArray[1] / allTypeNum) * 100),
              pjGdp = Math.floor((tTypeAnaArray[2] / allTypeNum) * 100),
              bcGdp = Math.floor((tTypeAnaArray[3] / allTypeNum) * 100),
              xkGdp = Math.floor((tTypeAnaArray[4] / allTypeNum) * 100),
              qtGdp = Math.floor((tTypeAnaArray[5] / allTypeNum) * 100);
            if (hdGdp > 0 || hdGdp == 0) {
              overPer.hdGdp = hdGdp + "%";
            } else {
              overPer.hdGdp = 0;
            }
            if (swGdp > 0 || hdGdp == 0) {
              overPer.swGdp = swGdp + "%";
            } else {
              overPer.swGdp = 0;
            }
            if (pjGdp > 0 || hdGdp == 0) {
              overPer.pjGdp = pjGdp + "%";
            } else {
              overPer.pjGdp = 0;
            }
            if (bcGdp > 0 || hdGdp == 0) {
              overPer.bcGdp = bcGdp + "%";
            } else {
              overPer.bcGdp = 0;
            }
            if (xkGdp > 0 || hdGdp == 0) {
              overPer.xkGdp = xkGdp + "%";
            } else {
              overPer.xkGdp = 0;
            }
            if (qtGdp > 0 || hdGdp == 0) {
              overPer.qtGdp = qtGdp + "%";
            } else {
              overPer.qtGdp = 0;
            }
            var group = 0;
            for (var i = 0; i < sWorksList.length; i++) {
              if (sWorksList[i].atool == "49") {
                group++;
              }
              for (var j = 0; j < courseList.length; j++) {
                if (sWorksList[i].courseid == courseList[j].courseId) {
                  isFinish++;
                }
              }
            }
            var allToolWorks = tool;
            var isFinishTaskWorks = isFinish;
            var isGroup = group;
            if (allToolWorks > 0) {
              overPer.toolSubRate = (
                (isFinishTaskWorks / allToolWorks) *
                100
              ).toFixed(2);
            } else {
              overPer.toolSubRate = 0;
            }

            var xArray = [];
            for (var i = 0; i < sWorksCList.length; i++) {
              if (xArray.length == 0) {
                xArray.push({
                  eTitle: sWorksCList[i].eTitle,
                  name: sWorksCList[i].title,
                  value: 0,
                });
              } else {
                if (xArray.indexOf(sWorksCList[i].title) == -1) {
                  xArray.push({
                    eTitle: sWorksCList[i].eTitle,
                    name: sWorksCList[i].title,
                    value: 0,
                  });
                }
              }
            }
            for (var i = 0; i < xArray.length; i++) {
              for (var j = 0; j < sWorksCList.length; j++) {
                if (xArray[i].name == sWorksCList[j].title) {
                  var rateList = JSON.parse(sWorksCList[j].rate);
                  var a = Object.keys(rateList);
                  var courseCount = 0;
                  for (var k = 0; k < a.length; k++) {
                    if (a[k] == "content") {
                      continue;
                    } else {
                      courseCount += rateList[a[k]];
                    }
                  }
                  xArray[j].value = Math.round(courseCount / (a.length - 1));
                }
              }
            }
            var evaArray = xArray.reduce((acc, cur) => {
              let item = acc.find((i) => i.title === cur.eTitle);
              if (!item) {
                acc.push({ title: cur.eTitle, value: cur.value });
              } else {
                item.value += cur.value;
              }
              return acc;
            }, []);
            var yzArray = [];
            for (var i = 0; i < scoreXarray.length; i++) {
              var yCount = 0;
              for (var j = 0; j < xArray.length; j++) {
                if (scoreXarray[i] == xArray[j].name) {
                  yCount += xArray[j].value;
                }
              }
              yzArray.push({ name: scoreXarray[i], value: yCount });
            }
            yzArray.sort(function (a, b) {
              return b.value - a.value;
            });
            var lTime = 0;
            for (var i = 0; i < loginAllTime.length; i++) {
              lTime += parseInt(loginAllTime[i].text);
            }
            var days = Math.floor(lTime / (3600 * 24));
            lTime %= 3600 * 24;
            var hours = Math.floor(lTime / 3600);
            lTime %= 3600;
            var minutes = Math.floor(lTime / 60);
            lTime %= 60;
            if (days > 0) {
              overPer.loginTime = `${days}天${hours}小时`;
            } else if (days == 0 && hours > 0) {
              overPer.loginTime = `${hours}小时${minutes}分钟`;
            } else if (days == 0 && hours == 0 && minutes > 0) {
              overPer.loginTime = `${minutes}分钟${lTime}秒`;
            } else {
              overPer.loginTime = `${lTime}秒`;
            }
            var sTime = 0;
            for (var i = 0; i < studyAllTime.length; i++) {
              sTime += parseInt(studyAllTime[i].text);
            }
            var days1 = Math.floor(sTime / (3600 * 24));
            sTime %= 3600 * 24;
            var hours1 = Math.floor(sTime / 3600);
            sTime %= 3600;
            var minutes1 = Math.floor(sTime / 60);
            sTime %= 60;
            if (days1 > 0) {
              overPer.studyTime = `${days1}天${hours1}小时`;
            } else if (days1 == 0 && hours1 > 0) {
              overPer.studyTime = `${hours1}小时${minutes1}分钟`;
            } else if (days1 == 0 && hours1 == 0 && minutes1 > 0) {
              overPer.studyTime = `${minutes1}分钟${sTime}秒`;
            } else {
              overPer.studyTime = `${sTime}秒`;
            }
            var courseNum = "";
            if (yzArray.length == 0) {
              courseNum = "暂无课程平均得分";
            } else {
              for (var i = 0; i < yzArray.length; i++) {
                if (yzArray.length == 1) {
                  courseNum = yzArray[i].name + "：" + yzArray[i].value;
                } else {
                  if (courseNum == "") {
                    courseNum = yzArray[i].name + "：" + yzArray[i].value;
                  } else {
                    courseNum +=
                      "," + yzArray[i].name + "：" + yzArray[i].value;
                  }
                }
              }
            }

            var mbNum = "";
            if (evaArray.length == 0) {
              mbNum = "暂无目标得分";
            } else {
              for (var i = 0; i < evaArray.length; i++) {
                if (mbNum == "") {
                  mbNum = evaArray[i].title + "：" + evaArray[i].value;
                } else {
                  mbNum += "," + evaArray[i].title + "：" + evaArray[i].value;
                }
              }
            }

            var isTable = [...this.table1];
            for (var i = 0; i < isTable.length; i++) {
              if (isTable[i].title == "登录时长") {
                isTable[i].value =
                  overPer.loginTime != "秒" ? overPer.loginTime : 0 + "秒";
              } else if (isTable[i].title == "学习时长") {
                isTable[i].value = overPer.studyTime ? overPer.studyTime : 0;
              } else if (isTable[i].title == "工具提交率") {
                isTable[i].value = overPer.toolSubRate + "%";
              } else if (isTable[i].title == "工具使用（类型）") {
                isTable[i].value =
                  "互动类占比：" +
                  overPer.hdGdp +
                  "，思维类占比：" +
                  overPer.swGdp +
                  "，评价类占比：" +
                  overPer.pjGdp +
                  "，编程类占比：" +
                  overPer.bcGdp +
                  "，学科类占比：" +
                  overPer.xkGdp +
                  "，其他占比：" +
                  overPer.qtGdp;
              } else if (isTable[i].title == "课程平均得分") {
                isTable[i].value = courseNum;
              } else if (isTable[i].title == "目标得分") {
                isTable[i].value = mbNum;
              } else if (isTable[i].title == "工具提交次数") {
                isTable[i].value = isFinishTaskWorks;
              } else if (isTable[i].title == "分组工具使用数量") {
                isTable[i].value = isGroup;
              } else if (isTable[i].title == "参与评论次数") {
                isTable[i].value = commentList.length;
              } else if (isTable[i].title == "点赞他人次数") {
                isTable[i].value = likesList.length;
              } else if (isTable[i].title == "获得点赞次数") {
                isTable[i].value = otherLikes.length;
              } else if (isTable[i].title == "获得评论次数") {
                isTable[i].value = otherComment.length;
              }
            }
            this.table = [...isTable];
            this.$forceUpdate();
          })
          .catch((err) => {
            console.error(err);
          });
      } else {
        this.table = [];
      }
    },
    selectStu() {
      let params = {
        oid: this.ooid,
      };
      this.ajax
        .get(this.$store.state.api + "selectOrgStu", params)
        .then((res) => {
          this.stuJuri = res.data[0];
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },
  created() {
    this.selectStu();
  },
};
</script>

<style scoped>
.student_head {
  padding: 10px 25px;
  display: flex;
  justify-content: space-between;
  background: #fff;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.student_search {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.student_search > div:nth-child(1) {
  line-height: 35px;
  font-size: 14px;
  min-width: 60px;
}
.student_search > div:nth-child(4) {
  cursor: pointer;
}
.student_search >>> .el-input__inner {
  width: 190px;
  height: 35px;
  margin-left: 10px;
}
.student_search_right {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}
.student_search_right >>> .el-button {
  margin-left: 5px;
  height: 35px;
  width: 80px;
  font-size: 14px;
  background: #2268bd;
}
.el-table >>> .even_row {
  background-color: #f1f1f1;
}
.el-table >>> .has-gutter > tr th {
  background: #f1f1f1;
}
.modelButton {
  position: fixed;
  right: 5%;
  bottom: 2%;
  background: #409efe;
  color: #fff;
  width: 95px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border-radius: 5px;
  z-index: 9;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 0 10px 0 #b5b5b5;
}
.noOpen {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
}
.noOpenNav {
  background: #f65854;
  color: #fff;
  width: 55px;
  border-radius: 5px;
  text-align: center;
  margin-left: 5px;
  font-size: 12px;
}
.isOverFlow {
  overflow: auto;
}
</style>