<template>
    <view style="width: 100%;height: 100%;" class="common_curriculum_list">
        <scroll-view scroll-y="true" class="scroll-Y" v-if="dataList.length > 0">
            <u-grid :col="col ? col : 1" style="overflow: hidden;justify-content:space-between">

                <u-grid-item :class="`scroll-view-item list_item content_item `"
                    v-for="(item, index) in dataList" :key="item.id" @click="gotoDetail(item)">

                    <image :src="defaultUrl ? defaultUrl : item[imgUrl]" :mode="imgMode?imgMode:'aspectFil'" class="book_image"></image>
                    <view :class="['titleItem', 'common_curriculum_item']">
                        <slot name="leftSlot" :row="item"></slot>

                        <template v-if="isCondition">
                            <slot name="labelSlot" :row="item"></slot>
                        </template>
                        <template v-else>
                            {{ item[label] }}
                        </template>

                        <slot name="rightSlot" :row="item"></slot>

                    </view>
                    <!-- <image src="@/static/icon/icon_right.png" class="rightArrow" style=""></image> -->
                </u-grid-item>


            </u-grid>
        </scroll-view>
        <u-divider v-else text="暂无数据哦~"></u-divider>
    </view>
</template>

<script>

import {
    mapState
} from 'vuex';
export default {
    props: ['dataList', 'label', 'isCondition', 'imgUrl','imgMode', 'className', 'col', 'defaultUrl', 'isScroll'],
    data() {
        return {

        }
    },
    onLoad() {


    },
    onHide() {
        // this.showSearchList = false
        // this.searchList = []
    },
    computed: {
        ...mapState(['userInfo']),
    },
    methods: {
        gotoDetail(v) {
            this.$emit('hancleClick', v)

        },
    },
    onBackPress() {
        // #ifdef APP-PLUS
        plus.key.hideSoftKeybord();
        // #endif
    },
    components: {

    },
}
</script>

<style lang="scss" scoped>
.list_item {
    width: 100%;
    // padding: 20rpx 30rpx;
    box-sizing: border-box;
    // border-bottom: 1rpx solid #e0e0e0;
    position: relative;
    justify-content: space-around;
}

.scroll-view-item:nth-child(2n-1) {
    // background-color: #f0f0f0 !important;
}

.rightArrow {
    width: 30rpx;
    height: 30rpx;
    position: absolute;
    right: 30rpx;
}

.scroll-Y {
    height: 100%;
}

.scroll-view_H {
    white-space: nowrap;
    width: 100%;
}

.scroll-view-item {
    // height: 300rpx;
    // line-height: 300rpx;
    // text-align: center;
    // font-size: 36rpx;
}

.scroll-view-item_H {
    display: inline-block;
    width: 100%;
    // height: 300rpx;
    // line-height: 300rpx;
    // text-align: center;
    // font-size: 36rpx;
}

.titleItem {
    width: 100%;
}



.common_curriculum_list {
    // width: 100%;
    // display: flex;
    // overflow: hidden;
    // height: auto;
    // padding: 24rpx 19rpx 5rpx;
    // box-sizing: border-box;

    .content_item {
        // float: left;
        display: inline-block;
        width: 49% !important;

        margin-bottom: 30rpx;
        overflow: hidden;


    }

    .book_image {

        width: 100% !important;
        height: 146rpx;
        border-radius: 10rpx;
        margin-bottom: 10rpx;
        // background-color: #919191;

    }

    .book_name {

        font-family: MicrosoftYaHei;
        font-weight: 400;
        font-size: 23rpx;
        color: #000000;
        line-height: 23rpx;
        text-align: left;
        margin-top: 14rpx;
    }

    .content_item:nth-child(2n) {
        // float: right !important;
    }
}

.common_curriculum_item {
    display: flex !important;
    align-items: center;
}
</style>