<template>
  <!-- 我的课程 -->
  <el-card>
    <div class="myCourse">
      <div class="switch">
        <div class="switchDiv">
          <div class="list" :class="activeSwitch == index ? 'active' : ''" v-for="(item, index) in switchData" :key="item" @click="initSwitch(index)">
            {{ item }}
          </div>
        </div>
      </div>
      <el-row :gutter="20">
        <el-col :span="8" v-for="item in courseData" :key="item.name" @click="goToPage(item.url)">
          <div class="item" :style="{ background: item.bgColor }">
            <img :src="item.img" alt="" />
            <div>
              <div style="color: #050026;margin-left: 38px;margin-top:12px;font-size: 18px;">
                {{ item.name }}
              </div>
              <!--              <div class="pro">{{ item.pro }}</div>-->
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      switchData: ["我创建的", "我参与的"],
      activeSwitch: 0,
      courseData: [],
      wholeCourseData: [
        {
          name: "全景课堂",
          bgColor: "rgba(61, 115, 247, 0.1)",
          pro: "教师指同时具备教师资格和职业资格, 从事职业教育工作的教师",
          img: "/images/personal/course1.png",
          url: "course-ssys",
          join: true,
        },
        {
          name: "名师优课",
          bgColor: "rgba(253, 180, 4, 0.1)",
          pro: "网络视频直播的核心思想是利用既有的 局域网、城域网甚至是万维网……",
          img: "/images/personal/course2.png",
          url: "course-wlzb",
        },
        {
          name: "艺术现场",
          bgColor: "rgba(167, 94, 247, 0.1)",
          pro: "城域网甚至是万维网络条件实现对音 视频信号的实时传输",
          img: "/images/personal/course3.png",
          url: "course-ztzb",
        },
        {
          name: "协同备课（含个人备课）",
          bgColor: "rgba(246, 90, 90, 0.1)",
          pro: "针对个人独立备课而言的一种备课方式",
          img: "/images/personal/course4.png",
          url: "course-xtbk",
        },
        {
          name: "同步教研",
          bgColor: "rgba(93, 200, 168, 0.1)",
          pro: "要引导双方发现对方的优点进行学习",
          img: "/images/personal/course5.png",
          url: "course-tbjy",
        },
        {
          name: "课程资源",
          bgColor: "rgba(61, 115, 247, 0.1)",
          pro: "就是一切能够运用到教学活动中的各 种条件和材料",
          img: "/images/personal/course6.png",
          url: "course-kczy",
        },
        {
          name: "自主研学",
          bgColor: "rgba(167, 94, 247, 0.1)",
          pro: "城域网甚至是万维网络条件实现对音 视频信号的实时传输",
          img: "/images/personal/course7.png",
          url: "course-zxxx",
        },
      ],
    };
  },
  methods: {
    initSwitch(index) {
      this.activeSwitch = index;
      if (index == 0) {
        this.courseData = [...this.wholeCourseData];
      } else if (index == 1) {
        this.courseData = this.wholeCourseData.filter(item => item.join == true);
      }
    },
    goToPage(url) {
      this.$router.push({ name: url, query: { join: this.activeSwitch } });
    },
  },
  created() {
    this.initSwitch(this.activeSwitch);
  }
};
</script>

<style lang="scss" scoped>
.myCourse {
  min-height: 400px;
  .switch {
    display: inline-block;
    margin-bottom: 35px;
    border: 1px solid #dbe7ec;
    padding: 3px;
    border-radius: 12px;
    .switchDiv {
      display: flex;
      .list {
        cursor: pointer;
        color: #666;
        line-height: 36px;
        padding: 0 10px;
        &.active {
          background: #e8f3fa;
          color: #000;
          border-radius: 12px;
        }
      }
    }
  }
  .el-col {
    height: 115px;
    margin-bottom: 25px;
  }
  .item {
    border-radius: 8px;
    padding: 30px;
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    transition: all linear 0.1s;
    img {
      width: 50px;
      margin-right: 10px;
    }
    .pro {
      color: #9d9ab9;
      font-size: 14px;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      height: 42px;
    }
    &:hover {
      box-shadow: 0 0 5px 2px rgba($color: #699eed, $alpha: 0.5);
    }
  }
}
</style>