<template>
  <div class="main-container">
    <div class="learn-choose">
      <van-cell title="选择已学课程：" :value="selectedItem.name" is-link @click="popupVisible = true" />
    </div>
    <!-- 已学课程 -->
    <template v-if="selectedItem.type === 1">
      <buy-course-list v-if="isVip" />
      <template v-else>
        <van-empty
          image="https://zws-imgs-pub.ezijing.com/transport/weapp/empty.png"
          description="快去开启课程学习，一起加油考证吧！"
          class="custom-empty"
        />
        <div class="fixed-box">
          <div class="fixed-inner">
            <div class="fixed-button" @click="toCourse">学更多课程</div>
          </div>
        </div>
      </template>
    </template>
    <!-- 试题课程 -->
    <free-course-list v-else />
    <van-popup
      v-model="popupVisible"
      position="bottom"
      :safe-area-inset-bottom="true"
      @open="popupOpen"
    >
      <ul class="popup-list">
        <li
          :class="item.selected ? 'is-active' : ''"
          v-for="item in chooseList"
          :key="item.type"
          @click="changeSelected(item)"
        >{{item.name}}</li>
      </ul>
      <div class="popup-buttons">
        <van-button type="primary" @click="popupVisible = false">取消</van-button>
        <van-button type="primary" @click="primaryChangeFilterType">确定</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import BuyCourseList from './components/buyCourseList.vue'
import FreeCourseList from './components/freeCourseList.vue'

export default {
  metaInfo: { title: '已学课程' },
  components: { BuyCourseList, FreeCourseList },
  data() {
    return {
      popupVisible: false,
      chooseList: [
        { type: 1, name: '课程学习', selected: true },
        { type: 2, name: '试听课程', selected: false }
      ],
      selectedItem: { type: 1, name: '课程学习' }
    }
  },
  computed: {
    isWeapp() {
      return this.$store.state.isWeapp
    },
    isVip() {
      return this.$store.state.isVip
    }
  },
  methods: {
    popupOpen() {
      this.changeSelected(this.selectedItem)
    },
    changeSelected(data) {
      this.chooseList = this.chooseList.map(item => {
        item.selected = item.type === data.type
        return item
      })
    },
    // 确定选择
    primaryChangeFilterType() {
      const found = this.chooseList.find(item => item.selected)
      this.selectedItem = found
      this.popupVisible = false
    },
    toCourse(data) {
      if (this.isWeapp) {
        const url = `/pages/web/index?src=${window.location.origin}/course/learn`
        wx.miniProgram.navigateTo({ url })
      } else {
        this.$router.push({ name: 'courseLearn' })
      }
    }
  },
  beforeMount() {
    // 检测是否是付费用户
    this.$store.dispatch('checkIsVip')
  }
}
</script>

<style lang="scss" scoped>
.learn-choose {
  border-bottom: 1px solid #f1f1f1;
}
::v-deep .van-cell {
  padding: 20px 0;
  font-size: 15px;
  font-weight: bold;
  color: #222;
  .van-cell__value {
    color: #222;
  }
  .van-cell__right-icon {
    color: #222;
  }
}
.popup-list {
  padding: 20px 0;
  li {
    padding: 20px 0;
    font-size: 15px;
    color: #000;
    line-height: 1;
    text-align: center;
    &.is-active {
      color: #c62245;
    }
  }
}
.popup-buttons {
  display: flex;
  padding: 10px 0;
  ::v-deep .van-button {
    flex: 1;
    height: 35px;
    margin: 0 20px;
    font-size: 15px;
    background-color: #c62245;
    border-radius: 6px;
    border: 0;
  }
}
</style>
