<template>
  <div style="width: 100%">
    <el-main>
      <div class="tou">作业管理</div>
      <div>
        <div class="student_head">
          <div class="student_search">
            <span>
              <el-input
                placeholder="请输入学生名称"
                v-model="studentnameA"
                clearable
              >
              </el-input>
            </span>
            <el-button type="primary" @click="search">查询</el-button>
          </div>
        </div>
        <div class="student_table">
          <el-table
            ref="table"
            :data="tableData"
            stripe
            border
            :height="tableHeight"
            :fit="true"
            style="width: 100%"
            :header-cell-style="{ background: '#f1f1f1' }"
            v-loading="isLoading"
          >
            <el-table-column prop="name" label="姓名" min-width="10">
            </el-table-column>
            <el-table-column prop="workName" label="作业名称" min-width="25">
            </el-table-column>
            <el-table-column prop="title" label="课程名称" min-width="25">
            </el-table-column>
            <el-table-column prop="time" label="时间" min-width="10">
            </el-table-column>
            <el-table-column label="操作" min-width="25">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="getWork(scope.row)"
                  >查看作业</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="deleteWorks(scope.row.id)"
                  >删除</el-button
                >
                <el-button type="text" size="small" @click="up(scope.row.id)"
                  >上移</el-button
                >
                <el-button type="text" size="small" @click="down(scope.row.id)"
                  >下移</el-button
                >
                <el-button type="text" size="small" @click="first(scope.row.id)"
                  >置顶</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"
            v-if="!isListAjax && page"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </div>
    </el-main>
    <el-dialog
      title="查看作业"
      :visible.sync="dialogVisible1"
      :append-to-body="true"
      width="750px"
      :before-close="handleClose"
      class="dialog_diy"
    >
      <div>
        <div class="pb_head" style="width: 100%">
          <span>{{ res.title }}</span>
        </div>
        <div>
          <div class="workd_head">
            <div class="workd_media">
              <!-- <el-image
                style="width: 100%; height: 300px"
                :src="require('../../assets/tu4.png')"
              ></el-image> -->
              <video-player
                class="video-player vjs-custom-skin"
                ref="videoPlayer"
                :playsinline="true"
                :options="playerO"
                @play="onPlayerPlay($event)"
                style="width: 100%; height: 100%"
              ></video-player>
            </div>
            <div class="workd_title">{{ res.stitle }}</div>
            <div class="workd_photo">
              <div class="work_img" v-for="item in res.imgUrl" :key="item">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="item"
                  fit="cover"
                  @click="viewImg(item)"
                ></el-image>
              </div>
            </div>
            <div class="workd_content">
              <div
                class="mywd_rate_comment"
                v-for="item in resP"
                :key="item.id"
              >
                <div class="mywd_rate_head">
                  <div class="mywd_rate_head_img mwd_img_box user_comment">
                    <img src="../../assets/jiazhang.png" alt="" />
                  </div>
                  <div class="mywd_rate_head_title">
                    <div>{{ item.parentname }}家长</div>
                  </div>
                </div>
                <div class="mywd_rate_comment_body">
                  <span>{{ item.content }}</span>
                </div>
              </div>
            </div>
            <div class="comments_title">
              <span>评论</span><span>({{ resS.length }})</span>
            </div>
            <div class="workd_comment">
              <div
                class="mywd_rate_comment"
                v-for="index in resS"
                :key="index.id"
              >
                <div class="mywd_rate_head">
                  <div class="mywd_rate_head_img mwd_img_box">
                    <img
                      :src="
                        index.smailheadportrait
                          ? index.smailheadportrait
                          : require('../../assets/portal.png')
                      "
                      alt=""
                    />
                  </div>
                  <div class="mywd_rate_head_title">
                    <div>
                      {{ index.name }}<span>{{ index.time }}</span>
                    </div>
                  </div>
                </div>
                <div class="mywd_rate_comment_body">
                  <span>{{ index.content }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" style="display: flex; justify-content: center">
        <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
        <el-button
          style="width: 90%; margin: 0 auto"
          type="primary"
          v-if="res.rate"
          @click="dialogVisible2 = true"
          >查看评分</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="查看评分"
      :visible.sync="dialogVisible2"
      :append-to-body="true"
      width="750px"
      :before-close="handleClose"
      class="dialog_diy"
    >
      <div class="work_white">
        <div class="sd_head">
          <div style="display: flex; align-items: center">
            <img
              :src="
                res.smailheadportrait
                  ? res.smailheadportrait
                  : require('../../assets/portal.png')
              "
              alt=""
            /><span>{{ res.name }}</span>
          </div>
          <div v-if="res.teachername">{{ res.teachername + "老师批改" }}</div>
        </div>
        <div class="sd_title">
          <span>课程名称</span><span>{{ res.title }}</span>
        </div>
        <div class="sd_title">
          <span>作业名称</span><span>{{ res.workName }}</span>
        </div>
        <div class="sd_score">
          <div class="score_box">
            <span>劳动认知</span
            ><el-rate v-model="rateList.ca" :disabled="true"></el-rate>
          </div>
          <div class="score_box">
            <span>劳动观念</span
            ><el-rate v-model="rateList.sia" :disabled="true"></el-rate>
          </div>
          <div class="score_box">
            <span>劳动精神</span
            ><el-rate v-model="rateList.eta" :disabled="true"></el-rate>
          </div>
          <div class="score_box">
            <span>劳动能力</span
            ><el-rate v-model="rateList.pia" :disabled="true"></el-rate>
          </div>
          <div class="score_box">
            <span>劳动习惯与品质</span
            ><el-rate v-model="rateList.lra" :disabled="true"></el-rate>
          </div>
        </div>
        <div class="sd_comment">
          <span>更多评价</span>
          <el-input
            type="textarea"
            placeholder="还有要说的吗..."
            :rows="6"
            resize="none"
            v-model="rateList.content"
            :readonly="true"
            style="background: #fafafa"
          ></el-input>
        </div>
      </div>
      <span slot="footer" style="display: flex; justify-content: center">
        <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
        <el-button style="" @click="dialogVisible2 = false">关闭</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="pictureDialog" size="tiny">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import "../../common/aws-sdk-2.235.1.min";

export default {
  data() {
    return {
      tableData: [],
      page: 1,
      total: 0,
      tableHeight: 500,
      isLoading: false,
      studentnameA: "",
      pictureDialog: false,
      dialogImageUrl: "",
      dialogVisible1: false,
      dialogVisible2: false,
      res: [],
      rateList: {
        ca: 0,
        sia: 0,
        eta: 0,
        pia: 0,
        lra: 0,
        content: "",
      },
      resP: [],
      resS: [],
      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, //全屏按钮
        },
      },
      isListAjax: false,
    };
  },
  methods: {
    handleClose(done) {
      done();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getWorks();
    },
    viewImg(item) {
      this.dialogImageUrl = item;
      this.pictureDialog = true;
    },
    //获取所有作业
    getWorks() {
      this.isLoading = true;
      let params = {
        oid: this.$store.state.userInfo.organizeid,
        cn: this.studentnameA,
        page: this.page,
      };
      this.ajax
        .get(this.$store.state.api + "getAllWorks", params)
        .then((res) => {
          this.isListAjax = false;
          this.isLoading = false;
          this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
          if (res.data[0].length > 0) {
            res.data[0].filter((element) => {
              var chap = JSON.parse(element.chapters).homework;
              for (var j = 0; j < chap.length; j++) {
                if (element.homeworkid == chap[j].hid) {
                  element.workName = chap[j].name;
                  continue;
                }
              }
            });
          }
          this.tableData = res.data[0];
        })
        .catch((err) => {
          this.isLoading = false;
          console.error(err);
        });
    },
    deleteWorks(id) {
      let params = [{ id: id }];
      this.$confirm("确定删除此学生的作业吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.ajax
            .post(this.$store.state.api + "deleteWorkAdmin", params)
            .then((res) => {
              this.$message({
                message: "删除成功",
                type: "success",
              });
              if (this.page != 1 && this.tableData.length == 1) {
                this.page--;
              }
              this.getWorks();
            })
            .catch((err) => {
              this.$message.error("删除失败");
              console.error(err);
            });
        })
        .catch(() => {});
    },
    up(id) {
      let params = [{ id: id }];
      this.ajax
        .post(this.$store.state.api + "upWorks", params)
        .then((res) => {
          this.$message({
            message: "上移成功",
            type: "success",
          });
          this.getWorks();
        })
        .catch((err) => {
          this.$message.error("上移失败");
          console.error(err);
        });
    },
    down(id) {
      let params = [{ id: id }];
      this.ajax
        .post(this.$store.state.api + "downWorks", params)
        .then((res) => {
          this.$message({
            message: "下移成功",
            type: "success",
          });
          this.getWorks();
        })
        .catch((err) => {
          this.$message.error("下移失败");
          console.error(err);
        });
    },
    first(id) {
      let params = [{ id: id }];
      this.ajax
        .post(this.$store.state.api + "firstWorks", params)
        .then((res) => {
          this.$message({
            message: "置顶成功",
            type: "success",
          });
          this.getWorks();
        })
        .catch((err) => {
          this.$message.error("置顶失败");
          console.error(err);
        });
    },
    search() {
      this.isListAjax = true;
      this.page = 1;
      this.getWorks();
    },
    getWork(works) {
      var content = works.rate ? JSON.parse(works.rate).content : "";
      works.comment = content;
      works.imgUrl = JSON.parse(works.content).photo.split(",");
      works.media = JSON.parse(works.content).media;
      works.stitle = works.workName + "-" + works.name;
      this.playerOptions.poster = works.imgUrl[0];
      this.playerOptions.sources[0].src = works.media;
      this.playerO = this.playerOptions;
      this.rateList = works.rate ? JSON.parse(works.rate) : "";

      this.res = works;
      console.log(works);
      let params = { aid: works.id };
      this.ajax
        .get(this.$store.state.api + "getWorkByWidT", params)
        .then((resA) => {
          this.resP = resA.data[1]; //家长评论
          this.resS = resA.data[2]; //学生评论
          this.dialogVisible1 = true;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    changeHeight() {
      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;
        }
      };
      // this.$refs.table.$el.offsetTop：表格距离浏览器的高度 //200表示你想要调整的表格距离底部的高度（你可以自己随意调整），因为我们一般都有放分页组件的，所以需要给它留一个高度
    },
  },
  created() {
    this.$nextTick(function () {
      this.page = 1;
      this.changeHeight();
      this.getWorks();
    });
  },
};
</script>


<style scoped>
.dialog_diy >>> .el-dialog__header {
  background: #3d67bc !important;
  padding: 15px 20px;
}
.dialog_diy >>> .el-dialog__title {
  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;
}

.tou {
  border-bottom: 1px solid #c9c9c9;
  height: 50px;
  font-size: 30px;
}
.student_head >>> .el-button--primary {
  background-color: #2268bc;
}
.student_head {
  margin: 10px 0 0 0;
  display: flex;
  justify-content: space-between;
}
.student_search {
  display: flex;
  width: 300px;
}
.student_search span {
  margin: 0 10px 0 0;
}
.student_button .el-button--primary {
  margin-right: 10px;
}
.student_table {
  margin: 20px 0;
}

.pb_head {
  font-size: 26px;
  /* font-weight: 600; */
  width: 95%;
  margin: 10px auto;
  padding: 10px 5px;
  border-bottom: 3px solid #eee;
}

.workd_media {
  width: 100%;
  height: 400px;
}
.workd_title {
  font-size: 20px;
  margin-top: 20px;
}
.workd_content {
  margin-bottom: 30px;
}
.mywd_rate_comment {
  padding: 10px 0 5px 0;
  border-bottom: 2px solid #eee;
}
.mywd_rate_head {
  display: flex;
}
.mywd_rate_head_img {
  width: 50px;
}
.mywd_rate_head_img img {
  width: inherit;
}

.mwd_img_box {
  width: 40px;
  height: 40px;
  border-radius: 50px;
  overflow: hidden;
  margin: 5px;
}
.user_comment {
  width: 30px;
  height: 30px;
}
.mwd_img_box img {
  height: inherit;
}

.mywd_rate_head_title {
  display: flex;
  align-items: center;
}
.mywd_rate_head_title div {
  margin-bottom: 10px;
}
.mywd_rate_head_title span {
  margin-left: 10px;
}
.mywd_rate_comment_body {
  width: 88%;
  margin: 0 auto 10px;
  font-size: 14px;
}
.sd_head {
  margin: 10px auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sd_head img {
  width: 50px;
  height: 50px;
}
.sd_head span {
  margin-left: 20px;
  font-size: 20px;
}
.sd_title {
  font-size: 18px;
  margin: 20px auto;
}
.sd_title span:nth-child(2) {
  margin-left: 10px;
  color: rgb(156, 156, 156);
}

.sd_score {
  font-size: 18px;
  background: #fff;
  padding: 18px 18px 1px;
  width: 310px;
  margin-bottom: 15px;
}
.sd_score .score_box {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}
.sd_score span {
  width: 130px;
  text-align: justify;
  text-align-last: justify;
  display: block;
  margin-right: 20px;
}
.sd_comment {
  font-size: 20px;
}
.sd_comment span {
  margin-bottom: 10px;
  display: block;
  border-bottom: 3px solid #eee;
  padding: 0 0 15px 0;
}
.sd_comment >>> .el-textarea__inner {
  background: #fafafa;
}
.work_white {
  background: #fff;
  padding: 15px;
  border-radius: 5px;
}
.workd_comment {
  max-height: 250px;
  overflow: auto;
}

.workd_photo {
  display: flex;
  width: 100%;
  margin: 10px auto;
  overflow: auto;
}

.work_img {
  margin-right: 10px;
  cursor: pointer;
}
.dialog_diy >>> .el-rate__icon {
  font-size: 26px;
}
.dialog_diy >>> .el-rate {
  height: auto;
}
</style>
