<template>
    <view class="flex justify-between px-12 mt-21">
        <view class="w-170 h-265 relative px-11 rounded-8 overflow-hidden">
            <image class="w-all h-all absolute top-0 left-0 bg-white zi-1" src="https://cdn.his.cdwjyyh.com/images/zbgc_bg.png">
            </image>
            <view class="flex justify-between items-center h-20 relative zi-2 mt-13">
                <image class="w-64 h-15" src="https://cdn.his.cdwjyyh.com/images/live_square_title.png"></image>
                <view class="fs-12 fw-400 text-666666 flex items-center">
                    全部 <image class="w-12 h-12" src="https://cdn.his.cdwjyyh.com/images/zbgc_arrow_right_icon12.svg"></image>
                </view>

            </view>
            <HomePlay :swiperList="recommendList" :current="swiperCurrent"
                @change="swiperCurrent = $event" />
        </view>
        <view class="w-171 h-265 flex flex-column justify-between">
            <view class="w-all h-128 bg-white relative p-11 rounded-8 overflow-hidden">
                <image class="w-all h-all absolute top-0 left-0 zi-1" src="https://cdn.his.cdwjyyh.com/images/sdyhzq_bg.png">
                </image>
                <view class="relative zi-2">
                    <image class="w-95 h-18 " src="https://cdn.his.cdwjyyh.com/images/sdyhzq_title.png"></image>
                    <HomeDiscount  :swiperList="recommendList"  />
                </view>
            </view>
            <view class="w-all h-128 bg-white relative p-11 rounded-8 overflow-hidden">
                <image class="w-all h-all absolute top-0 left-0 " src="https://cdn.his.cdwjyyh.com/images/jrrm_bg@2x.png"></image>
                <view class="relative zi-2">
                    <image class="w-64 h-18 " src="https://cdn.his.cdwjyyh.com/images/jrrm_title.png"></image>
                    <HomeHot :swiperList="recommendList"/>
                </view>
            </view>
        </view>
    </view>

</template>
<script>
import HomePlay from './home-play.vue';
import HomeDiscount from './home-discount.vue'
import HomeHot from './home-hot.vue'
export default {
    components: {
        HomePlay,
        HomeDiscount,
        HomeHot,
    },
    props: {
        recommendList: {
            type: Array,
            default: () => []
        },
    },
    data() {
        return {
            swiperCurrent: 0,
        }
    },
    mounted() {
        console.log("首单-组件挂载时",this.recommendList);
    },
    watch: {
        recommendList: {
            immediate: true,
            handler(newVal) {
                console.log("首单-recommendList变化", newVal);
            }
        }
    }
}
</script>