<template>
  <div class="homework">
    <div class="title">
      <div class="homework_titile">营地作业</div>
    </div>
    <div class="empty_content" v-if="!this.homeworkList">
      <div>
        <img src="@/assets/img/homework/homework.png" alt="" />
      </div>

      <p>同学你好，老师暂未发布作业</p>
      <p>请于2021年XX年XX月XX日 前往网站查看作业</p>
    </div>
    <div class="home_content">
      <div class="each_content" v-for="item in homeworkList" :key="item.id">
        <div class="top flex">
          <div class="homework_name flex">
            <div>作业名称：{{ item.work_name }}</div>
            <span v-if="item.student_status == 0">未完成</span>
            <span v-if="item.student_status == 1">待评分</span>
            <span v-if="item.student_status == 2">已评分</span>
          </div>
          <el-button size="mini" round @click="toRefer(item)"
            >查看作业</el-button
          >
        </div>
        <div class="line"></div>
        <div class="bottom">
          <div v-html="item.work_context">></div>

          <div class="time flex">
            <div>发布时间：{{ item.create_time }}</div>
            <div>截止日期：{{ item.end_time }}</div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <el-pagination layout="prev, pager, next" :total="50"> </el-pagination>
    </div>
    <!-- 下载作业 -->
    <refer
      :dialogVisibleFu="dialogVisibleFu"
      :work_contexts="work_context"
      :enclosure_urls="enclosure_url"
      :work_nums="work_num"
      :student_status="student_status"
      @closeDialog="closeDialog"
    ></refer>
  </div>
</template>
<script>
/* eslint-disable */
import refer from "v/index/camp/homework/refer";
import { getTeacherWork } from "r/index/homework";
import Bus from "config/bus.js";
export default {
  name: "homework",
  components: {
    refer,
  },
  data() {
    return {
      homeworkList: {},
      dialogVisibleFu: false,
      work_context: "",
      enclosure_url: "",
      work_num: 0,
      student_status: 0,
    };
  },
  created() {
    this.getTeacherWork();
  },
  watch: {},
  methods: {
    // 子组件触发，关闭确认报名弹框
    closeDialog(val, type) {
      this.dialogVisibleFu = val;
      // if (type) {
      //   clearInterval(this.timer);
      // }
    },
    toRefer(item) {
      this.dialogVisibleFu = true;
      // console.log(item.work_num,'val')
      this.work_context = item.work_context;
      this.enclosure_url = item.enclosure_url;
      this.work_num = item.work_num;
      this.student_status = item.student_status;
    },
    getTeacherWork() {
      getTeacherWork({ page: 1 }).then((res) => {
        console.log(res, "getTeacherWork");
        if (res.data.code != 200) {
          return this.$message.error(res.data.message);
        }
        this.homeworkList = res.data.data;
        this.$message.success(res.data.message);
      });
    },
  },
};
</script>


<style lang="scss"  >
.flex {
  display: flex;
}

.homework {
  // background: #ffffff;
  // width: 856px;

  // 空状态
  .title {
    padding: 50px;
    .homework_titile {
      font-size: 24px;
      font-weight: 500;
      color: #1b1419;
      line-height: 24px;
      margin-bottom: 40px;
      text-align: center;
    }
  }

  .content_empty {
    padding-bottom: 200px;
    p,
    div {
      text-align: center;
    }
  }

  // 有作业时候F
  .title {
    padding: 50px 50px 20px 50px;
    .homework_titile {
      font-size: 24px;
      font-weight: 500;
      color: #1b1419;
      line-height: 24px;
      text-align: center;
    }
  }

  .home_content {
    padding-bottom: 200px;
    font-size: 13px;

    .each_content {
      padding: 25px 30px;
      background-color: #eceaea;
      margin: 0 30px 20px 30px;
      // border-radius: 25px;
      .top {
        margin-bottom: 10px;
        justify-content: space-between;
        .homework_name {
          div {
            padding: 7px 20px 7px 0;
          }
          span {
            background-color: white;
            padding: 7px 15px;
            border-radius: 45px;
            font-size: 10px;
          }
        }
      }
      .line {
        border-bottom: 1px solid;
      }
      .bottom {
        //+ 相邻选择器
        // p+div{
        //   font-size: 20px;
        // }
        .time > div {
          margin-right: 20px;
        }
      }
    }
  }
}
</style>

