<template>
    <div class="newClass">
        <div :style="{'text-align': direction}" class="hotTagTitle">{{resourceData.title}}</div>
        <mt-swipe :show-indicators="false" :auto="0">
            <mt-swipe-item>
                <img class="newClassImg" v-lazy="resourceData.item[0].img"/>
                <div class="fs32">{{resourceData.item[0].title}}</div>
                <div class="space-between">
                    <div>
                        <span class="gray fs24">{{resourceData.item[0].time}}</span>
                        <span class="gray fs24">|</span>
                        <span class="gray fs24">{{resourceData.item[0].peopleCount}}人已学</span>
                    </div>
                    <div @click="collect(0)" v-if="!resourceData.item[0].isCollect" class="fs22 collect">收藏</div>
                    <div @click="collect(0)" v-else class="fs22 collect">已收藏</div>
                </div>
            </mt-swipe-item>
            <mt-swipe-item v-if="resourceData.item[1]">
                <img class="newClassImg" v-lazy="resourceData.item[1].img"/>
                <div class="fs32">{{resourceData.item[1].title}}</div>
                <div class="space-between">
                    <div>
                        <span class="gray fs24">{{resourceData.item[1].time}}</span>
                        <span class="gray fs24">|</span>
                        <span class="gray fs24">{{resourceData.item[1].peopleCount}}人已学</span>
                    </div>
                    <div @click="collect(1)" v-if="!resourceData.item[1].isCollect" class="fs22 collect">收藏</div>
                    <div @click="collect(1)" v-else class="fs22 collect">已收藏</div>
                </div>
            </mt-swipe-item>
            <mt-swipe-item v-if="resourceData.item[2]">
                <img class="newClassImg" v-lazy="resourceData.item[2].img"/>
                <div class="fs32">{{resourceData.item[2].title}}</div>
                <div class="space-between">
                    <div>
                        <span class="gray fs24">{{resourceData.item[2].time}}</span>
                        <span class="gray fs24">|</span>
                        <span class="gray fs24">{{resourceData.item[2].peopleCount}}人已学</span>
                    </div>
                    <div @click="collect(2)" v-if="!resourceData.item[2].isCollect" class="fs22 collect">收藏</div>
                    <div @click="collect(2)" v-else class="fs22 collect">已收藏</div>
                </div>
            </mt-swipe-item>
        </mt-swipe>
    </div>
</template>

<script>
import { Swipe, SwipeItem } from 'mint-ui';
export default {
  name: 'YqyNewClass',
  components: {
  },
  watch: {
  },
  props: {
    resourceData: {
        type: Object,
        default:()=>{
            return {
                title: '新课上线',
                item: [
                    {
                        img: '',
                        title: '1',
                        time: '刚刚',
                        peopleCount: 9,
                        isCollect: false
                    },
                    {
                        img: '',
                        title: '1',
                        time: '刚刚',
                        peopleCount: 9,
                        isCollect: false
                    },
                    {
                        img: '',
                        title: '1',
                        time: '刚刚',
                        peopleCount: 9,
                        isCollect: false
                    }
                ]
            }
        }
    },
    direction: {
        type: String,
        default: 'left'
    }
    },
  data () {
    return {
    }
  },
  mounted(){
  },
  methods: {
      collect(val){ 
          this.resourceData.item[val].isCollect = !this.resourceData.item[val].isCollect;
          console.log('collect',this.resourceData.item[val].isCollect,val);
          this.$emit('collect',this.resourceData.item[val].isCollect, val)
      }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
.newClass{
    width: 100%;
    height: px2rem(320px);
    background-color: #fff;
    padding: px2rem(15px) px2rem(15px) px2rem(26px);
    margin-bottom: px2rem(6px);
}
.collect{
    height: px2rem(18px);
    background-color: RGBA(247, 248, 249, 1);
    line-height: px2rem(18px);
    color: RGBA(102, 102, 102, 1);
    padding: 0 px2rem(4px);
}
.newClassImg{
    width: px2rem(345px);
    height: px2rem(191px);
}
.hotTagTitle{
    font-size: px2rem(18px);
    font-weight: bold;
    margin-bottom: px2rem(15px);
}
.hotTagItem{
    margin: px2rem(10px) px2rem(15px) 0 0;
    display: inline-block;
    .itemName{
        background-color: RGBA(244, 247, 255, 1);
        color: RGBA(121, 148, 237, 1);
        padding: px2rem(2px) px2rem(6px);
        font-size: px2rem(13pt);
    }
}
</style>
