<template>
    <view class="container">
        <tui-skeleton v-if="isRequest" :loadingType="3" :isLoading="true"></tui-skeleton>
        <!-- 首页自定义导航栏 -->
        <view class="search-input sticky-top">
            <view class="search-content" @click="handleToSearch">
                <text class="iconfont icon-sousuo"></text>
                <view class="search-text">搜索商品</view>
            </view>
        </view>
        <!-- 轮播图 -->
        <cm-banner :list="bannerList" :current="current" @change="index => (current = index)"></cm-banner>

        <!-- 金刚区菜单 -->
        <cm-navbar></cm-navbar>

        <!-- 加入我们 -->
        <view class="grid"></view>
        <view class="join-us">
            <image :src="staticUrl + 'icon-join-us.png'" class="join-icon"></image>
            <view class="join-content">
                <view class="join-label-title">呵呵商城福利群</view>
                <view class="join-label-text">进群第一时间得知优惠福利！</view>
            </view>
            <view class="join-button" @click="handleJoinUs">加入我们</view>
        </view>
        <view class="grid"></view>

        <!-- 优惠券专区 -->
        <view class="coupon-area">
            <cm-floor-title title="优惠券专区"></cm-floor-title>
            <cm-coupon-area></cm-coupon-area>
        </view>

        <!-- 楼层区域 -->
        <cm-floor-template></cm-floor-template>
    </view>
</template>

<script>
import { fetchCarousel } from '@/services/api/common.js'
import { fetchProductFloorList } from '@/services/api/goods.js'
import { shareDataResult } from '@/common/share.helper.js'
import { mapActions, mapGetters } from 'vuex'
export default {
    data() {
        return {
            isRequest: true,
            bannerList: [],
            current: 0,
            isRefresh: false
        }
    },
    computed: {
        ...mapGetters(['userId'])
    },
    onPullDownRefresh() {
        setTimeout(() => uni.stopPullDownRefresh(), 2000)
    },
    onShareAppMessage() {
        const shareData = { type: 0, inviteUserId: this.userId }
        return shareDataResult(shareData)
    },
    onShow() {
        this.fetchCartKindCount()
    },
    onLoad() {
        this.initHomeInfo()
    },
    methods: {
        ...mapActions('cart', ['fetchCartKindCount']),
        // 搜索
        handleToSearch() {},
        // 初始化首页信息
        async initHomeInfo() {
            try {
                const resultCarousel = await fetchCarousel()
                const resultData = await fetchProductFloorList({ userId: this.userId })
                this.bannerList = resultCarousel.data
            } catch (e) {
                console.log(e)
            } finally {
                this.isRequest = false
            }
        },
        // 加入我们
        handleJoinUs() {
            this.$router.navigateTo('others/join-us')
        }
    }
}
</script>

<style lang="scss" scoped>
.grid {
    height: 24rpx;
    background-color: #f7f7f7;
}

.container {
    min-height: 100vh;
    background: url(https://static.caimei365.com/app/mini-hehe/icon/icon-index-bg.png) no-repeat top center;
    background-size: 750rpx auto;
    background-position-y: -220rpx;

    .search-input {
        width: 100%;
        padding: 24rpx;
        box-sizing: border-box;
        background: linear-gradient(180deg, #fa55bf 0%, #f8458b 100%);

        .search-content {
            @extend .cm-flex-center;
            justify-content: flex-start;
            width: 702rpx;
            height: 66rpx;
            border-radius: 33rpx;
            color: #8a8a8a;
            background: #fff;
            box-sizing: border-box;
            padding: 0 24rpx;
            .iconfont {
                font-size: 34rpx;
                margin-right: 12rpx;
            }
            .search-text {
                font-size: 24rpx;
            }
        }
    }

    // 加入我们
    .join-us {
        @extend .cm-flex-between;
        padding: 24rpx;
        background-color: #fff;

        .join-icon {
            width: 136rpx;
            height: 136rpx;
            display: block;
        }

        .join-content {
            @extend .cm-flex-center;
            flex-direction: column;
            align-items: flex-start;

            .join-label-title {
                font-size: 30rpx;
                font-weight: bold;
                color: #333333;
                margin-bottom: 24rpx;
            }
            .join-label-text {
                font-size: 24rpx;
                color: #333333;
            }
        }
        .join-button {
            width: 136rpx;
            height: 56rpx;

            text-align: center;
            line-height: 56rpx;
            font-size: 26rpx;
            font-weight: 400;
            color: #ffffff;

            background: #ff457b;
            border-radius: 8rpx;
        }
    }

    // 优惠券专区
    .coupon-area {
        padding-top: 24rpx;
    }
}
</style>
