<template>
  <div class="my-course">
    <div
      class="my-course__header"
      v-if="livingSectionList[0]"
      @click="goLive(livingSectionList[0])"
    >
      <img src="@/assets/live.png" class="img" alt="" />
      <div class="text">
        {{ livingSectionList[0].name }}
      </div>
      <div class="note">正在直播中</div>
      <div class="note">></div>
    </div>
    <div class="my-course__body">
      <div class="list">
        <div
          class="course-item"
          v-for="(item, index) in courseList"
          :key="index"
        >
          <div class="course-item__header">
            <div class="state">
              <div class="note note--yellow">直播</div>
              <span class="title">{{ item.goodsName }}</span>
            </div>
          </div>
          <div class="course-item__body clearfix">
            <div class="img">
              <img :src="$tools.splitImgHost(item.coverUrl, true)" alt="" />
            </div>
            <div class="text">
              <div class="title">
                <div class="note">{{ item.studyCount }}学时</div>
              </div>
              <div class="desc">
                直播日期: {{ $tools.timestampToTime(item.liveStartTime) }} -
                {{ $tools.timestampToTime(item.liveEndTime) }}
              </div>
            </div>
            <div class="btns-wrap">
              <div class="btns">
                <el-button
                  type="primary"
                  class="btn btn--normal"
                  @click="goCourseDetail(item)"
                  >进入学习</el-button
                >
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="pagination">
        <el-pagination
          @current-change="currentChange"
          background
          layout="prev, pager, next"
          :total="total"
          :pager-count="5"
          :page-size="param.pageSize"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import * as baseUrls from "@/axios.js";
export default {
  name: "MyCourse",
  data() {
    return {
      param: {
        pageNum: 1,
        pageSize: 10,
      },
      livingSectionList: [],
      total: 0,
      courseList: [],
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  async mounted() {
    this.goodsListGoodsUserLive();
    this.goodsLivingSectionList();
  },
  methods: {
    goLive() {
      this.$router.push({
        path: "/living-room/" + this.livingSectionList[0].liveUrl,
        query: {
          goodsId: this.livingSectionList[0].goodsId,
          courseId: this.livingSectionList[0].courseId,
          gradeId: 0,
          orderGoodsId: this.livingSectionList[0].orderGoodsId,
          sectionId: this.livingSectionList[0].sectionId,
          chapterId: this.livingSectionList[0].chapterId || 0,
          moduleId: this.livingSectionList[0].moduleId || 0,
        },
      });
    },
    goodsLivingSectionList() {
      this.$request.goodsLivingSectionList().then((res) => {
        this.livingSectionList = res.data;
      });
    },
    currentChange(e) {
      this.param.pageNum = e;
      this.goodsListGoodsUserLive();
    },
    async goCourseDetail(item) {
      this.$request
        .courseCourseList({
          pageNum: 1,
          pageSize: 1,
          goodsId: item.goodsId,
          gradeId: 0,
          orderGoodsId: item.orderGoodsId,
        })
        .then((res) => {
          if (res.code == 200) {
            if (res.rows.length) {
              this.$router.push({
                path: `/my-live-detail/${item.goodsId}`,
                query: {
                  gradeId: 0,
                  orderGoodsId: item.orderGoodsId,
                  courseId: res.rows[0].courseId || "",
                },
              });
            } else {
              this.$message({
                type: "warning",
                message: "暂无可观看的直播课程",
              });
            }
          }
        });
    },

    goodsListGoodsUserLive() {
      this.$request.goodsListGoodsUserLive(this.param).then((res) => {
        this.courseList = res.rows;
        this.total = res.total;
      });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.my-course {
  &__header {
    cursor: pointer;
    margin-top: 16px;
    height: 40px;
    background: linear-gradient(-90deg, #9254de, #d3adf7);
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding-left: 16px;

    .img {
      width: 23px;
    }

    .text {
      flex: 1;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #ffffff;
      margin-left: 16px;
    }

    .note {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #ffffff;
      margin-right: 16px;
    }
  }
  &__body {
    .list {
      .course-item {
        margin-top: 24px;
        background: #fafbfc;
        border-radius: 8px;
        overflow: hidden;

        &__header {
          height: 40px;
          border-bottom: 1px solid #eee;
          padding: 0 18px;

          .state {
            margin-top: 8px;
            float: left;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #666666;

            .note {
              vertical-align: middle;
              display: inline-block;
              padding: 0 10px;
              height: 24px;
              background: #ffeceb;
              border: 1px solid #ff3b30;
              border-radius: 12px;
              font-size: 14px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #ff3b30;
              text-align: center;
              line-height: 24px;
              margin-right: 10px;

              &--yellow {
                border-color: #ffb001;
                color: #ffb001;
                background: #fff8e8;
              }
            }

            .title {
              margin-top: 10px;
              font-size: 16px;
              font-family: Microsoft YaHei;
              font-weight: bold;
              color: #333333;
            }
          }
        }

        &__body {
          .img {
            float: left;
            width: 160px;
            height: 90px;

            img {
              max-width: 100%;
              max-height: 100%;
            }
          }

          .text {
            float: left;
            margin-left: 12px;
            .title {
              margin-top: 10px;
              .note {
                display: inline-block;
                vertical-align: middle;
                border: 1px solid #333333;
                border-radius: 4px;
                font-size: 12px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #333333;
                padding: 2px 5px;
              }
            }

            .desc {
              margin-top: 30px;
              font-size: 12px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #666666;
            }
          }

          .btns-wrap {
            display: table;
            float: right;
            height: 90px;
            width: 130px;

            .btns {
              display: table-cell;
              vertical-align: middle;
              text-align: center;

              .btn {
                cursor: pointer;
                margin: 2px 0;
                width: 122px;
                height: 32px;
                padding: 0;
                border-radius: 16px;
                display: inline-block;
                text-align: center;
                line-height: 32px;
                color: #fff;

                &--normal {
                  &.disabled {
                    background: rgb(101, 164, 253);
                    border-color: rgb(101, 164, 253);
                  }
                }
              }
            }
          }
        }
      }
    }

    .pagination {
      padding: 30px 0;
      text-align: center;
    }
  }
}
</style>
