<template>
    <view>
        <swiper
            :style="{
                height: 220 + imgHeight + 'px',
                overflowY: 'visible',
                width: (swiperWidth || screenWidth) + 'px',
                left: swiperWidth ? '-15px' : '0',
                right: swiperWidth ? '-16px' : '0',
            }"
            autoplay
            :duration="300"
            :interval="5000"
            :current="currentIndex"
            :previous-margin="previousMargin"
            :next-margin="nextMargin"
            @change="onPageChange"
        >
            <swiper-item
                v-for="(lives, index) in columnList"
                :key="index"
                :style="{
                    overflow: 'visible',
                }"
            >
                <view
                    class="spe-swiper-item"
                    :style="{
                        height: 207 + imgHeight + 'px',
                        margin: swiperWidth ? '0' : '0 4px',
                        boxShadow: isShadow ? '0 3.3px 17.3px 0 rgba(0,0,0,.08)' : '',
                    }"
                >
                    <view
                        :style="{
                            height: imgHeight + 'px'
                        }"
                        class="spe-swiper-bg"
                        @tap="toLink(
                            lives.banner.unifiUrl,
                            lives.banner.outLink,
                            false,
                            {
                                'module': page + '_swiper_banner','topicid': lives.banner.topic_id,
                                'bannerindex': index
                            }
                        )"
                    >
                        <view class="spe-swiper-banner-bg">
                            <c-image
                                has-compress
                                :src="lives.banner.img"
                                width="100%"
                                height="100%"
                                :hack-white-stroke="false"
                                :is-round="false"
                                radius="0.1rem 0.1rem 0 0"
                            />
                        </view>
                        <view class="spe-swiper-banner-cont">
                            <view
                                class="spe-swiper-banner-title c-line-clamp2"
                                :style="{
                                    width: bannerTextWidth,
                                }"
                            >{{ lives.banner.title }}</view>
                            <view
                                class="spe-swiper-banner-text"
                                :style="{width: bannerTextWidth}"
                            >
                                <text v-if="lives.banner.period"> {{ lives.banner.period }}</text>
                                <text
                                    v-if="lives.banner.period && lives.banner.update"
                                    :style="{margin: '0 .1rem'}"
                                >|</text>
                                <text v-if="lives.banner.update"> {{ lives.banner.update }}</text>
                            </view>
                        </view>
                    </view>
                    <!-- eslint-disable max-len -->
                    <view
                        v-for="(live, liveIndex) in lives.list"
                        :key="liveIndex"
                        @tap="toLink(live.ori_url,live.outLink,live.status !== -1,{'module': page + '_swiper_item','topicid': lives.banner.topic_id, 'bannerindex': index, 'liveindex': liveIndex})"
                    >
                        <view
                            v-if="liveIndex < 3"
                            :class="{'c-line-bottom': liveIndex < 2}"
                            class="spe-swiper-list"
                            :style="{background: isShadow ? '#FFFFFF' : '#FAFAFA'}"
                        >
                            <view
                                :class="[live.status === 0 ? 'red' : 'gray']"
                                class="spe-swiper-list-status"
                            >
                                <view
                                    :class="live.status === 0 ? 'm-icon-shipin shipin' : (live.status === 1 ? 'm-icon-huifang huifang' : 'm-icon-yugao yugao')"
                                    class="m-icon icon"
                                />
                                <view
                                    :class="live.status === 0 ? 'shipin' : (live.status === 1 ? 'huifang' : 'yugao')"
                                    class="c-font-small txt"
                                >{{ live.statusText }}</view>
                            </view>
                            <view
                                :style="{
                                    width: live.date && live.date.length > 5 ? '70px' : '59px',
                                }"
                                class="spe-swiper-list-time"
                            >
                                <view>{{ live.time }}</view>
                                <view>{{ live.date }}</view>
                            </view>
                            <view class="spe-swiper-list-info">
                                <view class="spe-swiper-list-info-title c-line-clamp2">
                                    {{ live.title }}
                                </view>
                            </view>
                        </view>
                    </view>
                    <!-- eslint-enable max-len -->
                </view>
            </swiper-item>
        </swiper>
        <view :style="{top: '0px', position: 'relative', height: '8px'}">
            <dot
                :length="columnList.length"
                :cur-index="currentIndex"
                :selected-color="'#00C8C8'"
                :color="'#ccc'"
            />
        </view>
    </view>
</template>

<script>
/**
 * @file 视频swiper
 * @author lixue25
 * @categories 组件
 * @tags [component]
*/
import {send} from '../../../utils/log';
import {navigate, navToBdBoxH5} from '../../../utils/navigate';
import * as core from '../../../utils/core';
import {getSystemInfo} from '@baidu/med-utils/lib/Mars/system';
import CImage from '@components/common/image';
import Dot from '../../common/indicator';

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    props: {
        /**
         * 数据列表
         */
        columnList: {
            type: Array,
            default: () => []
        },
        /**
         * 类型
         */
        page: {
            type: String,
            default: 'live'
        },
        /**
         * 直播来源
         */
        livesource: {
            type: String,
            default: 'jiankang'
        },
        /**
         * 视图宽度
         */
        swiperWidth: {
            type: Number,
            default: 0
        },
        /**
         * 是否有阴影
         */
        isShadow: {
            type: Boolean,
            default: true
        },
        /**
         * swiper左外边距
         */
        previousMargin: {
            type: String,
            default: '13px'
        },
        /**
         * swiper右外边距
         */
        nextMargin: {
            type: String,
            default: '13px'
        },
        /**
         * swiper右外边距
         */
        bannerTextWidth: {
            type: String,
            default: '60%'
        }
    },
    data() {
        return {
            imgHeight: 0,
            screenWidth: 0,
            currentIndex: 0
        };
    },
    created() {
        const systemInfoSync = getSystemInfo();
        this.screenWidth = systemInfoSync.screenWidth;
        /* eslint-disable */
        this.imgHeight = this.swiperWidth ? ((this.swiperWidth - 32) * 0.25) : ((systemInfoSync.screenWidth - 34) * 0.25);
        /* eslint-enable */
    },
    methods: {
        onPageChange(e) {
            this.currentIndex = e.detail.current;
        },
        toLink(oriUrl = '', outLink = '', isNaLink = false, extra = {}) {
            if (oriUrl) {
                if (process.env.MARS_ENV === 'h5') {
                    window.location.href = oriUrl;
                } else {
                    navigate({
                        url: oriUrl,
                        extra: JSON.stringify(extra)
                    });
                }
            } else if (outLink) {
                navToBdBoxH5(outLink, isNaLink ? {
                    module: 'live',
                    action: 'enterRoom',
                    parameters: {
                        params: {
                            roomId: core.getQueryObject(outLink).room_id,
                            source: {
                                livesource: this.livesource
                            }
                        }
                    }
                } : {
                    module: 'browser',
                    action: 'open',
                    parameters: {
                        simple: '1'
                    }
                });
            }
            send({
                type: 'l',
                action: 'click',
                extra: Object.assign({
                    // ref: this.from
                }, extra)
            });
        }
    },
    components: {
        Dot,
        CImage
    }
};
</script>

<style lang="less" scoped>
.shipin {
    color: #fa463f;
}

.huifang {
    color: #999;
}

.yugao {
    color: #00c8c8;
}

.txt {
    display: inline-block;
    font-family: PingFang-SC-Medium;
    font-size: .12rem;
    letter-spacing: 0;
    line-height: .12rem;
}

.spe-swiper {
    font-family: PingFang-SC-Regular;

    &-item {
        background: #fff;
        border-radius: 10px;
        width: calc(100% - 8px);
        position: relative;
        overflow: hidden;
    }

    &-bg {
        position: relative;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        background-size: cover;
        padding: 0rem .15rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    &-banner {
        &-title {
            margin-bottom: .10rem;
            // padding-top: .10rem;
            font-family: PingFang-SC-Medium;
            font-size: .18rem;
            color: #fff;
            letter-spacing: 0;
            line-height: .23rem;
        }

        &-text {
            font-family: PingFang-SC-Regular;
            font-size: .13rem;
            color: rgba(255, 255, 255, 0.80);
            letter-spacing: 0;
            line-height: .14rem;
        }

        &-bg {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }

        &-cont {
            position: relative;
            z-index: 5;
        }
    }

    &-list {
        display: flex;
        justify-content: flex-start;
        align-items: stretch;
        color: #333;
        font-size: .13rem;
        line-height: 18px;

        &-status {
            flex: none;
            white-space: nowrap;
            padding-top: 9px;
            padding-bottom: 9px;
            width: 60px;
            text-align: center;
            font-size: .1rem;
            color: #00c8c8;
            letter-spacing: 0;
            line-height: 12px;

            &.red {
                color: #f86b62;
            }

            &.gray {
                color: #00c8c8;
            }

            .icon {
                font-size: 18px;
                line-height: 26px;
                padding-top: 1px;
            }

            .txt {
                line-height: 1;
                padding-top: 3px;
            }
        }

        &-time {
            flex: none;
            white-space: nowrap;
            margin-top: 15px;
            margin-bottom: 15px;
            // padding: 0 4px;
            border-left: 1px solid #f6f6f6;
            border-right: 1px solid #f6f6f6;
            margin-right: 10px;
            width: 59px;
            text-align: center;
        }

        &-info {
            flex: 1;
            padding-top: 9px;
            padding-bottom: 9px;
            padding-right: .15rem;
            font-size: 14px;
            color: #333;
            letter-spacing: 0;
            line-height: 21px;

            &-title {
                margin: 0.03rem 0 0 0;
                font-family: PingFang-SC-Regular;
                font-size: 14px;
                color: #333;
                letter-spacing: 0;
            }
        }
    }
}
</style>
