<template>
    <view class="op-banner">
        <template v-if="data.length > 1">
            <!-- autoplay -->
            <swiper
                :duration="300"
                :circular="true"
                :interval="5000"
                indicator-color="rgba(255,255,255,0.5)"
                indicator-active-color="#fff"
                :style="{
                    height: bannerHeight + 'px',
                    width: bannerWidth,
                }"
                @change="swiperChange"
            >
                <block v-if="type === 'strong'">
                    <swiper-item
                        v-for="(item, index) in data"
                        :key="index"
                        class="swiper-wrap"
                    >
                        <live-card :live-item="item" @liveCardTrans="liveCardTap"/>
                    </swiper-item>
                </block>
                <block v-else>
                    <swiper-item
                        v-for="(item, index) in data"
                        :key="index"
                        class="swiper-wrap"
                    >
                        <view
                            v-for="(liveItem,liveIndex) in item"
                            :key="liveIndex"
                            class="video-line"
                        >
                            <video-calendar-one :live="liveItem" @liveListTap="liveListTap"/>
                        </view>
                    </swiper-item>
                </block>
            </swiper>
            <view
                v-if="!hideDot"
                :style="{
                    bottom: bottomDotGap + 'px',
                }"
                class="op-banner-indicator"
            >
                <indicator
                    :length="data.length"
                    :cur-index="swiperIndex"
                    :selected-color="'#00C8C8'"
                    :color="'#CCCCCC'"
                />
            </view>
        </template>
        <view
            v-else-if="data.length === 1"
            class="swiper-wrap"
            :style="{width: bannerWidth, overflow: 'hidden'}"
        >
            <live-card
                v-if="type === 'strong'"
                :live-item="data[0]"
                @liveCardTrans="liveCardTap"
            />
            <view v-else>
                <video-calendar-one
                    v-for="(liveItem,liveIndex) in data[0]"
                    :key="liveIndex"
                    :live="liveItem"
                    class="video-line"
                />
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @file 直播强卡弱卡轮播组件
 * @author yumingzhi
 */
import VideoCalendarOne from '../../../../components/speTopic/live/VideoCalendarOne';
import LiveCard from './LiveCard';
import indicator from '../drugs/indicator';
import {getSystemInfo} from '@baidu/med-utils/lib/Mars/system';

export default {
    config: {
        component: true
    },
    components: {
        'video-calendar-one': VideoCalendarOne,
        'live-card': LiveCard,
        indicator: indicator
    },
    props: {
        data: {
            type: Array,
            required: true
        },
        // 左右间隔
        widthGap: {
            type: Number,
            default: 34
        },
        // 底部间隔
        bottomDotGap: {
            type: Number,
            default: 12
        },
        // 隐藏圆点
        hideDot: {
            type: Boolean,
            default: false
        },
        bannerHeight: {
            type: Number,
            default: 105
        },
        type: {
            type: String,
            default: 'strong'
        },
        // 是否是pc iframe
        isIframe: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            bannerWidth: 0,
            swiperIndex: 0
        };
    },
    created() {
        // 兼容预览
        const systemInfo = getSystemInfo();
        if (this.isIframe) {
            this.bannerWidth = '100%';
        } else if (!systemInfo.system) {
            this.bannerWidth = '323px';
        } else {
            this.bannerWidth = systemInfo.screenWidth - this.widthGap + 'px';
        }
    },
    methods: {
        swiperChange(e) {
            this.swiperIndex = e.detail.current;
        },
        liveCardTap() {
            this.$emit('liveCardTap');
        },
        liveListTap() {
            this.$emit('liveListTap');
        }
    }
};
</script>
<style lang="less" scoped>
.op-banner {
    position: relative;
}
.swiper-wrap {
    padding: 17px;
    box-sizing: border-box;
    .video-line {
        margin-top: 15px;
        &:nth-child(1) {
            margin-top: 0;
        }
    }
}
.banner-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
}
.title {
    font-size: 17px;
    height: 44px;
}
.op-banner-indicator {
    position: absolute;
    left: 0;
    right: 0;
}
</style>
