<template>
    <view 
        v-if="data && data.length"
        class="video-list"
        :class="'layout-style' + layoutStyle"
    >
        <list-layout
            :list-data="data"
            :layout-num="data.length === 1 ? 1 : 2"
        >
            <template slot-scope="slotProps">
                <view class="video-list__item" @tap="onVideoItem(slotProps.item)">
                    <view class="video-list__item__header">
                        <!-- 直播封面 -->
                        <view class="video-list__item__header__cover">
                            <image
                                class="video-list__item__header__cover__img"
                                lazy-load
                                :src="slotProps.item.img"
                                mode="widthFix"
                            />
                        </view>
                        <!-- 直播封面内容 -->
                        <view v-if="layoutStyle !== 1">
                            <!-- 直播角标 -->
                            <view class="video-list__item__mark c-font-small">
                                <view class="video-list__item__mark__status">
                                    <!-- <text class="c-gap-right">icon</text> -->
                                    <template v-if="slotProps.item.status === 0">
                                        <view class="video-list__line-box">
                                            <view class="video-list__line video-list__line1"/>
                                            <view class="video-list__line video-list__line2"/>
                                            <view class="video-list__line video-list__line3"/>
                                        </view>
                                    </template>
                                    <template v-else>
                                        <text class="m-icon m-icon-yugao video-list__item__mark__icon"/>
                                    </template>
                                    <text class="c-gap-left-small">{{ slotProps.item.statusText }}</text>
                                </view>
                                <view class="video-list__item__mark__text">
                                    <text>{{ slotProps.item.date }}</text>
                                </view>
                            </view>
                            <!-- 直播提示 -->
                            <view v-if="slotProps.item.tipsText" class="video-list__item__tips c-font-13">
                                <view
                                    v-for="(text, index) in slotProps.item.tipsText"
                                    :key="index"
                                    class="video-list__item__tips__text"
                                >{{ text }}</view>
                            </view>
                            <!-- 直播icon -->
                        </view>
                    </view>
                    <view class="video-list__item__bottom c-gap-inner-top c-color-gray">
                        <view class="video-list__item__title c-font-normal c-line-clamp2">{{ slotProps.item.title }}</view>

                        <template v-if="layoutStyle === 1">
                            <view class="video-list__item__btn__wrap">
                                <c-button
                                    type="primary" 
                                    :primary-color="slotProps.item.status === 1 ? '#999' : '#FF0000'"
                                    :height="30" 
                                    :font-size="13" 
                                    font-weight="bold"
                                    border-radius="15px"
                                >{{ slotProps.item.statusText }}</c-button>
                            </view>
                        </template>
                        <template v-else>
                            <view v-if="slotProps.item.expertAvatar" class="video-list__item__source c-font-normal">
                                <image class="video-list__item__source__avatar" :src="slotProps.item.expertAvatar"/>
                                <view class="video-list__item__source__name">{{ slotProps.item.expertName }}</view>
                                <view class="video-list__item__source__leave">{{ slotProps.item.expertLevel }}</view>
                            </view>
                        </template>
                    </view>
                </view>
            </template>
        </list-layout>
    </view>
</template>

<script>
import ListLayout from '@components/act/common/ListLayout';
import CButton from '@baidu/med-ui/components/Button/Button';
import {navigate} from '@utils/navigate';
/**
 * @file 优惠券列表
 * @author mayifan02
 * @categories 业务组件
 * @tags [component]
 */
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        ListLayout,
        CButton
    },
    props: {
        /**
         * layout
         */
        layout: {
            type: Number,
            default: 2
        },

        /**
         * data
         */
        data: {
            type: Array,
            default: () => {
                return [];
            }
        },
        /**
         * 日志value前缀
         */
        logPrefix: {
            type: String,
            default: '618_prima'
        }
    },
    computed: {
        layoutStyle() {
            return this.data && this.data.length === 1 ? 1 : this.layout;
        }
    },
    methods: {
        onVideoItem(video) {
            if (!video.url) {
                return;
            }
            navigate({
                url: video.url,
                urlType: parseInt(video.status) !== -1 ? 4 : 2,
                log: {
                    type: 'clk',
                    value: `${this.logPrefix}_live`,
                    ext: {
                        pd: 'act',
                        value_id: video.room_id
                    }
                }
            });
        }
    }
};
</script>
<style lang="less" scoped>
@keyframes lineChange {
    0% {
        -webkit-transform: scaleY(0.3);
        transform: scaleY(0.3);
    }
    25% {
        -webkit-transform: scaleY(0.7);
        transform: scaleY(0.7);
    }
    50% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    100% {
        -webkit-transform: scaleY(0.3);
        transform: scaleY(0.3);
    }
}
.img-background {
    background-size: 100% 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
    position: relative;
}
.video-list {
    &__item {
        border-radius: 10px;
        overflow: hidden;
        background: #fff;
        position: relative;
        &__header {
            position: relative;
            &__cover {
                &__img {
                    width: 100%;
                    height: auto;
                    display: block;
                }
            }
        }
        &__title {
            color: #333;
            margin-bottom: 0;
        }
        &__bottom {
            padding: 10px;
            background-color: #f5f5f5
        }
        &__source {
            display: flex;
            align-items: center;
            padding-bottom: 13px;
            &__avatar {
                width: 17px;
                height: 17px;
                border-radius: 50%;
                margin-right: 7px;
            }
            &__name {
                margin-right: 7px;
            }
        }
        &__mark {
            position: absolute;
            left: 9px;
            top: 9px;
            display: flex;
            align-items: center;
            padding-right: 9px;
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 40px;
            color: #fff;
            &__status {
                background: #FF3333;
                border-radius: 40px;
                padding: 0 9px;
            }
            &__text {
                margin-left: 4px;
            }
            &__icon {
                font-size: 12px;
            }
        }
        &__tips {
            width: 58%;
            padding: 4px 0;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -17%);
            background-color: rgba(105, 105, 105, 0.63);
            border-radius: 300px;
            text-align: center;
            color: #fff;
            line-height: 18px;
        }
        &__btn {
            &__wrap {
                width: 80px;
                flex-shrink: 0;
                margin-left: 10.72vw;
            }
        }
    }
    &__line-box {
        position: relative;
        display: inline-block;
        width: 0.1rem;
        height: 0.07rem;
        bottom: 0.02rem;
    }
    &__line {
        position: absolute;
        top: 0;
        width: 0.02rem;
        height: 0.1rem;
        border-radius: 0.02rem;
        background-color: #fff;
        animation: lineChange 680ms linear infinite;
    }
    &__line1 {
        left: 0px;
        transform: scaleY(0.8);
        animation-delay: -340ms;
    }
    &__line2 {
        left: 4px;
        transform: scaleY(0.4);
        animation-delay: -170ms;
    }
    &__line3 {
        left: 8px;
        transform: scaleY(0.6);
    }
}
.layout-style1 {
    .video-list__item {
        &__bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #fff;
        }
        &__title {
            line-height: 17px;
        }
    }
}
</style>
