<template>
  <div class="pb_content">
    <div class="pb_content_body">
      <div class="body_student">
        <div class="student_head">
          <div class="box_course">
            <div class="wheel"><img src="../assets/sp2.png" alt="" /></div>
            <div style="font-size: 18px; margin: 15px">
              鱼类的起源2.0，实践课程
            </div>
          </div>
        </div>
        <div class="student_body">
          <div class="study_top">
            <div class="checkbox">
              <div
                class="check"
                :class="{ checked: type == 1 }"
                @click="type = 1"
              >
                文档资料
              </div>
              <div
                class="check"
                :class="{ checked: type == 2 }"
                @click="type = 2"
              >
                视频
              </div>
              <div
                class="check"
                :class="{ checked: type == 3 }"
                @click="type = 3"
              >
                附件
              </div>
            </div>
            <div @click="dialogVisible = true" class="btn">提交实践作业</div>
          </div>
          <div class="project_box" v-if="type == 1">
            <div class="detail_content_top">
              <div class="detail_title">鱼类的起源2.0，实践课程</div>
              <div class="detail_time">2021-03-15 15:10:24</div>
            </div>
            <div class="detail_content">
              <div>
                鱼类的直接祖先目前尚无化石证据，因此鱼类的起源只能追溯到奥陶纪以前生活过的原始有头类，它们的后裔分支发展为无颌的甲胃类和有颌的鱼类。鱼类的化石最早发现于志留纪末期，主要是盾皮鱼（Placodermi）和棘鱼（Acan-thodii）两类。盾皮鱼类是一个种类繁多的类群，它代表着有颌类发展的早期阶段。
              </div>
              <div>
                体外披有盾甲，有典型的下颌和与头骨愈合在一起的的上颌，有成对鼻孔，偶鳍和歪型尾，骨骼为软骨，它是志留纪与泥盆纪时期，沿着和早期的鲨类与硬骨鱼类不同的进化路线发展起来的，随着泥盆纪的结束而退出历史舞台。
              </div>
              <div>
                鱼类的直接祖先目前尚无化石证据，因此鱼类的起源只能追溯到奥陶纪以前生活过的原始有头类，它们的后裔分支发展为无颌的甲胃类和有颌的鱼类。鱼类的化石最早发现于志留纪末期，主要是盾皮鱼（Placodermi）和棘鱼（Acan-thodii）两类。盾皮鱼类是一个种类繁多的类群，它代表着有颌类发展的早期阶段。
              </div>
              <div>
                体外披有盾甲，有典型的下颌和与头骨愈合在一起的的上颌，有成对鼻孔，偶鳍和歪型尾，骨骼为软骨，它是志留纪与泥盆纪时期，沿着和早期的鲨类与硬骨鱼类不同的进化路线发展起来的，随着泥盆纪的结束而退出历史舞台。
              </div>
            </div>
          </div>
          <div class="project_box" v-if="type == 2">
            <div class="filebox">
              <div class="media" v-for="x in 30" :key="x">
                <img :src="require('../assets/tu4.png')" alt="" />
                <div class="title">认时木头制作|颗粒板和胶合板制作</div>
                <div class="btn">点击播放</div>
              </div>
            </div>
          </div>
          <div class="project_box" v-if="type == 3">
            <div class="filebox">
              <div class="file" v-for="x in 30" :key="x">
                <img :src="require('../assets/file.png')" alt="" />
                <div>舵机实现.xml</div>
              </div>
            </div>
          </div>
        </div>
        <el-dialog
          title="提交实践作业"
          :visible.sync="dialogVisible"
          :append-to-body="true"
          width="500px"
          :before-close="handleClose"
          class="dialog_change"
        >
          <div style="font-size: 20px; margin-bottom: 10px">上传作业</div>
          <el-input
            type="textarea"
            resize="none"
            rows="7"
            placeholder="输入文字描述..."
            v-model="textarea"
          >
          </el-input>
          <div class="marginT">
            <div>上传图片</div>
            <div
              class="chapter_add"
              v-if="unitJson[unitIndex].cover.length == 0"
              @click="addImg($event)"
            >
              <div class="up_photo">
                <img src="../assets/photo.png" alt="" />
              </div>
              <input
                type="file"
                accept="image/png,image/gif,image/jpeg"
                style="display: none"
                @change="beforeUpload1"
              />
            </div>
          </div>
          <div class="marginT">
            <div>上传视频</div>
            <div
              class="chapter_add"
              v-if="unitJson[unitIndex].cover.length == 0"
              @click="addImg($event)"
            >
              <div class="up_photo">
                <img src="../assets/vidio.png" alt="" />
              </div>
              <input
                type="file"
                accept="image/png,image/gif,image/jpeg"
                style="display: none"
                @change="beforeUpload1"
              />
            </div>
          </div>
          <div class="marginT">
            <div>上传视频</div>
            <div
              class="chapter_add"
              v-if="unitJson[unitIndex].cover.length == 0"
              @click="addImg($event)"
            >
              <div class="up_photo">
				  <el-button type="small" style="background:rgb(60,102,189);color:#fff">点击上传</el-button>
              </div>
              <input
                type="file"
                accept="image/png,image/gif,image/jpeg"
                style="display: none"
                @change="beforeUpload1"
              />
            </div>
          </div>
          <div class="upload_send">提交</div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      textarea: "",
      type: 1,
      rateList: {
        ca: 0,
      },
      rateParams: [],
      colors: ["#000", "#000", "#000"],
      unitIndex: 0,
      unitJson: [
        {
          cover: [], //课程封面
        },
      ],
    };
  },
  methods: {
    handleClose(done) {
      done();
    },
    addImg(e) {
      var el = e.currentTarget;
      el.getElementsByTagName("input")[0].click();
    },
    beforeUpload1(event) {
      this.uploadLoading1 = true;
      var file = event.target.files[0];
      var credentials = {
        accessKeyId: "AKIATLPEDU37QV5CHLMH",
        secretAccessKey: "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",
      }; //秘钥形式的登录上传
      window.AWS.config.update(credentials);
      window.AWS.config.region = "cn-northwest-1"; //设置区域

      var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
      var _this = this;

      if (file) {
        var params = {
          Key:
            file.name.split(".")[0] +
            new Date().getTime() +
            "." +
            file.name.split(".")[1],
          ContentType: file.type,
          Body: file,
          "Access-Control-Allow-Credentials": "*",
          ACL: "public-read",
        }; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
        var options = {
          partSize: 2048 * 1024 * 1024,
          queueSize: 2,
          leavePartsOnError: true,
        };
        bucket
          .upload(params, options)
          .on("httpUploadProgress", function (evt) {
            //这里可以写进度条
            // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
          })
          .send(function (err, data) {
            _this.uploadLoading1 = false;
            if (err) {
              var a = _this.$refs.upload1.uploadFiles;
              a.splice(a.length - 1, a.length);
              _this.$message.error("上传失败");
            } else {
              //上传成功处理
              _this.fileList1.push({
                name: file.name,
                url: data.Location,
                uid: file.uid,
              });
              _this.imgChange();
              console.log(data.Location);
            }
          });
      }
    },
  },
  created() {},
};
</script>

<style scoped>
.body_student {
  margin: 0px auto;
  width: 80%;
  height: 100%;
}
.student_head {
  width: 80%;
  margin: 0 auto;
  background: #fff;
  height: 30%;
}
.wheel > img,
.project > img,
.star > img,
.evaluate > img,
.up_photo > img {
  width: 100%;
  height: 100%;
}
.box_course {
  display: flex;
  flex-direction: column;
}
.wheel {
  width: 100%;
}
.right_box {
  display: flex;
  flex-direction: column;
  margin-left: 30px;
  justify-content: space-around;
}
.right_box_title {
  font-size: 23px;
}
.people {
  display: flex;
}
.student_body {
  width: 80%;
  margin: 0 auto;
  background: #fff;
  margin-top: 20px;
  min-height: 1000px;
  padding: 0 0 20px;
}
.study_top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.study_top .checkbox {
  display: flex;
  align-items: center;
  margin-left: 25px;
}
.study_top .check {
  margin: 0 10px 0 0;
  /* border-bottom: 4px solid #ccc; */
  padding-bottom: 5px;
  width: 80px;
  text-align: center;
  color: rgb(170, 170, 170);
  cursor: pointer;
  height: 30px;
  box-sizing: border-box;
}
.study_top .checked {
  border-bottom: 4px solid #ccc;
  padding-bottom: 5px;
  color: rgb(26, 26, 26);
}
.study_top .btn {
  margin: 25px;
  background: #0e71e6;
  color: #fff;
  width: 120px;
  text-align: center;
  height: 30px;
  line-height: 30px;
  font-size: 13px;
  border-radius: 5px;
  cursor: pointer;
}
.project_box {
  padding: 0 30px 10px 30px;
}

.filebox {
  display: flex;
  flex-wrap: wrap;
}

.file {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 20px 20px 0;
  cursor: pointer;
}

.file div {
  margin-top: 10px;
  width: 150px;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.media {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 20px 20px 0;
  cursor: pointer;
  width: 250px;
  overflow: hidden;
  box-shadow: 0px 1px 3px 0px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%),
    0px 2px 1px -1px rgb(0 0 0 / 12%);
  border-radius: 0 0 5px 5px;
  /* border: 1px solid #cecece; */
  box-sizing: border-box;
}
.media img {
  width: 250px;
  height: 150px;
  object-fit: cover;
}
.media .title {
  padding: 5px 10px;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}
.media .btn {
  margin-top: 10px;
  width: 100%;
  height: 35px;
  line-height: 35px;
  color: #fff;
  background: rgb(14, 114, 230);
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.detail_content_top {
  width: 100%;
  padding: 25px 0 25px 0;
}
.detail_title {
  text-align: center;
  font-size: 24px;
}
.detail_time {
  font-size: 13px;
  padding: 15px 0 0 40px;
}
.detail_content {
  line-height: 2pc;
  width: 90%;
  margin: 0 auto;
  padding-top: 30px;
  text-indent: 30px;
}
.score_box >>> .el-rate {
  margin-left: 10px;
}
.dialog_change >>> .el-dialog {
  border-radius: 5px;
}
.dialog_change >>> .el-dialog__header {
  background: #f2f2f2;
  text-align: center;
}
.dialog_change >>> .el-dialog__title {
  line-height: 5px;
}
.dialog_change >>> .el-dialog__body {
  background: #fff;
  padding: 10px 20px;
}
.score_box {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
  margin-top: 20px;
}
.up_photo {
  width: 60px;
  cursor: pointer;
  margin-top: 10px;
}
.upload_send {
  margin: 20px auto;
  width: 60%;
  background: #169bd6;
  text-align: center;
  height: 35px;
  line-height: 35px;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
}
.marginT{
	margin-top: 20px;
}
</style>
