<template>
    <view class="op-banner">
        <template v-if="data.length > 1">
            <swiper
                :duration="300"
                :circular="true"
                :interval="3000"
                autoplay
                indicator-color="rgba(255,255,255,0.5)"
                indicator-active-color="#fff"
                :style="{
                    'border-radius': borderRadius,
                    height: bannerHeight + 'px', 
                    width: bannerWidth + 'px',
                }"
                @change="swiperChange"
            >
                <swiper-item
                    v-for="(item, index) in data"
                    :key="index"
                >
                    <view
                        v-if="item && item.imgUrl"
                        class="backgorund-img"
                        :style="{
                            backgroundImage: 'url(' + item.imgUrl + ')',
                            height: bannerHeight + 'px',
                            width: bannerWidth + 'px',
                            margin: 0,
                        }"
                        @tap="onTap(item, index)"
                    />
                    <!-- <image
                        :src="item.imgUrlNew || item.imgUrl"
                        class="c-img-v"
                        :style="{'border-radius': borderRadius, height: bannerHeight + 'px', width: bannerWidth + 'px', margin: 0}"
                        @tap="onTap(item, index)"
                    /> -->
                    <text v-if="item.data && item.data.num" class="op-banner-num">
                        {{ item.data.num }}
                    </text>
                </swiper-item>
            </swiper>
            <view
                v-if="!hideDot"
                :style="{
                    bottom: bottomDotGap + 'px',
                }"
                class="op-banner-indicator"
            >
                <indicator
                    :length="data.length"
                    :cur-index="swiperIndex"
                    :selected-color="'#fff'"
                    :color="'rgba(255,255,255,0.5)'"
                />
            </view>
        </template>
        <view
            v-else-if="data.length === 1"
            :style="{'border-radius': borderRadius, height: bannerHeight + 'px', width: bannerWidth + 'px', overflow: 'hidden'}"
        >
            <view
                v-if="data[0] && data[0].imgUrl"
                class="backgorund-img"
                :style="{
                    backgroundImage: 'url(' + data[0].imgUrl + ')',
                    height: bannerHeight + 'px',
                    width: bannerWidth + 'px',
                    margin: 0,
                }"
                @tap="onTap(data[0], 0)"
            />
        </view>
    </view>
</template>

<script>
/**
 * @file 双十一运营位轮播图
 * @author yinlejia
 */
import {navigate, navToBdBoxH5} from '@utils/navigate';
import Indicator from './Indicator';
import {getSystemInfo} from '@baidu/med-utils/lib/Mars/system';
import {ubcSend} from '@utils/log';

export default {
    config: {
        component: true
    },
    components: {
        Indicator
    },
    props: {
        /**
         * @description 活动运营banner数据
         * @type Array<Object>
         * @param {name: banner活动的名字}
         * @param {data: 业务相关}
         * @param {imgUrl: 图片链接}
         * @param {jumpType: xcx|h5Url|tcUrl|unifiUrl|sfUrl}
         * @param {xcx: appKey, url}
         * @param {h5Url: 只在H5出现，H5跳转到URL}
         * @param {tcUrl: 小程序和H5都会出现，小程序使用webview打开页面，H5跳转到URL}
         * @param {sfUrl: 小程序和H5都会出现，小程序跳转到内部已有未打平页面，H5跳转到URL}
         * @param {unifiUrl: 小程序和H5都会出现，小程序跳转到内部已有打平页面，H5跳转到URL}
        */
        data: {
            type: Array,
            required: true
        },
        // 圆角
        borderRadius: {
            'type': String,
            'default': '0.12rem'
        },
        // 左右间隔
        widthGap: {
            'type': Number,
            'default': 20
        },
        // 底部间隔
        bottomDotGap: {
            'type': Number,
            'default': 12
        },
        // 高宽比
        heightPercent: {
            'type': Number,
            'default': 1 / 3
        },
        // 隐藏圆点
        hideDot: {
            'type': Boolean,
            'default': false
        },
        // ubc日志必传字段page
        page: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            bannerWidth: 0,
            bannerHeight: 0,
            swiperIndex: 0
        };
    },
    created() {
        const systemInfo = getSystemInfo();
        this.bannerWidth = systemInfo.screenWidth - this.widthGap;
        this.bannerHeight = this.bannerWidth * this.heightPercent;
    },
    methods: {
        onTap(data, index) {
            if (data.xcx) {
                this.$api.navigateToSmartProgram({
                    appKey: data.xcx.appKey,
                    path: data.xcx.url
                });
            }
            else if (data.unifiUrl) {
                navigate({url: data.unifiUrl});
            }
            else if (data.tcUrl) {
                if (process.env.MARS_ENV === 'h5') {
                    window.location.href = data.tcUrl;
                }
                else if (process.env.MARS_ENV === 'swan') {
                    navToBdBoxH5(data.tcUrl, data);
                }
            }
            else if (data.url) {
                const isTab = ['/pages/brand/home/index', '/pages/brand/person/index', '/pages/gy/medstorehome/index'].some(item => data.url.indexOf(item) > -1);
                navigate({
                    url: data.url,
                    urlType: isTab ? 7 : 0
                });
            }
            ubcSend({
                page: this.page,
                type: 'clk',
                value: 'mall2eleven_prima_cjdp',
                ext: {
                    pd: 'act',
                    value_id: index + 1,
                    page_type: 'mall2eleven'
                }
            });
        },
        swiperChange(e) {
            this.swiperIndex = e.detail.current;
        }
    }
};
</script>
<style lang="less" scoped>
.op-banner {
    text-align: center;
    position: relative;
}
.op-banner-num {
    position: absolute;
    top: 71.7%;
    left: 59.9%;
    color: #ffea00;
    font-weight: 600;
    font-size: .12rem;
}
.op-banner-indicator {
    position: absolute;
    left: 0;
    right: 0;
}
.backgorund-img {
    background-position: 0 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
</style>

