<template>
    <view class="flow-list">
        <swiper
            class="flow-list__swiper"
            :autoplay="!isPlaying"
            @change="onSwiperChange"
        >
            <swiper-item
                v-for="(item, i) in list"
                :key="i"
                class="flow-list__swiper__item"
            >
                <med-video
                    :video-data="{
                        url: item.videoUrl,
                        poster: item.poster,
                        title: item.title || 'HPV疫苗',
                        duration: item.duration || '0',
                    }"
                    :is-auto="false"
                    :height="'50vw'"
                    :has-gap="false"
                    @play="onVideoPlay(item.id)"
                />
            </swiper-item>
        </swiper>
        <view class="c-gap-top-large">
            <indicator
                :length="list.length"
                :cur-index="selectIndex"
                :selected-color="'#00C8C8'"
                :color="'#E0E0E0'"
            /></view>
    </view>
</template>

<script>
import MedVideo from '@commonComponents/video';
import Indicator from '@commonComponents/indicator';
import {ubcSend} from '@utils/log';
/**
 * @file 健康检测采样流程列表
 * @author mayifan02
 * @categories 业务组件
 * @tags [component]
 */
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        MedVideo,
        Indicator
    },
    props: {
        /* 数据 */
        list: {
            type: Array,
            default: () => {
                return [];
            }
        },
        /** 日志 */
        log: {
            type: Object,
            default: () => {
                return {
                    page: '',
                    value: ''
                };
            }
        }
    },
    data() {
        return {
            selectIndex: 0,
            isPlaying: false
        };
    },
    methods: {
        onSwiperChange(e) {
            const index = e.detail.current;
            this.selectIndex = index;
        },
        onVideoPlay(id) {
            this.isPlaying = true;
            ubcSend({
                page: this.log.page,
                type: 'clk',
                value: this.log.value,
                ext: Object.assign({
                    pd: 'gene',
                    value_id: id
                }, this.log.ext || {})
            });
        }
    }
};
</script>

<style lang="less" scoped>
.flow-list {
    &__swiper {
        height: 50vw;
        &__item {

        }
    }
}
</style>
