<template>
    <view v-if="(cVdoList && cVdoList.length) || (cImgList && cImgList.length)" class="head-banner">
        <swiper
            :interval="3000"
            class="scroll"
            :autoplay="autoplay"
            :circular="cVdoList.length > 1 || cImgList.length > 1 ? true : false"
            :style="{height: bannerHeight + 'px'}"
            @change="swiperChange"
        >
            <template v-if="cVdoList && cVdoList.length">
                <swiper-item v-for="(video, vdoIndex) in cVdoList" :key="'video' + vdoIndex">
                    <view class="vdo-wrapper">
                        <druginfo-video
                            :id="'video' + vdoIndex"
                            :src="video.src"
                            :poster="video.imgUrl"
                            :autoplay="vdoIndex === 0 && videoAutoplay"
                            :direction="0"
                            :muted="videoMuted"
                            :enable-progress-gesture="false"
                            :own-style="{width: '100%', height: bannerHeight + 'px', display: 'block'}"
                            :initial-time="videoCurrentTime"
                            :controls="true"
                            :is-show-play-icon="!isInApp"
                            @play="videoPlay"
                            @pause="videoPause"
                            @ended="videoEnded"
                            @timeupdate="videoTimeUpdate"
                            @windowtap="onTap(item, 'video')"
                        />
                        <!-- 体检角标详情边框 -->
                        <view
                            v-if="actImg"
                            :style="{
                                backgroundImage: 'url(' + actImg + ')',
                                backgroundSize: 'contain',
                                width: bannerWidth + 'px',
                                height: bannerHeight + 'px',
                                position: 'absolute',
                                left: 0,
                                top: 0,
                            }"
                        />
                    </view>
                </swiper-item>
            </template>
            <template v-if="cImgList && cImgList.length">
                <swiper-item
                    v-for="(item, index) in cImgList"
                    :key="index"
                    class="info"
                    @tap="onTap(item, 'img')"
                >
                    <view
                        :id="'img' + index"
                        class="c-img-v"
                        :style="{
                            height: bannerHeight + 'px',
                            width: bannerWidth + 'px',
                            margin: 0
                        }"
                    >
                        <c-image
                            has-compress
                            :src="item"
                            width="100%"
                            height="100%"
                            :hack-white-stroke="false"
                            :is-round="false"
                        />
                    </view>
                    <!-- 体检角标详情边框 -->
                    <view
                        v-if="actImg"
                        :style="{
                            backgroundImage: 'url(' + actImg + ')',
                            backgroundSize: 'contain',
                            width: bannerWidth + 'px',
                            height: bannerHeight + 'px',
                            position: 'absolute',
                            left: 0,
                            top: 0,
                        }"
                    />
                </swiper-item>
            </template>
        </swiper>
        <!-- 页码 -->
        <view
            v-if="listLen > 1"
            class="page-num c-font-small"
            :style="{bottom: bottom + 'px'}"
        >
            <text class="page-num-current c-font-wb">{{ curIndex }}</text>
            <text>/{{ listLen }}</text>
        </view>

        <banner-view
            v-if="showView"
            :video-list="videoList"
            :img-list="imgList"
            :index="curIndex - 1"
            @change="swiperChange"
            @close="handleBannerViewerClose"
            @videoPlay="videoPlay"
            @videoPause="videoPause"
        />
    </view>
</template>

<script>
/* global getApp */
/**
 * @file 轮播
 * @author zhangqian51
 * @categories 业务组件
 * @tags [component]
 */
import BannerView from './banner-view';
import CImage from '@components/common/image';
import {getSystemInfo} from '@baidu/med-utils/lib/Mars/system';
import DruginfoVideo from '@components/gy/druginfo-video';
import {send} from '../../utils/log';
export default {
    config: {
        component: true
    },
    components: {
        BannerView,
        DruginfoVideo,
        CImage
    },
    props: {
        /**
         * @description banner数据
         * @type Array<Object>
         * @param {videoList: 轮播视频数据}
         * @param {imgList: 轮播图片数据}
         */
        videoList: {
            type: Array,
            default: () => []
        },
        /** 图片数据 */
        imgList: {
            type: Array,
            default: () => []
        },
        /** 左右间隔 */
        widthGap: {
            type: Number,
            default: 34
        },
        /** 底部间隔 */
        bottomDotGap: {
            type: Number,
            default: 12
        },
        /** 宽高比 */
        heightPercent: {
            type: Number,
            default: 125 / 207
        },
        /** 页签位置 */
        bottom: {
            type: Number,
            default: 21
        },
        /** 活动角标 */
        actImg: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            isIphoneX: false,
            isInApp: getApp().globalData.isInApp,
            bannerWidth: 0,
            bannerHeight: 0,
            showView: false,
            curIndex: 1,
            listLen: 0,
            cVdoList: [],
            cImgList: [],
            videoMuted: true,
            isWifi: false,
            videoAutoplay: false,
            videoPlaying: false,
            videoCurrentTime: 0
        };
    },
    created() {
        const systemInfo = getSystemInfo();
        if (systemInfo.model.search('iPhone X') !== -1 || systemInfo.model.search('iPhone 11') !== -1) {
            this.isIphoneX = true;
        }
        this.bannerWidth = systemInfo.screenWidth;
        this.bannerHeight = this.bannerWidth * this.heightPercent;
        let vLen = (this.videoList && this.videoList.length) || 0;
        let iLen = (this.videoList && this.imgList.length) || 0;
        this.listLen = vLen + iLen;
        this.cVdoList = this.videoList && this.videoList.slice(0);
        this.cImgList = this.imgList && this.imgList.slice(0);
        this.getAutoplay();
    },
    computed: {
        autoplay() {
            const {cVdoList} = this;
            return !cVdoList.length;
        }
    },
    watch: {
        imgList(newVal, val) {
            this.listLen = this.listLen - (val ? val.length : 0) + (newVal ? newVal.length : 0);
            if (Array.isArray(this.imgList)) {
                this.cImgList = this.imgList.slice(0);
            }
        },
        videoList(newVal, val) {
            this.listLen = this.listLen - (val ? val.length : 0) + (newVal ? newVal.length : 0);
            if (Array.isArray(this.videoList)) {
                this.cVdoList = this.videoList.slice(0);
            }
        },
        heightPercent(newVal, val) {
            if (newVal !== val) {
                this.bannerHeight = this.bannerWidth * newVal;
            }
        }
    },
    methods: {
        onTap(index, type) {
            if (this.videoList && this.videoList.length) {
                this.showView = true;
                this.cVdoList = this.videoList;
                this.cImgList = this.imgList;
            } else {
                let urls = this.imgList;
                this.$api.previewImage({
                    current: index,
                    urls: urls
                });
            }
        },
        swiperChange(e) {
            this.curIndex = e.detail.current + 1;
        },
        handleBannerViewerClose() {
            this.showView = false;
        },
        videoPlay() {
            send({
                type: 'b',
                action: 'videoPlay'
            });
        },
        videoPause() {
            send({
                type: 'b',
                action: 'videoPause'
            });
        },
        getAutoplay() {
            this.$api.getNetworkType({
                success: res => {
                    const isWifi = res && res.networkType === 'wifi';
                    this.isWifi = isWifi;
                    this.videoAutoplay = isWifi;
                    this.videoMuted = isWifi;
                }
            });
        },
        videoEnded() {
            this.videoPlaying = false;
            this.videoCurrentTime = 0;
            send({
                type: 'b',
                action: 'videoEnded'
            });
        },
        videoTimeUpdate(e) {
            this.videoCurrentTime = e && e.detail && e.detail.currentTime;
        }
    }
};
</script>
<style lang="less" scoped>
.head-banner {
    position: relative;
}

.page-num {
    position: absolute;
    bottom: 0.1rem;
    right: 0.1rem;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 14px;
    height: 28px;
    line-height: 28px;
    padding: 0 10px;
    color: #fff;
    font-size: 0.13rem;

    &-current {
        font-size: 0.15rem;
    }
}

.info {
    position: relative;
}

.c-img-v {
    position: absolute;
    top: 0;
    left: 0;
}
</style>
