<template>
  <view class="p15">
    <view class="chapter_item" v-for="(item, index) of chapterList" :key="index" @tap="toDetail(item)">
      <view style="line-height: 20px;">
        <text class="j-tag" style="background: #DDEEFF;color: #1A8CFE">第{{ String(index+1).padStart(2,'0') }}讲·庄子</text>
        <text class="fs14 ml5 ">阴极阳转，阳转阴转，实现生命永恒的自然轮转</text>
      </view>
      <view class="mt10 flex ai-c jc-sb fs12 mt8 cor-999">
        <text>郭老师</text>
        <text>2020-01-01 19:00</text>
        <view class="flex ai-c">
          <u-icon name="eye" color="#999" size="14" :label="index*7" label-color="#999" label-size="12"></u-icon>
          <u-icon class="ml20" name="thumb-up" color="#999" size="14" :label="index*3" label-color="#999" label-size="12"></u-icon>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
	// import { getChapterDoneList } from '@/jtools/api/index'

	export default {
		data() {
			return {
				chapterList:[],
			}
		},
		onLoad(){
			this.getChapterList()
		},
		methods:{
			getChapterList(){
        this.chapterList = [1,2,3]
				// getChapterDoneList({driverTypeId}).then(resp=>{
				// 	if(resp.code==='0000'){
				// 		this.chapterList=resp.data
				// 	}
				// })
			},
			toDetail(chapter){
        uni.navigateTo({
          url: `/pages/course/detail?id=${chapter.id}`
        });
			},
		}
	}
</script>

<style lang="scss" scoped>
.chapter_item {
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
  background-color: #fff;
}
.chapter_item:hover {
  background-color: rgb(210, 209, 214);
}

.j-tag {
  // display: inline-flex;
  // align-items: center;
  // justify-content: center;
  padding: 1px 3px;
  // height: 16px;
  border-radius: 3px;
  font-size: 12px;
  line-height: 14px;
  color: #fff;
}
</style>
