<template>
    <view v-if="data.items && data.items.length" class="expert-wrap c-gap-inner-bottom c-gap-bottom-large">
        <view>
            <swiper
                v-if="data.items && data.items.length"
                :duration="300"
                circular
                :current="select"
                :style="{
                    width: '100%',
                    height: bannerHeight + 'px',
                    borderRadius: '8px 8px 0 0',
                }"
                @change="swiperChange"
            >
                <swiper-item
                    v-for="(item, index) in data.items"
                    :key="index"
                    use-trackby
                >
                    <template v-if="item.videoUrl">
                        <med-video
                            :id="'video-banner-' + index"
                            :video-data="{
                                url: item.videoUrl,
                                poster: item.poster,
                                title: item.title || 'HPV疫苗',
                                duration: item.duration || '0',
                            }"
                            :is-auto="false"
                            :height="bannerHeight + 'px'"
                            :has-gap="false"
                            :show-fullscreen-btn="false"
                            @play="play"
                        />
                    </template>
                    <view
                        v-else
                        class="pcr-video-banner-poster"
                        @tap.stop="onTap(item)"
                    >
                        <image
                            :src="item.poster"
                            :style="{
                                height: bannerHeight + 'px',
                                width: '100%',
                                borderRadius: '8px 8px 0 0',
                            }"
                            lazy-load
                        />
                    </view>
                </swiper-item>
            </swiper>
        </view>
        <scroll-view
            scroll-x
            class="m-scroll-card-scroll"
            scroll-with-animation
        >
            <view
                v-for="(tag, index) in data.items"
                :key="index"
                class="tag-item c-font-normal c-color c-inline-block c-gap-top"
                :class="select === index ? 'tag-select' : 'tag-normal'"
                @tap.stop="changeTag(tag, index)"
            >
                {{ tag.title }}
            </view>
        </scroll-view>
    </view>
</template>
<script>
/**
 * @author zhangqian51
 * @file  专家科普banner
 * @categories 专家科普
 * @tags [component]
 */
import MedVideo from '../common/video';
import {navigate, navToBdBoxH5} from '../../utils/navigate';
import * as Log from '../../utils/log';
export default {
    config: {
        component: true
    },
    components: {
        MedVideo
    },
    props: {
        // banner数据
        data: {
            type: Object,
            default: () => {
                return {};
            },
            required: true,
            borderRadius: '8px 8px 0 0'
        }
    },
    data() {
        return {
            select: 0,
            bannerWidth: 0,
            bannerHeight: 0
        };
    },
    watch: {
    },
    created() {
        const systemInfo = this.$api.getSystemInfoSync();
        this.bannerWidth = systemInfo.screenWidth - 34;
        this.bannerHeight = this.bannerWidth * 0.56;
    },
    methods: {
        changeTag(obj, index) {
            this.select = index;
        },
        swiperChange(e) {
            this.select = e.detail.current;
        },
        onTap(data) {
            const isSwan = process.env.MARS_ENV === 'swan';
            if (data.appkey) {
                Log.send({
                    type: 'b',
                    action: 'navigate',
                    extra: {
                        type: 'vacc-banner',
                        title: data.title
                    }
                });
                if (isSwan) {
                    this.$api.navigateToSmartProgram({
                        appKey: data.appkey,
                        path: data.path
                    });
                }
                else {
                    navToBdBoxH5(data.h5Url);
                }
            }
            else if (data.tcUrl) {
                Log.send({
                    type: 'b',
                    action: 'navigate',
                    extra: {
                        type: 'vacc-banner',
                        title: data.title
                    }
                });
                navToBdBoxH5(data.tcUrl);
            } else if (data.url || data.path) {
                navigate({
                    url: data.url || data.path,
                    extra: {
                        type: 'vacc-banner',
                        title: data.title
                    }
                });
            }
        },
        play() {}
    }
};
</script>
<style lang="less" scoped>
.m-scroll-card-scroll {
    white-space: nowrap;
    padding-left: 7px;
}

.expert-wrap {
    border-radius: 8px;
    background: #fff;
}

.tag {
    &-wrap {
        display: flex;
    }

    &-item {
        padding: 3px 10px;
        margin-left: 8px;
        border-radius: 16px;
    }

    &-select {
        color: #06cb9d;
        background-color: #eafbf7;
        position: relative;
    }

    &-normal {
        color: #555;
        background-color: #f6f6f6;
    }
}

.tag-select::after {
    content: '';
    display: block;
    position: absolute;
    top: -12px;
    left: 50%;
    margin-left: -6px;
    border: 6px solid transparent;
    border-bottom-color: #eafbf7;
}

.img {
    width: 100%;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
</style>
