<template>
  <div class="pb_content2" style="background: #e8e7e7">
    <div class="pb_head">
      <van-icon
        name="arrow-left"
        color="#fff"
        class="pb_back"
        size="1.2rem"
        @click="goBack"
      />
      <span>作业详情</span>
    </div>
    <div
      class="pb_content_body"
      style="position: relative; height: calc(100% - 3rem); min-height: unset"
    >
      <div class="wd_box">
        <div class="work_detail">
          <div class="work_top">
            <div class="lag">
              <img src="../../assets/icon/lag.png" alt="" />
            </div>
            <div class="work_title">绿色快乐农耕园</div>
          </div>
          <div class="work_content">
            开展"家务劳动小能手"让幼儿体会父母的辛苦，激发幼儿为父母分担家务劳动的激情。因此让幼儿在家里做一件力所能及的家务。
          </div>
          <div class="work_time">09-24 18:00 周五发布</div>
        </div>
        <div class="ex_date">
          <div class="ex_left">
            <div class="nolck">
              <img src="../../assets/icon/nolck.png" alt="" />
            </div>
            <div class="ex_time">截止日期</div>
          </div>
          <div class="ex_right">09-26 周日 23:59</div>
        </div>
      </div>
      <div class="wd_button" v-if="type == 1">
        <div class="upload_work2">前往课程</div>
        <div class="upload_work" @click="goTo('/submitWork')">提交作业</div>
      </div>
      <div class="wd_button" v-else-if="type == 2">
        <div class="upload_work" @click="SignUp()">我要报名</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      type: this.$route.query.type,
    };
  },
  methods: {
    goTo(path) {
      this.$router.push(path);
    },
    SignUp() {
      this.$toast.success("报名成功,请等待管理员审核");
    },
    goBack() {
      this.$router.isBack = true;
      if (window.history.length <= 1) {
        this.$router.push({ path: "/" });
        return false;
      } else {
        this.$router.go(-1);
      }
    },
  },
};
</script>

<style scoped>
.lag > img,
.nolck > img {
  width: 100%;
  height: 100%;
}
.lag {
  width: 1.5rem;
  height: 1.5rem;
}
.work_detail {
  background: #fff;
  width: 90%;
  margin: 0rem auto 1rem;
  border-radius: 0.5rem;
}
.work_top {
  display: flex;
  padding: 0.8rem 0.5rem 0 0.5rem;
}
.work_title {
  font-size: 0.9rem;
  font-weight: bold;
  line-height: 1.4rem;
  padding-left: 0.4rem;
  border-radius: 0.3rem;
}
.work_content {
  width: 90%;
  margin: 0 auto;
  font-size: 0.8rem;
  color: #999;
  line-height: 1.5rem;
  padding: 0.3rem 0 0.8rem 0;
}
.work_time {
  color: #999;
  font-size: 0.4rem;
  padding: 0.5rem 1.2rem;
}
.nolck {
  width: 1.1rem;
  height: 1.1rem;
  line-height: 1.9rem;
}
.ex_date {
  display: flex;
  width: 90%;
  margin: 0 auto;
  background: #fff;
  padding: 0.5rem 0;
  flex-direction: row;
  justify-content: space-around;
  border-radius: 0.3rem;
}
.ex_left {
  display: flex;
}
.ex_time {
  font-size: 0.8rem;
  line-height: 1.5rem;
  padding-left: 0.4rem;
}
.ex_right {
  font-size: 0.8rem;
  line-height: 1.5rem;
}
.upload_work {
  width: 100%;
  height: 2.8rem;
  background: #50cf72;
  color: #fff;
  text-align: center;
  line-height: 2.8rem;
  flex: 1;
}
.upload_work2 {
  width: 100%;
  height: 2.8rem;
  background: rgb(85, 183, 145);
  color: #fff;
  text-align: center;
  line-height: 2.8rem;
  flex: 1;
}
.wd_box {
  padding: 1rem 0;
  height: calc(100% - 2.8rem);
  overflow: auto;
  box-sizing: border-box;
}
.wd_button {
  display: flex;
  align-items: center;
  position: sticky;
  width: 100%;
  bottom: 0;
}
</style>
