<template>
  <div style="width: 100%">
    <el-main>
      <div class="pb_head">
        <span>家校社</span>
      </div>
      <div class="pb_content_body">
        <div class="student_head">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }"
              >家校社</el-breadcrumb-item
            >
            <el-breadcrumb-item>{{ name }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div style="margin-bottom: 15px; font-size: 20px">{{ name }}</div>
        <div class="student_table">
          <el-table
            v-loading="isLoading"
            ref="table"
            :data="tableData"
            border
            stripe
            :height="tableHeight"
            :fit="true"
            style="width: 100%"
            :row-class-name="tableRowClassName"
            :header-cell-style="{ background: 'rgb(238,238,238)' }"
          >
            <el-table-column
              prop="name"
              label="姓名"
              min-width="20"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="classname"
              label="班级"
              min-width="20"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="time"
              label="上传时间"
              min-width="20"
              align="center"
            ></el-table-column>
            <el-table-column label="操作" min-width="30">
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  size="small"
                  @click="lookWork(scope.row.id)"
                  >查看作业</el-button
                >
                <!-- <el-button
                type="primary"
                size="small"
                style="background: #f74a4a; border: none"
                >评分</el-button
              > -->
                <el-button
                  type="primary"
                  size="small"
                  @click="deletew(scope.row.id)"
                  style="background: #c4c4c4; border: none"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="student_page">
          <el-pagination
            background
            layout="prev, pager, next"
            :page-size="10"
            :total="total"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </div>
      <el-dialog
        title="查看作业"
        :visible.sync="dialogVisible"
        :append-to-body="true"
        width="750px"
        :before-close="handleClose"
        class="dialog_diy"
      >
        <div class="work_white">
          <div class="pb_head" style="width: 100%">
            <span>{{ name + "-" + workDetail.name }}</span>
            <span style="font-size: 16px">{{
              "关联课程：" + workDetail.title
            }}</span>
          </div>
          <div class="works_score_box">
            <div class="works_score_work">
              <div class="score_head">
                <div>
                  <div class="score_work">
                    <!-- <img src="../../assets/workImg.png" alt="" /> -->
                    <el-image
                      v-for="photo in workDetail.photo"
                      :key="photo"
                      style="width: 100px; height: 100px; margin-right: 10px"
                      :src="photo"
                      @click="handlePictureCardPreview(photo)"
                    ></el-image>
                  </div>
                  <div class="work_content">
                    <span>{{ workDetail.text }}</span>
                  </div>
                </div>
                <!-- <span>绿色快乐农耕园-15课 鱼塘总动员</span> -->
                <div style="min-width: 215px">
                  <el-button type="primary" class="store" @click="doingAssess"
                    >查看视频</el-button
                  >
                  <el-button
                    v-if="type != '2'"
                    type="primary"
                    class="store"
                    :class="{
                      stored: workDetail.rate != '' && workDetail.rate != null,
                    }"
                    @click="giveScore"
                    >{{
                      workDetail.rate == "" || workDetail.rate == null
                        ? "立即评分"
                        : "已评分"
                    }}</el-button
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
          <el-button type="primary" @click="dialogVisible = false"
            >关 闭</el-button
          >
        </span>
      </el-dialog>
      <el-dialog
        title="查看视频"
        :visible.sync="dialogVisible1"
        :append-to-body="true"
        width="750px"
        :before-close="handleClose"
        class="dialog_diy"
      >
        <div class="assess_top">
          <div>{{ name }}</div>
        </div>
        <div class="student_Answer">
          <div class="toux">
            <img
              :src="
                workDetail.smailheadportrait
                  ? workDetail.smailheadportrait
                  : require('../../assets/portal.png')
              "
              alt=""
            />
          </div>
          <div class="nav">
            <div class="studentName">{{ workDetail.name }}</div>
            <div class="studentAnswer">
              {{ workDetail.text }}
            </div>
          </div>
        </div>
        <div class="assess_Img">
          <video-player
            class="video-player vjs-custom-skin"
            ref="videoPlayer"
            :playsinline="true"
            :options="playerO"
            style="width: 100%; height: 100%"
          ></video-player>
        </div>
        <!-- <div class="workName">创意松果画-南非大象制作篇</div> -->
        <!-- <div class="student_Answer">
        <div class="toux">
          <img
            :src="
              workDetail.smailheadportrait
                ? workDetail.smailheadportrait
                : require('../../assets/portal.png')
            "
            alt=""
          />
        </div>
        <div class="nav">
          <div class="studentName">{{ workDetail.name }}</div>
          <div class="studentAnswer">
            {{ workDetail.text }}
          </div>
        </div>
      </div> -->
        <!-- <div class="comment">
        <div class="comment_title">
          评论<span>({{ this.commentCount }})</span>
        </div>
        <div class="other_Answer">
          <div class="toux">
            <img src="../../assets/portal.png" alt="" />
          </div>
          <div class="nav">
            <div class="nameAndTime">
              <div class="otherName">{{ this.commentName }}</div>
              <div class="time">{{ this.commentTime }}</div>
            </div>
            <div class="otherAnswer">{{ this.commentAnswer }}</div>
          </div>
        </div>
        <div class="other_Answer">
          <div class="toux">
            <img src="../../assets/portal.png" alt="" />
          </div>
          <div class="nav">
            <div class="nameAndTime">
              <div class="otherName">{{ this.commentName }}</div>
              <div class="time">{{ this.commentTime }}</div>
            </div>
            <div class="otherAnswer">{{ this.commentAnswer }}</div>
          </div>
        </div>
      </div> -->
        <div class="doingAssess" @click="giveScore" v-if="!isRate && type != 2">
          进行评分
        </div>
        <div class="doingAssess" @click="giveScore" v-else-if="type != 2">
          查看评分
        </div>
      </el-dialog>
      <el-dialog
        title="评分"
        :visible.sync="dialogVisible2"
        :append-to-body="true"
        width="750px"
        :before-close="handleClose"
        class="dialog_diy"
      >
        <div
          class="score_top"
          style="justify-content: space-between; align-items: center"
        >
          <div style="display: flex">
            <div class="userTou">
              <img
                :src="
                  workDetail.smailheadportrait
                    ? workDetail.smailheadportrait
                    : require('../../assets/portal.png')
                "
                alt=""
              />
            </div>
            <div class="score_user_name">{{ workDetail.name }}</div>
          </div>
          <div v-if="workDetail.tn">{{ workDetail.tn + "老师批改" }}</div>
        </div>
        <!-- <div class="course_top">
        <div>课程名称</div>
        <div>绿色快乐农耕园</div>
      </div> -->
        <div class="course_top" style="margin-top: 10px">
          <div>作业名称</div>
          <div>{{ name }}</div>
        </div>
        <div class="sd_score">
          <div class="score_box">
            <span>{{ workDetail.classname }}</span
            ><el-rate
              v-model="rateList.score"
              :disabled="!worksUpdateB && isRate"
            ></el-rate>
          </div>
        </div>
        <div class="displayBox">
          <span>更多评价</span>
          <div class="easy_comment" v-if="!isRate">
            <div
              v-for="(item, index) in easyCommentAarry"
              :key="index"
              @click="easyComment($event)"
            >
              {{ item }}
            </div>
          </div>
        </div>
        <div class="more_say_input">
          <el-input
            type="textarea"
            placeholder="还有要说的吗..."
            :rows="6"
            :disabled="!worksUpdateB && isRate"
            resize="none"
            v-model="rateList.content"
            style="background: #fafafa"
          ></el-input>
        </div>
        <div class="assess_right" @click="rate()" v-if="!isRate">进行评分</div>
        <div class="assess_right" @click="rate()" v-else>
          {{ worksUpdateB ? "确认修改" : "修改评分" }}
        </div>
      </el-dialog>
      <el-dialog :visible.sync="pictureDialog" size="tiny">
        <img width="100%" :src="dialogImageUrl" alt="" />
      </el-dialog>
    </el-main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: this.$route.query.id,
      name: this.$route.query.name,
      type: this.$route.query.type,
      tableHeight: "500px",
      isLoading: false,
      formLabelWidth: "100px",
      dialogVisible: false,
      page: 1,
      total: 0,
      tableData: [],
      dialogVisible1: false,
      dialogVisible2: false,
      subject: "",
      sClass: "",
      subjectJuri: [],
      projectJuri: [],
      grade: [],
      rateList: {
        score: 0,
        content: "",
      },
      rateParams: [],
      easyCommentAarry: [
        "太棒了,再接再励",
        "思维敏捷,聪慧好学",
        "知识丰富,好学好问",
        "同学很耐心,讲解很清晰",
        "你是小天才",
        "同学很细心,做的特别细致",
      ],
      workDetail: {},
      pictureDialog: false,
      dialogImageUrl: "",
      playerO: {},
      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, //全屏按钮
        },
      },
      worksUpdateB: false,
      isRate: false,
    };
  },
  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: {
    handleClose(done) {
      done();
    },
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "even_row";
      } else {
        return "";
      }
    },
    deletew(id) {
      let params = [{
        id: id,
      }];
      this.$confirm("确定删除此作业吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.ajax
            .post(this.$store.state.api + "deleteHomeworks", params)
            .then((res) => {
              this.$message.success("删除成功");
              if (this.page != 1 && this.tableData.length == 1) {
                this.page--;
              }
              this.getWork();
            })
            .catch((err) => {
              console.error(err);
            });
        })
        .catch(() => {});
    },
    lookWork(id) {
      let params = {
        id: id,
      };
      this.ajax
        .get(this.$store.state.api + "getHomeSchoolDetail", params)
        .then((res) => {
          var a = res.data[0][0];
          var content = JSON.parse(a.content);
          a.text = content.content;
          a.photo = content.photo.split(",");
          a.media = content.media;
          if (a.rate) {
            this.isRate = true;
            this.rateList = JSON.parse(a.rate);
          } else {
            this.rateList = {
              score: 0,
              content: "",
            };
          }
          this.playerOptions.poster = a.photo[0];
          this.playerOptions.sources[0].src = a.media;
          this.playerO = this.playerOptions;
          this.workDetail = a;
          this.dialogVisible = true;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    doingAssess() {
      this.dialogVisible1 = true;
    },
    giveScore() {
      this.dialogVisible2 = true;
    },
    right() {
      this.dialogVisible2 = false;
    },
    easyComment(e) {
      this.rateList.content += e.target.innerText + "。";
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getWork();
      console.log(`当前页: ${val}`);
    },
    //作业图片查看
    handlePictureCardPreview(url) {
      this.dialogImageUrl = url;
      this.pictureDialog = true;
    },
    getWork() {
      this.isLoading = true;
      let params = {
        hid: this.id,
        page: this.page,
      };
      this.ajax
        .get(this.$store.state.api + "getHomeSchoolByHid", 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) => {
          console.error(err);
        });
    },
    rate() {
      if (this.isRate && !this.worksUpdateB) {
        this.worksUpdateB = true;
        return;
      }
      if (this.rateList.content == "") {
        this.$message.error("请填写评价内容");
      } else if (this.rateList.score == 0) {
        this.$message.error("请评分");
      }
      let params = [
        {
          rate: JSON.stringify(this.rateList),
          s: this.$store.state.userInfo.userid,
          wid: this.workDetail.id,
        },
      ];
      this.ajax
        .post(this.$store.state.api + "rateHomeWork", params)
        .then((res) => {
          if (!this.isRate) {
            this.$message.success("评分成功");
          } else {
            this.$message.success("修改成功");
          }

          this.isRate = false;
          this.worksUpdateB = false;
          if (this.dialogVisible1) {
            this.dialogVisible1 = false;
          }
          this.lookWork(this.workDetail.id);

          this.dialogVisible2 = false;
        })
        .catch((err) => {
          if (!this.isRate) {
            this.$message.success("评分失败");
          } else {
            this.$message.success("修改失败");
          }
          console.error(err);
        });
    },
  },
  created() {
    this.getWork();
  },
};
</script>

<style scoped>
.student_head {
  margin-bottom: 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.student_search {
  display: flex;
  align-items: center;
}
.student_search > div:nth-child(1) {
  line-height: 35px;
  font-size: 14px;
}
.student_search >>> .el-input {
  width: 200px;
  margin-right: 5px;
}
.student_search >>> .el-input__inner {
  width: 190px;
  height: 35px;
  margin-left: 10px;
}
.student_search >>> .el-button {
  background: #2268bd;
  color: #fff;
  height: 35px;
  line-height: 35px;
  text-align: center;
  width: 60px;
  padding: 0 !important;
  font-size: 12px;
}
.add_task {
  background: #007cff;
  color: #fff;
  font-size: 12px;
  width: 85px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
}
.dialog_diy >>> .el-dialog {
  background: #fafafa;
}
.dialog_diy >>> .el-dialog__header {
  background: #3d67bc !important;
  padding: 15px 20px;
}
.dialog_diy >>> .el-dialog__title {
  font-size: 15px;
  color: #fff;
}
.dialog_diy >>> .el-dialog__headerbtn {
  top: 19px;
}
.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}
.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
  color: #fff;
}
.student_head >>> .el-button--primary {
  background-color: #2268bc;
}
.dialog_diy >>> .el-rate__icon {
  font-size: 26px;
}
.dialog_diy >>> .el-rate {
  height: auto;
}
.dialog_diy >>> .el-dialog__body {
  background: #fff !important;
}
.dialog_diy >>> .el-textarea__inner {
  /* width: 85% !important; */
}
.dialog_diy >>> .el-dialog__footer {
  padding: 10px 50px 20px !important;
}
.dialog-footer >>> .el-button--primary:nth-child(1) {
  width: 85px;
  height: 25px;
  background: #007aff;
  padding: 0;
  border-radius: 0;
  font-size: 12px;
  border: none;
}
.dialog-footer >>> .el-button--primary:nth-child(2) {
  width: 85px;
  height: 25px;
  background: #7e7e7e;
  padding: 0;
  border-radius: 0;
  font-size: 12px;
  border: none;
}
.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;
}
.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;
}
.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: 100%;
  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;
  /* border-bottom: 1px solid #ccc; */
  /* padding-bottom: 25px; */
}
.workName {
  font-size: 18px;
  font-weight: bold;
  margin: 5px 10px;
}
.toux {
  min-width: 50px;
  margin: auto 0;
  width: 50px;
  height: 50px;
  min-height: 50px;
  max-height: 25px;
  border-radius: 50%;
  overflow: hidden;
}
.toux > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nav {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  flex-direction: column;
}
.studentName {
  margin-left: 10px;
  font-size: 18px;
}
.studentAnswer {
  font-size: 12px;
  margin: 5px 0 0 10px;
}
.comment {
  margin: 20px 0 0 10px;
}
.comment > .comment_title {
  font-size: 18px;
}
.comment > .comment_title > span {
  font-size: 14px;
}
.other_Answer {
  display: flex;
  margin: 5px 10px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 15px;
}
.nav {
  margin-left: 5px;
}
.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: 400px;
  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-left: 15px;
}
.userTou {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.userTou > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.score_user_name {
  line-height: 53px;
  margin-left: 15px;
}
.course_top {
  display: flex;
  margin: 30px 0 0 25px;
}
.course_top > div:nth-child(1) {
  line-height: 25px;
}
.course_top > div:nth-child(2) {
  text-align: center;
  height: 25px;
  line-height: 25px;
  margin-left: 10px;
}
.sd_score {
  font-size: 15px;
  background: #fff;
  padding: 10px 25px 1px;
  width: 310px;
}
.sd_score .score_box {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}
.sd_score span {
  text-align: justify;
  display: block;
  margin-right: 10px;
}
.moreSay {
  margin: 0px 0 5px 20px;
}
.more_say_input {
  margin-left: 20px;
  width: 90%;
}
.more_say_input >>> .el-input__inner {
  height: 75px;
  font-size: 13px;
  padding: 0 0 0 10px;
}
.assess_right {
  width: 90%;
  background: #409efe;
  color: #fff;
  text-align: center;
  height: 35px;
  line-height: 35px;
  border-radius: 5px;
  margin: 0 auto;
  margin-top: 20px;
  font-size: 13px;
  cursor: pointer;
}
.sd_comment .displayBox {
  margin-bottom: 10px;
  display: block;
  border-bottom: 3px solid #eee;
  /* padding: 0 0 15px 0; */
  display: flex;
}
.displayBox {
  display: flex;
  border-bottom: 1px solid #eee;
  margin-bottom: 10px;
}
.displayBox span {
  width: 80px;
  margin-left: 25px;
  padding: 0 0 10px;
}
.easy_comment {
  width: calc(100% - 90px);
  display: flex;
  flex-wrap: wrap;
}
.easy_comment div {
  border: 1px solid #4a4a4a;
  color: #666666;
  border-radius: 15px;
  padding: 5px 10px;
  font-size: 16px;
  margin-bottom: 10px;
  margin-right: 5px;
  cursor: pointer;
}
.easy_comment div:hover {
  border: 1px solid #f7ba2a;
  color: #c69217;
}
.work_white {
  background: #fff;
  padding: 15px;
  border-radius: 5px;
}
.workd_comment {
  max-height: 250px;
  overflow: auto;
}
.works_score_work {
  margin: 0 0 20px 0;
  padding: 20px 0;
  border-bottom: 2px solid #eee;
}
.works_score_work:last-child {
  border: none;
}
.score_head span {
  cursor: pointer;
}
.score_head {
  display: flex;
  justify-content: space-between;
  /* align-items: center; */
  align-items: flex-start;
  font-size: 20px;
}
.score_work {
  margin: 15px 10px;
  width: 300px;
}
.score_work > img {
  width: 100%;
  height: 100%;
}
.store {
  padding: 10px 20px;
}
.student_table {
  margin: 20px 0;
}
.stored {
  background: #225088;
  border-color: unset !important;
}
</style>
