<template>
    <view class="op-banner">
        <template v-if="data.length > 1">
            <swiper
                :duration="300"
                :circular="true"
                :interval="5000"
                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"
                    :class="bannerItemShowLogClass"
                    :data-extra="contentid"
                    :data-show="item.endTime"
                >
                    <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)"
                    />
                    <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"
            >
                <in-dicator
                    :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',
            }"
            :class="bannerItemShowLogClass"
            :data-extra="contentid"
            :data-show="data[0].endTime"
        >
            <image
                :src="data[0].imgUrlNew || data[0].imgUrl"
                class="c-img-v"
                :style="{
                    'border-radius': borderRadius,
                    height: bannerHeight + 'px',
                    width: bannerWidth + 'px',
                    margin: 0,
                }"
                @tap="onTap(data[0])"
            />
        </view>
    </view>
</template>

<script>
/**
 * @file 轮播图
 * @author chenshuo04
 * @categories
 * @tags
 */
/* eslint-disable */
import {navigate, navToBdBoxH5} from '../../../utils/navigate';
import indicator from '../../common/indicator';
import {send} from '../../../utils/log';
import {getSystemInfo} from '@baidu/med-utils/lib/Mars/system';
import * as core from '@utils/core';
import { ubcSend } from '@utils/log';
export default {
    config: {
        component: true
    },
    components: {
        InDicator: 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: '8px'
        },
        /**
         * 左右间隔
         */
        widthGap: {
            type: Number,
            default: 34
        },
        /**
         * 底部间隔
         */
        bottomDotGap: {
            type: Number,
            default: 12
        },
        /**
         * 高宽比
         */
        heightPercent: {
            type: Number,
            default: 1 / 3
        },
        /**
         * 隐藏圆点
         */
        hideDot: {
            type: Boolean,
            default: false
        },
        contentid: {
            type: String,
            default: '0'
        },
        bannerItemShowLogClass: {
            type: String,
            default: ''
        },
        /**
         * ubc dotValue
         */
        dotValue: {
            type: String,
            default: ''
        },
        currentPage: {
            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) {
            let { dotValue, contentid, currentPage } = this;
            contentid = contentid === '0' ? '' : contentid;
            if(dotValue) {
                ubcSend({
                    type: 'clk',
                    value: dotValue,
                    page: currentPage || '',
                    ext: {
                        value_id: contentid || '',
                        bannerName: data.name || ''
                    }
                });
            }
            if (data.jumpType || data.unifiUrl) {
                send({
                    type: 'b',
                    action: 'banner-jump-yd',
                    extra: {
                        type: data.name || 'banner'
                    }
                });
                switch (data.jumpType) {
                    case 'xcx':
                        this.$api.navigateToSmartProgram({
                            appKey: data.xcx.appKey,
                            path: data.xcx.url
                        });
                        break;
                    case 'h5Url':
                        if (data.duWord) {
                            this.$api.setClipboardData({
                                data: data.duWord,
                                complete: () => {
                                    window.location.href = data.jumpUrl;
                                }
                            });
                        } else {
                            window.location.href = data.jumpUrl;
                        }
                        break;
                    case 'tcUrl':
                        if (process.env.MARS_ENV === 'h5') {
                            window.location.href = data.jumpUrl;
                        } else if (process.env.MARS_ENV === 'swan') {
                            // 兼容直播间跳转
                            if (data.jumpUrl.indexOf('mbd.baidu.com') > -1 && data.jumpUrl.indexOf('room_id') > -1) {
                                navToBdBoxH5(data.jumpUrl, {
                                    module: 'live',
                                    action: 'enterRoom',
                                    parameters: {
                                        params: {
                                            roomId: core.getQueryObject(data.jumpUrl)['room_id'],
                                            source: {
                                                livesource: this.livesource
                                            }
                                        }
                                    }
                                });
                            }
                            // 兼容跳转糖尿病小程序
                            else if (data.jumpUrl.indexOf('/disease/template') > -1) {
                                this.$api.navigateToSmartProgram({
                                    appKey: '7z3zxAqQx2hQ3WBklIC8fnGOd631zZHm',
                                    path: '/pages/home/index'
                                });
                            } else {
                                navToBdBoxH5(data.jumpUrl, data);
                            }
                        }
                        break;
                    case 'unifiUrl':
                        navigate({url: data.jumpUrl});
                        break;
                    case 'unifiUrlxcx':
                        navigate({url: data.jumpUrl});
                        break;
                    default:
                        navigate({url: data.jumpUrl});
                        break;
                }
            }
        },
        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: 0.12rem;
}
.op-banner-indicator {
    position: absolute;
    left: 0;
    right: 0;
}
</style>
