<template>
    <scroll-view scroll-x="true" class="picture">
        <view class="section" v-for="(item, index) in floorImageList" @click="navigaitionTo(item)" :key="index">
            <image :src="item.appletsImage"></image>
            <view class="cm-cover" :class="'color' + checkDisplayDate">{{ coverText[checkDisplayDate] }}</view>
        </view>
    </scroll-view>
</template>

<script>
import caimeiApi from '@/common/config/caimeiApi.js'
export default {
    name: 'ScrollTemp',
    data() {
        return {
            coverText: ['未开始', '已开始', '已结束']
        }
    },
    props: {
        floorImageList: {
            type: Array
        },
        displayDate: String
    },
    computed: {
        checkDisplayDate() {
            const nowDate = new Date().getTime()
            const displayDate = new Date(this.displayDate.replace(/-/g, '/')).getTime()
            const oneDay = 60 * 60 * 24 * 1000
            // 未开始
            if (nowDate < displayDate && nowDate > displayDate - oneDay) {
                return 0
            }
            // 已开始
            if (nowDate > displayDate && nowDate < displayDate + oneDay) {
                return 1
            }
            // 已结束
            if (nowDate > displayDate + oneDay) {
                return 2
            }
        }
    },
    methods: {
        navigaitionTo(item) {
            if (item.adsImage === '' && item.linkType === -1) {
                return
            } else if (item.linkType === -1) {
                uni.navigateTo({
                    url: `/pages/h5/activity/activity-detail?adsImage=${item.adsImage}&title=${item.name}`
                })
            } else {
                caimeiApi.FlooryNavigateTo(item)
            }
        }
    }
}
</script>

<style lang="scss">
.picture {
    width: 750rpx;
    margin-left: -24rpx;
    white-space: nowrap;
    .section {
        position: relative;
        display: inline-block;
        margin-right: 24rpx;
        width: 310rpx;
        height: 240rpx;
        overflow: hidden;
        border-radius: 16rpx;
        image {
            width: 310rpx;
            height: 240rpx;
        }
        &:first-child {
            margin-left: 24rpx;
        }
        .cm-cover {
            position: absolute;
            width: 96rpx;
            height: 40rpx;
            top: 0;
            right: 0;
            border-radius: 0 16rpx 0 16rpx;
            color: #fff;
            font-size: 24rpx;
            text-align: center;
            line-height: 36rpx;
            &.color2 {
                background: rgba(0, 0, 0, 0.5);
            }
            &.color1 {
                background: rgb(255, 92, 0);
            }
            &.color0 {
                background: rgb(30, 206, 112);
            }
        }
    }
}
</style>
