<template>
  <div class="main-container">
    <div class="learn-choose">
      <van-cell title="选择已学课程：" :value="selectedItem.name" is-link @click="popupVisible = true" />
    </div>
    <buy-course-list v-if="selectedItem.type === 1" />
    <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: '课程学习' }
    }
  },
  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
    }
  }
}
</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>
