<template>
  <div class="pb_content" style="background: unset">
    <div
      class="pb_content_body"
      style="
        background: #fff;
        padding: 25px 0 0;
        box-sizing: border-box;
        border-radius: 5px;
      "
    >
      <div class="student_head">
        <div class="student_search">
          <div>课程筛选</div>
          <div style="display: flex; width: 90%">
            <!-- <el-select
              class="r_select"
              v-model="uname"
              placeholder="请选择学生"
              @change="searchWork2"
            >
              <el-option label="所有学生" value></el-option>
              <el-option
                v-for="item in userAarray"
                :key="item.userid"
                :label="item.username"
                :value="item.userid"
              ></el-option>
            </el-select> -->
            <el-select
              v-model="chooseDy"
              placeholder="请选择阶段"
              @change="searchWork1"
            >
              <el-option label="所有阶段" value></el-option>
              <el-option
                v-for="(item, index) in dyList"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
            <el-select
              v-model="chooseTask"
              placeholder="请选择任务"
              @change="searchWork2"
            >
              <el-option label="所有任务" value></el-option>
              <el-option
                v-for="(item, index) in dyList[chooseDy]
                  ? dyList[chooseDy].taskList
                  : []"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </div>
        </div>
      </div>
    </div>
    <div class="pb_content_body">
      <div class="student_table">
        <el-table
          ref="table"
          :data="tableData"
          border
          :height="tableHeight"
          :fit="true"
          v-loading="isLoading"
          style="width: 100%"
          :header-cell-style="{ background: '#f1f1f1' }"
          :row-class-name="tableRowClassName"
          stripe
        >
          <el-table-column
            prop="sName"
            label="姓名"
            min-width="15"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="class"
            label="班级"
            min-width="20"
            align="center"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.class ? scope.row.class : "暂无班级" }}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="course"
            label="项目"
            min-width="20"
            align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="course"
            label="阶段"
            min-width="20"
            align="center"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <div>
                {{ dyList.length > 0 ? dyList[scope.row.stage].name : "" }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="course"
            label="任务"
            min-width="20"
            align="center"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <div>
                {{
                  dyList.length > 0
                    ? dyList[scope.row.stage].taskList[scope.row.task].name
                    : ""
                }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="time"
            label="时间"
            width="100px"
            align="center"
          ></el-table-column>
          <el-table-column label="操作" width="200px" align="center">
            <template slot-scope="scope">
              <el-button
                style="text-align: center"
                type="primary"
                size="small"
                @click="
                  lookWork(
                    scope.row.id,
                    scope.row.userid,
                    scope.row.stage,
                    scope.row.task
                  )
                "
                >查看作业</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-dialog
          title="查看作业"
          :visible.sync="dialogVisible3"
          :append-to-body="true"
          :before-close="handleClose"
          width="800px"
          class="dialog_diy2"
        >
          <div class="zyBoxC">
            <div class="courseTitle" v-if="sInfo.course">
              <div class="course_t">
                <span>
                  {{
                    "第" +
                    (sInfo.stage + 1) +
                    "阶段 " +
                    dyList[sInfo.stage].name
                  }}
                </span>
                <!-- <span>{{ "任务"+(sInfo.task + 1)+' ' + dyList[sInfo.stage].taskList[sInfo.task].name }}</span> -->
              </div>
              <span>
                {{
                  "任务" +
                  (sInfo.task + 1) +
                  " " +
                  dyList[sInfo.stage].taskList[sInfo.task].name
                }}-{{ sInfo.sName }}
              </span>
              <!-- <span v-if="item.askJson" @click="checkAsk(item.askJson)">查看问卷</span> -->
            </div>
            <div class="zyBox">
              <div class="left">
                <div class="left_top">
                  <div
                    class="bigImg"
                    v-if="worksDetail.img && worksDetail.img.length"
                  >
                    <img :src="worksDetail.img[worksDetail.imgIndex].src" alt />
                  </div>
                  <div
                    class="thumbnail"
                    v-if="worksDetail.img && worksDetail.img.length"
                  >
                    <div
                      v-for="(item, index) in worksDetail.img"
                      :key="index"
                      :class="worksDetail.imgIndex == index ? 'isClick' : ''"
                    >
                      <img
                        :src="item.src"
                        alt
                        @click="worksDetail.imgIndex = index"
                      />
                    </div>
                  </div>
                  <div class="work_nopicture" v-else>暂无上传截图</div>
                </div>
                <div class="left_bottom">
                  <!-- <div
                    class="task_title"
                    v-if="sInfo.course"
                  >{{ "任务"+(sInfo.task + 1)+' ' + dyList[sInfo.stage].taskList[sInfo.task].name }}</div>-->
                  <div class="ask_Answer" v-if="worksDetail.askInfo">
                    <div class="ask_Answer_title">问卷调查</div>
                    <div
                      class="ask_Answer_content"
                      v-if="!worksDetail.askInfo.length"
                    >
                      暂无提交问卷
                    </div>
                    <div class="ask_body" v-else>
                      <div
                        v-for="(item, index) in worksDetail.askInfo"
                        :key="index"
                      >
                        <span>
                          问卷-
                          {{ item.askTitle }}
                        </span>
                        <span class="btn" @click="checkAsk(item)">查看</span>
                        <!-- <span
                          style="margin-left:10px"
                        >{{item.time}}</span>-->
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div style="width: 50%; margin-right: 10px">
                <div
                  class="sd_score"
                  style="box-sizing: border-box; width: 100%; box-shadow: none"
                >
                  <div class="title" style="margin-bottom: 10px">
                    <span style="font-size: 18px; width: unset; display: unset"
                      >量规评分</span
                    >
                  </div>
                  <div
                    class="score_box"
                    v-for="(item, index) in worksDetail.eList"
                    :key="index"
                  >
                    <el-tooltip
                      class="item"
                      effect="dark"
                      :content="item.value"
                      placement="top-start"
                    >
                      <span>{{ item.value }}</span>
                    </el-tooltip>
                    <el-rate
                      class="rate_size"
                      style="min-width: 120px"
                      v-model="worksDetail.rateList[item.value]"
                      disabled
                    ></el-rate>
                  </div>
                  <!-- <div class="score_box">
                    <span>意识能力</span>
                    <el-rate></el-rate>
                  </div>
                  <div class="score_box">
                    <span>科学探究能力</span>
                    <el-rate></el-rate>
                  </div>
                  <div class="score_box">
                    <span>实践创新能力</span>
                    <el-rate></el-rate>
                  </div>
                  <div class="score_box">
                    <span>学习反思能力</span>
                    <el-rate></el-rate>
                  </div>
                  <div class="score_box">
                    <span>工程思维能力</span>
                    <el-rate></el-rate>
                  </div>-->
                </div>
                <div class="data_body">
                  <div class="title">
                    <span style="font-size: 18px">雷达图</span>
                  </div>
                  <div style="width: 100%">
                    <!-- <img src="../../../assets/dataimage/1.png" style="width:90%" /> -->
                    <div
                      class="echart charts_canvas"
                      style="width: 100%; height: 100%; margin: 0 0 0 1rem"
                    ></div>
                  </div>
                </div>
              </div>
              <div class="right">
                <div class="comment" v-if="worksDetail.answerInfo">
                  <div class="comment_title">问答</div>
                  <div
                    class="other_Answer"
                    v-if="!worksDetail.answerInfo.length"
                  >
                    暂无提交问答
                  </div>
                  <div class="comment_body" v-else>
                    <div
                      class="answer_body"
                      v-for="(item, index) in worksDetail.answerInfo"
                      :key="index"
                    >
                      <div class="answer_title">
                        <span>提问：</span>
                        {{ item.answerTitle }}
                      </div>
                      <div class="answer_content" v-html="item.answer"></div>
                    </div>
                  </div>
                </div>
                <div
                  v-if="false"
                  class="lastTop"
                  style="
                    width: 100%;
                    padding: 5px 0px 0px;
                    box-sizing: border-box;
                    height: 225px;
                    margin-top: 10px;
                    box-shadow: none;
                  "
                >
                  <div class="moreSay">更多评价</div>
                  <div class="more_say_input" v-if="worksDetail.rateList">
                    <el-input
                      type="textarea"
                      placeholder="还有要说的吗..."
                      :rows="8"
                      resize="none"
                      style="background: #fafafa"
                      v-model="worksDetail.rateList.content"
                    ></el-input>
                  </div>
                </div>
              </div>
              <!-- <div class="rbButtom" @click="giveScore">评分</div> -->
              <!-- @click="updateWorks(item.id, item.rate, index)" -->
              <!-- <div class="rbButtom" @click="updateWorks()">评分</div> -->
            </div>
          </div>
        </el-dialog>
      </div>
      <div class="student_page">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="10"
          :total="total"
          v-if="page"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
    </div>
    <el-dialog :visible.sync="pictureDialog" size="tiny">
      <img width="100%" :src="dialogImageUrl" alt />
    </el-dialog>
    <el-dialog
      title="项目评分"
      :visible.sync="dataVisible"
      :append-to-body="true"
      width="1100px"
      :before-close="handleClose"
      class="dialog_diy"
    >
      <div>
        <div class="a_addBox2">
          <StudentData :studentInfo="studentInfo"></StudentData>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dataVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="查看问卷调查"
      :visible.sync="dialogVisible4"
      :append-to-body="true"
      width="800px"
      :before-close="handleClose"
      class="dialog_diy"
    >
      <div>
        <div
          class="a_add_title"
          style="
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
          "
        >
          <div style="font-size: 20px">{{ askJson.askTitle }}</div>
        </div>
        <div class="a_addBox">
          <div style="font-size: 16px; color: #c7c7c7">问卷内容</div>
          <div
            class="a_add_box"
            v-for="(item, index) in askJson.askJson"
            :key="index"
          >
            <div class="a_add_head">
              <div style="display: flex">
                {{ index + 1 + "、" }}
                <div>问卷题目：{{ item.askstitle }}</div>
              </div>
            </div>
            <div class="a_add_body">
              <div class="a_add_input">
                <el-radio-group v-model="askJson.radio[index]">
                  <el-radio
                    v-for="(item3, checkIndex1) in item.checkList"
                    :key="checkIndex1"
                    :label="checkIndex1"
                    class="redioStyle"
                    disabled
                    >{{ item3 }}</el-radio
                  >
                </el-radio-group>
              </div>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible4 = false"
          >关 闭</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import StudentData from "./studentData";
import htmlDocx from "html-docx-js/dist/html-docx";
import saveAs from "file-saver";
export default {
  components: {
    StudentData,
  },
  props: ["cid", "uid", "ooid"],
  data() {
    return {
      tableHeight: "500px",
      isLoading: false,
      id: this.cid,
      userid: this.uid,
      formLabelWidth: "100px",
      dialogImageUrl: "",
      pictureDialog: false,
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible3: false,
      dialogVisible4: false,
      dataVisible: false,
      studentInfo: {},
      courseByUser: "诗词中的植物",
      userName: "林点",
      answerName: "宿赞公房",
      studentAnswer: "雨荒深院菊,霜倒半池莲.唐杜甫《宿赞公房》",
      commentCount: 0,
      publicIndex: 0,
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "video/mp4", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目   || "video/ogg"|| "video/webm"
            src: "", //url地址require("../../../assets/media/aaa.mp4")
          },
        ],
        // poster: require("../../../assets/tu31.png"), //你的封面地址
        // poster: dataRes.imgUrl, //你的封面地址
        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, //当前时间和持续时间的分隔符
          durationDisplay: true, //显示持续时间
          remainingTimeDisplay: false, //是否显示剩余时间功能
          fullscreenToggle: true, //全屏按钮
        },
      },
      playerO: {},
      commentName: "谭子松",
      commentTime: "2021/2/5",
      commentAnswer:
        "作为家长我很高兴看到孩子的进步，希望这个进步只是一个开始，在新学期能够继续延续，这样才能不负老师的期望",
      tableData: [],
      uploadBoolean: false,
      studentMessage: [],
      subject: "",
      sClass: "",
      chooseDy: "",
      uname: "",
      chooseTask: "",
      subjectJuri: [],
      projectJuri: [],
      mr: require("../../assets/icon/wheel.png"),
      tx: require("../../assets/avatar.png"),
      projectchoose: "",
      scopeId: "",
      thumbnail: [],
      rateList: {
        ca: 0,
        sia: 0,
        eta: 0,
        pia: 0,
        lra: 0,
        content: "",
      },
      rateParams: [],
      page: 1,
      total: 0,
      worksDetail: [],
      suserId: "",
      sInfo: {},
      chapInfo: [],
      vedio: [],
      file: [],
      tType: 0,
      chartObj: null,
      ooption: [
        { value: 0, name: "意识能力" },
        { value: 0, name: "科学探究能力" },
        { value: 0, name: "实践创新能力" },
        { value: 0, name: "学习反思能力" },
        { value: 0, name: "工程思维能力" },
      ],
      option: {
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            name: "量规评分",
            type: "pie",
            radius: "70%",
            center: ["50%", "50%"],
            data: [
              { value: 0, name: "意识能力" },
              { value: 0, name: "科学探究能力" },
              { value: 0, name: "实践创新能力" },
              { value: 0, name: "学习房媳能力" },
              { value: 0, name: "工程思维能力" },
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
              normal: {
                label: {
                  show: true,
                  formatter: "{d}%",
                  inside: true,
                  position: "inner",
                },
                labelLine: { show: false },
              },
            },
          },
        ],
      },
      // 雷达图的数据
      radarOption: {
        splitNumber: 5,
        tooltip: {
          triggerOn: "mousemove",
          //雷达图的tooltip不会超出div，也可以设置position属性，position定位的tooltip 不会随着鼠标移动而位置变化，不友好
          confine: true,
          enterable: true, //鼠标是否可以移动到tooltip区域内
          backgroundColor: "rgba(255,255,255,0.7)",
          textStyle: {
            // 文字样式
            align: "left",
          },
          left: "right",
          top: "bottom",
        },
        radar: {
          radius: ["0%", "70%"],
          shape: "circle",
          center: ["50%", "50%"],
          axisName: {
            textStyle: {
              // 文字样式
              color: "#58a5e6",
            },
            formatter: function (value, indicator) {
              // value = value.replace(/\S{2}/g, function (match) {
              //   return match + "\n";
              // });
              return value;
            },
          },
          indicator: [
            // 雷达图的指示器，用来指定雷达图中的多个变量（维度）
          ],
        },
        // 雷达图背景的颜色，在这儿随便设置了一个颜色，完全不透明度为0，就实现了透明背景
        splitArea: {
          show: true,
          areaStyle: {
            color: "rgba(255,0,0,0)", // 图表背景的颜色
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            width: 1,
            color: "rgba(131,141,158,.1)", // 设置网格的颜色
          },
        },
        series: [
          {
            name: "能力图", // tooltip中的标题
            type: "radar", // 表示是雷达图
            symbol: "circle", // 拐点的样式，还可以取值'rect','angle'等
            symbolSize: 8, // 拐点的大小
            areaStyle: {
              normal: {
                width: 1,
                opacity: 0.2,
              },
            },
            data: [
              {
                // 设置各个指标原始值
                value: [],
                // 设置区域边框和区域的颜色
                itemStyle: {
                  normal: {
                    color: "#58a5e6",
                    lineStyle: {
                      color: "#58a5e6",
                    },
                  },
                },
              },
            ],
          },
        ],
      },
      askJson: {},
      dyList: [],
      userAarray: [],
    };
  },
  mounted() {
    this.$nextTick(function () {
      this.tableHeight =
        window.innerHeight - this.$refs.table.$el.offsetTop - 200;
      if (this.tableHeight <= 530) {
        this.tableHeight = 530;
      }
      // 监听窗口大小变化
      let self = this;
      window.onresize = function () {
        self.tableHeight =
          window.innerHeight - self.$refs.table.$el.offsetTop - 200;
        if (self.tableHeight <= 530) {
          self.tableHeight = 530;
        }
      };
    });
  },
  methods: {
    lookData(uid) {
      let params = {
        uid: uid,
        cid: this.id,
      };
      this.ajax
        .get(this.$store.state.api + "selectWorksDetail", params)
        .then((res) => {
          this.studentInfo = res.data[0][0];
          this.dataVisible = true;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "even_row";
      } else {
        return "";
      }
    },
    handleClose(done) {
      done();
    },
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "even_row";
      } else {
        return "";
      }
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getWorks();
    },
    lookWork(id, uid, stage, task) {
      // this.scopeId = id;
      let params = {
        uid: uid,
        cid: this.id,
        stage: stage,
        task: task,
      };
      this.ajax
        .get(this.$store.state.api + "selectWorksDetail2", params)
        .then((res) => {
          this.sInfo = res.data[0][0];
          this.chapInfo = JSON.parse(res.data[0][0].chapters);
          var chapters = JSON.parse(res.data[0][0].chapters);
          var worksDetail = res.data[1];
          // var askArray = res.data[2];
          this.scopeId = res.data[2].length ? res.data[2][0].id : this.sInfo.id;
          var askInfo = res.data[3];
          var answerInfo = res.data[4];
          var workJson = {
            img: [],
            imgIndex: 0,
            eList: [],
            rateList: {},
            askInfo: [],
            answerInfo: [],
          };
          var eList =
            chapters[this.sInfo.stage].chapterInfo[0].taskJson[this.sInfo.task]
              .eList;
          //           ooption: [
          //   { value: 0, name: "意识能力" },
          //   { value: 0, name: "科学探究能力" },
          //   { value: 0, name: "实践创新能力" },
          //   { value: 0, name: "学习反思能力" },
          //   { value: 0, name: "工程思维能力" },
          // ],
          var _ooption = [];
          if (eList) {
            workJson.eList = eList;
            for (var i = 0; i < eList.length; i++) {
              _ooption.push({ value: 0, name: eList[i].value });
              workJson.rateList[eList[i].value] = 0;
            }
            workJson.rateList.content = "";
            this.ooption = _ooption;
          } else {
            workJson.eList = [
              { value: "意识能力", detail: "", score: 5 },
              { value: "科学探究能力", detail: "", score: 5 },
              { value: "实践创新能力", detail: "", score: 5 },
              { value: "学习反思能力", detail: "", score: 5 },
              { value: "工程思维能力", detail: "", score: 5 },
            ];
            for (var i = 0; i < workJson.eList.length; i++) {
              _ooption.push({ value: 0, name: workJson.eList[i].value });
              workJson.rateList[workJson.eList[i].value] = 0;
            }
            workJson.rateList.content = "";
            this.ooption = [
              { value: 0, name: "意识能力" },
              { value: 0, name: "科学探究能力" },
              { value: 0, name: "实践创新能力" },
              { value: 0, name: "学习反思能力" },
              { value: 0, name: "工程思维能力" },
            ];
          }
          if (this.sInfo.rate) {
            var _rate = JSON.parse(this.sInfo.rate);
            var _rateList = Object.keys(JSON.parse(this.sInfo.rate));
            for (var i = 0; i < _rateList.length; i++) {
              var _c = Object.keys(workJson.rateList);
              if (_c.indexOf(_rateList[i]) != -1) {
                workJson.rateList[_rateList[i]] = _rate[_rateList[i]];
              }
            }
            for (var i = 0; i < this.ooption.length; i++) {
              if (_rateList.indexOf(this.ooption[i].name) != -1) {
                this.ooption[i].value = _rate[this.ooption[i].name];
              }
            }
          }

          for (var i = 0; i < worksDetail.length; i++) {
            workJson.img.push({ src: worksDetail[i].content, id: i });
          }
          for (var i = 0; i < askInfo.length; i++) {
            const element = askInfo[i];
            let a = JSON.parse(element.content)[0];
            let b = a.anwer.split(",");
            let c = [];
            for (var j = 0; j < b.length; j++) {
              c.push(parseInt(b[j]));
            }
            a.askJson.radio = c;
            a.askJson.time = element.time;
            workJson.askInfo.push(a.askJson);
          }

          for (var i = 0; i < answerInfo.length; i++) {
            const element = answerInfo[i];
            workJson.answerInfo.push(JSON.parse(element.content)[0]);
          }

          this.worksDetail = workJson;

          this.courseDetail = res.data[0][0];

          this.$forceUpdate;
          this.dialogVisible3 = true;

          setTimeout(() => {
            var _ooption = JSON.parse(JSON.stringify(this.ooption));
            // var _option = JSON.parse(JSON.stringify(this.option));
            // var _option = JSON.parse(JSON.stringify(this.radarOption));
            var _option = this.radarOption;
            _option.radar.indicator = [];
            _option.series[0].data[0].value = [];
            for (var i = 0; i < _ooption.length; i++) {
              _option.radar.indicator.push({ name: _ooption[i].name, max: 5 });
              _option.series[0].data[0].value.push(_ooption[i].value);
            }
            console.log(_option);
            if (this.chartObj) {
              // _option.series[0].data = _ooption;
              this.chartObj.setOption(_option);
            } else {
              // _option.series[0].data = _ooption;
              this.setChart(_option);
            }
            // this.setChart(this.option);
          }, 0);
        })
        .catch((err) => {
          console.error(err);
        });
    },
    checkAsk(askJson) {
      this.askJson = askJson;
      this.dialogVisible4 = true;
    },
    setChart(option) {
      let _this = this;
      // 雷达图显示的标签
      let newPromise = new Promise((resolve) => {
        resolve();
      });
      //然后异步执行echarts的初始化函数
      newPromise.then(() => {
        console.log(_this.option);

        const chartObj = _this.$echarts.init(
          //劳动课程
          // _this.$el.querySelector("#charts_canvas")
          document.getElementsByClassName("charts_canvas")[0]
        );
        // 初始化雷达图
        _this.chartObj = chartObj;
        _this.chartObj.setOption(option);
      });
    },
    giveScore() {
      this.rateList = this.chapInfo[this.publicIndex].rate;
      this.dialogVisible2 = true;
    },
    //获取分组分类
    getGroup() {
      let params = {};
      this.ajax
        .get(this.$store.state.api + "getGroup", params)
        .then((res) => {
          this.subjectJuri = res.data[0];
          this.projectJuri = res.data[0];
        })
        .catch((err) => {
          console.error(err);
        });
    },
    searchWork1() {
      this.page = 1;
      this.chooseTask = "";
      this.getWorks();
    },
    searchWork2() {
      this.page = 1;
      this.getWorks();
    },
    //获取作业
    getWorks() {
      this.isLoading = true;
      var mr = this.mr;
      let params = {
        cid: this.id,
        uname: this.userid,
        stage: this.chooseDy,
        task: this.chooseTask,
        page: this.page,
      };
      this.ajax
        .get(this.$store.state.api + "getCourseWorks2", params)
        .then((res) => {
          this.isLoading = false;
          this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
          this.tableData = res.data[0];
        })
        .catch((err) => {
          this.isLoading = false;
          console.error(err);
        });
    },
    getCourseDetail() {
      let params = {
        cid: this.cid,
      };
      this.ajax
        .get(this.$store.state.api + "getCourseWorksReport", params)
        .then((res) => {
          this.course = res.data[0][0];
          var dyJSON = JSON.parse(res.data[0][0].chapters);
          let dyList = [];
          for (var i = 0; i < dyJSON.length; i++) {
            dyList.push({ name: dyJSON[i].dyName, id: i, taskList: [] });
            var a = dyJSON[i].chapterInfo[0].taskJson;
            for (var j = 0; j < a.length; j++) {
              dyList[i].taskList.push({ name: a[j].task, id: j });
            }
          }
          this.dyList = dyList;
          this.userAarray = res.data[1];
        })
        .catch((err) => {
          console.error(err);
        });
    },
    // getCourseDetail() {
    //   const loading = this.$loading.service({
    //     background: "rgba(255, 255, 255, 0.7)",
    //     target: document.querySelector(".student_table"),
    //   });
    //   console.log(this.id);
    //   let params = {
    //     courseId: this.id,
    //   };
    //   this.ajax
    //     .get(this.$store.state.api + "selectCourseDetail", params)
    //     .then((res) => {
    //       loading.close();
    //       // this.chapInfo = JSON.parse(res.data[0][0].chapters);
    //       var dyJSON = JSON.parse(res.data[0][0].chapters);
    //       let dyList = [];
    //       for (var i = 0; i < dyJSON.length; i++) {
    //         dyList.push({ name: dyJSON[i].dyName, id: i, taskList: [] });
    //         var a = dyJSON[i].chapterInfo[0].taskJson;
    //         for (var j = 0; j < a.length; j++) {
    //           dyList[i].taskList.push({ name: a[j].task, id: j });
    //         }
    //       }
    //       console.log(dyList);
    //       this.dyList = dyList;
    //       // var dyJSON = JSON.parse()
    //     })
    //     .catch((err) => {
    //       loading.close();
    //       console.error(err);
    //     });
    // },
    handlePictureCardPreview(url) {
      this.dialogImageUrl = url;
      this.pictureDialog = true;
    },
    updateWorks() {
      let params = {
        rate: this.worksDetail.rateList,
        tuid: this.userid,
        id: this.scopeId,
      };
      this.ajax
        .get(this.$store.state.api + "updateWorks", params)
        .then((res) => {
          this.$message({
            message: "评价成功",
            type: "success",
          });
          var _ooption = JSON.parse(JSON.stringify(this.ooption));
          // var _option = JSON.parse(JSON.stringify(this.option));

          var _rate = this.worksDetail.rateList;
          var _rateList = Object.keys(this.worksDetail.rateList);
          for (var i = 0; i < _ooption.length; i++) {
            if (_rateList.indexOf(_ooption[i].name) != -1) {
              _ooption[i].value = _rate[_ooption[i].name];
            }
          }

          // var _option = JSON.parse(JSON.stringify(this.radarOption));
          var _option = this.radarOption;
          _option.radar.indicator = [];
          _option.series[0].data[0].value = [];
          for (var i = 0; i < _ooption.length; i++) {
            _option.radar.indicator.push({ name: _ooption[i].name, max: 5 });
            _option.series[0].data[0].value.push(_ooption[i].value);
          }
          console.log(_option);
          if (this.chartObj) {
            // _option.series[0].data = _ooption;
            this.chartObj.setOption(_option);
          } else {
            this.setChart(_ooption);
          }
          // this.uploadBoolean = false;
          // this.dialogVisible2 = false;
        })
        .catch((err) => {
          this.$message.error("评价失败");
          console.error(err);
        });
    },
    switchVideo(media, index) {
      this.playerO = {};
      this.playerOptions.poster = "";
      this.playerOptions.sources[0].src = media;
      this.playerO = this.playerOptions;
    },
    onPlayerPlay() {},
    // this.$store.commit("update", ["userInfo", userInfo]);
    async generate(a) {
      // 将html文件中需要用到的数据挂载到store上
      this.$store.commit("update", ["report", a]);
      console.log(this.$store.state.report);
      const content = `<!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>报告</title>
      </head>
      <body>
      ${this.$store.state.report}
      </body>
      </html>`;
      // debugger
      //生成报告
      // const link = document.createElement("a");
      // link.download = "报告.html"; // 文件名
      // link.style.display = "none";
      // // 创建文件流
      // // 创建bolb实例时，内容一定要放在[]中
      // const blob = new Blob([content], {
      //   type: "text/plain;charset='utf-8'",
      // });
      // link.href = window.URL.createObjectURL(blob);
      // document.body.appendChild(link);
      // link.click();
      // document.body.removeChild(link);
      saveAs(
        htmlDocx.asBlob(content, {
          orientation: "landscape", //跨域设置
        }),
        //文件名
        "报告.doc"
      );
    },
  },
  created() {
    this.page = 1;
    this.getCourseDetail();
    this.getGroup();
    this.getWorks();
  },
};
</script>

<style scoped>
.pb_head > span:nth-child(2) {
  font-size: 16px;
  margin-left: 80px;
  color: #ab582f;
}
.pb_head {
  margin: 0 !important;
  width: 100% !important;
}
.student_page {
  margin-top: 10px;
}
.student_head {
  margin-top: 10px;
  padding-bottom: 15px;
}
.student_search {
  display: flex;
}
.student_search > div:nth-child(1) {
  line-height: 35px;
  font-size: 14px;
}
.student_search >>> .el-input__inner {
  width: 190px;
  height: 35px;
  margin-left: 10px;
}
.student_table >>> .el-table--border td {
  border-right: 0px !important;
}
.add_work >>> .el-dialog__header {
  padding: 20px 20px 10px;
  text-align: center;
  background: #32455b;
}
.add_work >>> .el-dialog__title {
  font-size: 14px !important;
  color: #fff !important;
}
.add_work >>> .el-dialog__headerbtn {
  font-size: 20px !important;
  top: 5px !important;
  right: 8px !important;
}
.add_work >>> .el-form-item__label {
  margin-left: 65px;
}
.add_work >>> .el-form-item {
  display: flex;
}
.add_work >>> .el-form-item__content {
  margin: 0 !important;
}
.add_work >>> .el-dialog__footer {
  text-align: center !important;
}
.add_work >>> .el-dialog {
  min-width: 650px !important;
  width: 1080px;
}
.add_work >>> .el-dialog__body {
  background: #fff;
  height: 660px;
  overflow: auto;
}
.header-title {
  display: flex;
}
.logoImg {
  width: 30px;
}
.logoImg > img {
  width: 100%;
  height: 100%;
}
.title_add_student {
  margin: 0 auto;
  color: #fff;
}
.top {
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 2px solid #eee;
}
.top > div:nth-child(1) {
  font-size: 18px;
}
.top > div:nth-child(2) {
  font-size: 14px;
  line-height: 28px;
}
.first {
  margin-top: 25px;
  border-bottom: 1px solid #c5c5c5;
}
.one_top {
  display: flex;
  justify-content: space-between;
}
.one_top > div:nth-child(1) {
  color: #2490bf;
  font-size: 16px;
}
.one_top > button {
  width: 100px;
  background: #24a0a4;
  height: 30px;
  color: #e0e0e0;
  font-size: 13px;
  padding: 0 !important;
}
.work_Img {
  width: 150px;
  margin: 10px 0;
}
.assess_Img {
  width: 400px;
  margin: 0 auto;
  padding: 15px 0;
}
.work_Img > img,
.assess_Img > img {
  width: 100%;
  height: 100%;
}
.work_input {
  border: 1px solid;
  width: 135px;
  height: 20px;
  line-height: 20px;
  font-size: 13px;
  padding: 5px;
}
.poetry {
  margin: 10px 0 15px 0;
}
.assess {
  background: #169bd5 !important;
}
.assess_top {
  border-bottom: 2px solid #eee;
  padding-bottom: 10px;
}
.assess_top > div:nth-child(1) {
  color: #2490bf;
  font-size: 16px;
}
.student_Answer {
  display: flex;
  margin: 5px 10px;
  /* padding-bottom: 25px; */
}
.workName {
  font-size: 18px;
  font-weight: bold;
  margin: 5px 10px;
}
.toux {
  width: 35px;
  /* margin: auto 0; */
  height: 35px;
}
.toux > img {
  width: 100%;
  height: 100%;
}
.nav {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  flex-direction: column;
}
.studentName {
  margin-left: 10px;
  font-size: 13px;
}
.studentAnswer {
  font-size: 12px;
  margin: 5px 0 0 10px;
  height: 42px;
  overflow: auto;
}
.comment {
  /* margin: 20px 0 0 10px;
  overflow: auto;
  height: 75%;
  max-height: 330px; */
  overflow: auto;
  /* height: 290px; */
  height: 525px;
  background: #fff;
  border-radius: 5px;
  padding: 10px;
  box-sizing: border-box;
}
.comment_body {
  height: calc(100% - 25px);
  overflow: auto;
}
.comment > .comment_title {
  font-size: 18px;
}
.comment > .comment_title > span {
  font-size: 14px;
}
.other_Answer {
  display: flex;
  margin: 5px 10px;
  padding: 15px 0;
  justify-content: center;
}
.nav {
  margin-left: 5px;
  width: 80%;
}
.nameAndTime {
  display: flex;
}
.otherName {
  font-weight: bold;
  margin-left: 10px;
  font-size: 13px;
}
.time {
  margin-left: 25px;
  font-size: 12px;
  margin-top: 3px;
}
.otherAnswer {
  width: 80%;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
  font-size: 12px;
  margin: 5px 0 0 10px;
}
.doingAssess {
  margin: 0 auto;
  width: 300px;
  background: #169bd5;
  height: 35px;
  line-height: 35px;
  border-radius: 3px;
  font-size: 13px;
  text-align: center;
  color: #fff;
  margin-top: 30px;
  cursor: pointer;
}
.score_top {
  display: flex;
  margin-bottom: 10px;
}
.userTou {
  width: 50px;
}
.userTou > img {
  width: 100%;
  height: 100%;
}
.score_user_name {
  line-height: 53px;
  margin-left: 15px;
}
.course_top {
  display: flex;
  align-items: center;
}
.course_top > div:nth-child(1) {
  line-height: 25px;
}
.course_top > div:nth-child(2) {
  border: 1px solid #ccc;
  width: 250px;
  text-align: center;
  height: 25px;
  line-height: 25px;
  margin-left: 30px;
}
.sd_score {
  font-size: 15px;
  background: #fff;
  padding: 18px 15px 1px;
  margin-bottom: 15px;
  border-radius: 5px;
  width: 90%;
  box-shadow: 2px 2px 5px #909090;
  height: 238px;
  overflow: auto;
}
.sd_score .score_box {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  /* margin-left: 30px; */
}
.sd_score .score_box:last-child {
  margin-bottom: 0;
}

.rate_size >>> .el-rate__icon {
  font-size: 25px;
}
.rate_size >>> .el-icon-star-off {
  font-size: 22px;
}
.sd_score span {
  width: 130px;
  text-align: justify;
  text-align-last: justify;
  display: block;
  margin-right: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 16px;
}
.moreSay {
  margin: 0px 0 5px 20px;
}
.more_say_input {
  margin-left: 20px;
  width: 80%;
}
.more_say_input >>> .el-input__inner {
  height: 75px;
  font-size: 13px;
  padding: 0 0 0 10px;
}
.assess_right {
  width: 200px;
  background: #82b0ee;
  color: #fff;
  text-align: center;
  height: 30px;
  line-height: 30px;
  border-radius: 5px;
  margin: 0 auto;
  margin-top: 20px;
  font-size: 13px;
  cursor: pointer;
}
.student_page {
  margin-top: 10px;
}
.display {
  display: none;
}

.firstTop {
  background: #fff;
  display: flex;
  margin-bottom: 15px;
  flex-direction: column;
  align-items: flex-start;
  height: 90px;
  padding: 10px 25px;
  border-radius: 5px;
  width: 90%;
  box-shadow: 2px 2px 5px #909090;
}

.talkScore >>> .el-dialog__body {
  background: #efefef;
  margin: 0 !important;
}

.lastTop {
  background: #fff;
  border-radius: 5px;
  width: 98%;
  height: 120px;
  box-shadow: 2px 2px 5px #909090;
}

.left,
.right {
  /* background: #fff; */
  border-radius: 5px;
  /* padding: 10px; */
  box-sizing: border-box;
}

.left {
  margin-right: 10px;
  width: 30%;
  min-height: 425px;
}
.left .left_top {
  background: #fff;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 15px;
}
.left .left_bottom {
  background: #fff;
  padding: 10px;
  border-radius: 5px;
  height: 160px;
}
.right {
  width: 20%;
  background: none;
  padding: 0;
}

.courseTitle {
  font-size: 16px;
  font-weight: 600;
  width: 100%;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.course_t {
  font-size: 19px;
  display: flex;
  align-items: flex-end;
}
.course_t span:nth-child(2) {
  font-size: 16px;
  margin-left: 10px;
}

.courseTitle span:nth-child(2) {
  /* font-size: 14px;
  cursor: pointer; */
}

.bigImg {
  margin-top: 10px;
  /* height: 300px; */
  height: 268px;
}

.bigImg > img,
.thumbnail > div > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.thumbnail {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  margin: 10px 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.isClick {
  border: 3px solid #5f89d4;
  border-radius: 5px;
}

.thumbnail > div {
  width: 80px;
  height: 80px;
  margin-right: 5px;
  cursor: pointer;
  flex-shrink: 0;
  box-sizing: border-box;
}

.zyBoxC {
  background: #ededed;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0px;
  flex-direction: column;
}

.zyBox {
  display: flex;
  width: 100%;
  position: relative;
}

.zyBoxC + .zyBoxC {
  margin-top: 10px;
}
.rbButtom {
  position: absolute;
  bottom: 0;
  right: 0;
  background: #06a7ff;
  width: 100px;
  height: 30px;
  border-radius: 5px;
  text-align: center;
  color: #fff;
  line-height: 30px;
  font-size: 14px;
  cursor: pointer;
  right: 10px;
}

.bigImg >>> .vjs-tech,
.bigImg >>> .video-js {
  height: 300px !important;
}

.el-table >>> .even_row {
  background-color: #f1f1f1;
}

.data_body {
  height: 340px;
  display: flex;
  position: relative;
  border-radius: 5px;
  /* border: 1px solid #eee; */
  /* margin: 10px auto; */
  box-sizing: border-box;
  padding: 10px;
  width: 100%;
  background: #fff;
}
.data_body .title {
  position: absolute;
  top: 10px;
  left: 10px;
}

.dialog_diy >>> .el-dialog__header {
  padding: 9px 20px 10px;
  background: #32455b !important;
}
.dialog_diy >>> .el-dialog__title {
  color: #fff;
  font-size: 15px;
}
.dialog_diy >>> .el-dialog__headerbtn {
  top: 14px;
}
.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}
.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
  color: #fff;
}
.dialog_diy >>> .el-dialog__body,
.dialog_diy >>> .el-dialog__footer {
  background: #fafafa;
}

.dialog_diy2 >>> .el-dialog__header {
  padding: 9px 20px 10px;
  background: #32455b !important;
}
.dialog_diy2 >>> .el-dialog__title {
  color: #fff;
  font-size: 15px;
}
.dialog_diy2 >>> .el-dialog__headerbtn {
  top: 14px;
}
.dialog_diy2 >>> .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}
.dialog_diy2 >>> .el-dialog__headerbtn .el-dialog__close:hover {
  color: #fff;
}
.dialog_diy2 >>> .el-dialog__body,
.dialog_diy2 >>> .el-dialog__footer {
  background: #ededed;
  padding: 15px 20px;
}
.a_addBox2 {
  margin: 10px 0;
  background: #fff;
  padding: 15px;
}
.a_addBox {
  margin: 10px 0;
  background: #fff;
  padding: 15px;
  max-height: 400px;
  overflow: auto;
}
.a_add_box {
  border-bottom: 2px solid #eee;
  padding-bottom: 10px;
}

.a_add_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0;
  font-size: 18px;
}
.a_add_head .a_add_head_input {
  width: 300px;
}
.a_add_head .a_add_head_div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.a_add_body {
  display: flex;
  align-items: center;
}
.a_add_input {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  /* flex-direction: column; */
  /* width: 100%; */
}
.a_add_input >>> el-radio-group {
  margin: 10px 0;
}
.redioStyle >>> .el-radio__label {
  font-size: 18px;
}
.task_title {
  font-size: 18px;
  font-weight: 700;
}
.ask_Answer {
  /* margin-top: 10px; */
}
.ask_Answer_title {
  font-size: 18px;
}
.ask_Answer_content {
  display: flex;
  justify-content: center;
  margin: 10px 0;
}

.answer_body {
  padding: 10px 0;
  border-bottom: 1px solid #f5f5f5;
}
.answer_title {
  font-size: 15px;
  font-weight: 700;
}
.answer_content {
  margin-top: 5px;
}
.ask_body {
  display: flex;
  font-size: 16px;
  margin-top: 10px;
  flex-direction: column;
  height: 130px;
  overflow: auto;
  /* padding: 0 10px; */
  box-sizing: border-box;
}
.ask_body div {
  /* cursor: pointer; */
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ask_body div .btn {
  cursor: pointer;
  color: #fff;
  background-color: #409eff;
  text-align: center;
  font-size: 12px;
  padding: 6px 12px;
  box-sizing: border-box;
  border-radius: 5px;
  width: 60px;
}
.ask_body div span:nth-child(1) {
  max-width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ask_body div + div {
  margin-top: 10px;
}
.work_nopicture {
  display: flex;
  justify-content: center;
  align-items: center;
  /* height: 350px; */
  height: 352px;
}
.student_table >>> .el-table,
.student_table >>> .el-table__body-wrapper {
  height: auto !important;
}
</style>
