<template>
    <med-container
        title="我的订阅"
        bg-color="#F5F5F5"
    >
        <view class="subscription">
            <view v-if="attentionDoc && attentionDoc.length" class="subscription__reservedCard">
                <view class="c-flex between alignCenter">
                    <text class="c-font-big c-color-1f c-font-pinngfang">我关注的医生</text>
                </view>
                <view
                    class="subscription__reservedCard__cont"
                    :class="showLogClass"
                    data-show="subscribe-page-attentionDoc"
                    :data-extra="attentionDocLogExtra"
                >
                    <view v-if="attentionDoc && attentionDoc.length">
                        <scroll-view
                            :scroll-x="true"
                            :style="{height: '1.06rem'}"
                        >
                            <view class="c-flex alignCenter subscription__reservedCard__cont__wrap">
                                <view
                                    v-for="(item, index) in attentionDoc"
                                    :key="index"
                                    class="c-gap-right-middle c-inline-block subscription__reservedCard__cont__item"
                                    @tap="cardClick(item, index)"
                                >
                                    <view>
                                        <!-- 头像 -->
                                        <view class="c-gap-bottom-small subscription__reservedCard__cont__item__avatar">
                                            <c-avatar
                                                :size="40"
                                                :src="item.avatar"
                                                :border-mini="true"
                                            />
                                            <view v-if="item.status === 0" class="subscription__reservedCard__cont__item__avatar-live">
                                                <view class="subscription__reservedCard__cont__item__avatar-live-in"/>
                                                <view class="subscription__reservedCard__cont__item__avatar-live-out"/>
                                            </view>
                                            <view
                                                class="subscription__reservedCard__cont__item__avatar-live-in-text"
                                                :class="item.status === 0 ? '' : 'subscription__reservedCard__cont__item__avatar-live-in-text-reserved'"
                                            >
                                                <span class="subscription__reservedCard__cont__item__avatar-live-in-text-inner">
                                                    {{ item.status === 0 ? '直播中' : '可预约' }}
                                                </span>
                                            </view>
                                        </view>
                                        <view class="c-font-pinngfang c-tac">{{ item.name }}</view>
                                    </view>
                                </view>
                            </view>
                        </scroll-view>
                    </view>
                    <view v-else class="subscription__reservedCard__cont-empty c-color-b5">
                        <view class="c-tac">关注主播暂无直播</view>
                        <view class="c-tac">去看看其他医生直播吧～</view>
                    </view>
                </view>
            </view>
            <view class="subscription__reservedList">
                <view class="c-font-big c-font-pinngfang">我预约的直播</view>
                <view
                    v-if="reservedList && reservedList.length"
                    class="c-flex between wrap c-gap-top-14"
                >
                    <view
                        v-for="(item, index) in reservedList"
                        :key="index"
                        class="c-inline-block c-gap-bottom-middle"
                        :class="showLogClass"
                        :data-show="'subscrbie-page-feed-' + index"
                        :data-extra="item.extra"
                    >
                        <b-live-card
                            :live-card="item"
                            :log-index="index"
                            log-src="subscrbie-page-feed"
                        />
                    </view>
                </view>
                <view v-if="isEmpty" class="subscription__reservedList-empty">
                    <b-middle-page
                        :show-btn="false"
                        :image-sty="{
                            width: '1.28rem',
                            height: '1.01rem',
                        }"
                        :custom-sty="{
                            transform: '',
                            marginTop: '',
                        }"
                        text="还没有预约的直播，去直播首页预定吧"
                    />
                </view>
                <view v-if="isRequesting">
                    <c-loading type="list" bg-color="#f5f5f5"/>
                </view>
            </view>
        </view>
    </med-container>
</template>

<script>
/**
* @file 直播关注页
* @author shizhongwei02
*/
/* global getApp */
import MedContainer from '@commonComponents/container';
import BMiddlePage from '@commonComponents/MiddlePage';
import CAvatar from '@baidu/med-ui/components/Avatar/Avatar';
import BLiveCard from '@components/live/liveCard';
import CLoading from '@baidu/med-ui/components/Loading/Loading';
import {request} from '@utils/request';
import {navToBdBoxH5} from '@utils/navigate';
import {ubcSend, CollectLog} from '@utils/log';
import * as Conf from '@utils/conf';
import * as core from '@utils/core';
export default {
    components: {
        MedContainer,
        BMiddlePage,
        CAvatar,
        CLoading,
        BLiveCard
    },
    data() {
        return {
            attentionDoc:[],
            reservedList: [],

            cuid: getApp().globalData.cuid || '',
            pn: 0,

            hasMore: false,
            isRequesting: false,
            isLoading: false,
            isEmpty: false,


            // 日志相关
            attentionDocLogExtra: JSON.stringify({
                module: 'subscribe-page-attentionDoc'
            }),
            showLogClass: 'SHOW_LOG_MODULE_LIVE_INDEX' + core.rand(6)
        };
    },
    onReachBottom() {
        if (!this.isRequesting && this.hasMore) {
            this.getList();
        }
    },
    onLoad() {
        this.getPageInfo().then(() => {
            this.getList().then(() => {
                this.$mpUpdated(() => {
                    new CollectLog({
                        SIGN: this.showLogClass,
                        sendCallback: (item) => {
                            ubcSend({
                                type: 'view',
                                value: 'live-subscription',
                                ext:{
                                    pd:'live',
                                    item
                                }
                            });
                        }
                    });
                });
            });
        });
    },
    methods: {
        getPageInfo() {
            return new Promise((resolve, reject) => {
                request({
                    url: Conf.goJianKangApiHost + '/hbdlive/v1/home/user/subscribe/provider',
                    method: 'GET',
                    isFirstScreen: true,
                    isNeedLogin: false
                }).then(({data, update}) => {
                    this.attentionDoc = data.list.map((item, index) => {
                        item.extra = JSON.stringify({
                            order: index,
                            status: item.status,
                            roomId: item.room_id,
                            module: ''
                        });
                        return item;
                    }) || [];
                    resolve();
                    update.call(this, () => {});
                }).catch(() => {
                    reject();
                });
            });
        },
        getList() {
            return new Promise((resolve, reject) => {
                this.isRequesting = true;
                this.pn++;
                request({
                    url: Conf.goJianKangApiHost + '/hbdlive/v1/home/user/subscribe/live',
                    method: 'GET',
                    data: {
                        pageNum: this.pn,
                        pageSize: '10'
                    },
                    isFirstScreen: false,
                    isNeedLogin: false
                }).then(({data, update}) => {
                    if (data.list.length) {
                        this.hasMore = true;
                    } else {
                        this.hasMore = false;
                    }
                    
                    let __list = data.list.map((item, index) => {
                        item.extra = JSON.stringify({
                            order: index,
                            status: item.status,
                            roomId: item.roomId,
                            module: 'subscribe-page-reserved'
                        });
                        return item;
                    });

                    this.reservedList = this.reservedList.concat(__list);

                    if (!this.reservedList.length) {
                        this.isEmpty = true;
                    }

                    resolve();
                    update.call(this, () => {
                        this.isRequesting = false;
                    });
                });
            });
        },
        cardClick(info, index) {
            const isSwan = process.env.MARS_ENV === 'swan';
            navToBdBoxH5(info.h5Url, (info.status === 0 && isSwan) ? {
                module: 'live',
                action: 'enterRoom',
                parameters: {
                    params: {
                        roomId: info.room_id,
                        source: {
                            livesource: 'sbjkzbpd-xcx'
                        }
                    }
                }
            } : {
                module: 'browser',
                action: 'open',
                parameters: {
                    simple: '1'
                }
            });

            ubcSend({
                type: 'clk',
                value: 'live',
                ext: Object.assign({
                    pd: 'live',
                    value_type: 'subscrbie-page-mysubscribe',
                    roomId: info.room_id,
                    pos: index,
                    status: info.status
                })
            });
        }
    }
};
</script>

<style lang="less" scoped>
.subscription {
    &__reservedCard {
        padding: .16rem .17rem 0;
        background-color: #fff;
        &__cont {
            &__wrap {
                white-space: nowrap;
                height: 1.06rem;
            }
            &-empty {
                padding: .24rem 0 .38rem 0;
            }
            &__item {
                &__avatar {
                    width: .56rem;
                    height: .56rem;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    position: relative;
                    &-live {
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%, -50%);
                        width: .56rem;
                        height: .56rem;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        margin: 0 auto;
                        &-out {
                            position: absolute;
                            width: .44rem;
                            height: .44rem;
                            border-radius: 50%;
                            border: .0033rem solid rgba(255, 51, 51, 1);
                            animation: out 1.43s cubic-bezier(.42, 0, .58, 1) .165s infinite;
                        }
                        &-in {
                            width: .44rem;
                            height: .44rem;
                            border: .02rem solid rgba(255, 51, 51, 1);
                            border-radius: 50%;
                            z-index: 1;
                            &-text {
                                position: absolute;
                                left: 50%;
                                bottom: 0;
                                transform: translateX(-50%);
                                font-family: PingFangSC-Regular;
                                font-size: .1rem;
                                line-height: .1rem;
                                padding: 0.03rem 0.04rem .02rem;
                                // padding: .02rem .04rem;
                                background-color: #ff3333;
                                border: .01rem solid #fff;
                                border-radius: .228rem;
                                box-sizing: content-box;
                                color: #fff;
                                &-reserved {
                                    background-color: #00c8c8;
                                }
                                span {
                                    white-space: nowrap;
                                    display: inline-block;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    &__reservedList {
        padding: .26rem .1rem;
        background: #F5F5F5;
        &-empty {
            width: 100%;
            margin: 1.65rem 0;
        }
    }
}
.c-gap-top-14 {
    margin-top: .14rem;
}
.c-color-b5 {
    color: #B5B5B5;
}
.c-color-1f {
    color: #1F1F1F;
}
.c-font-pinngfang {
    font-family: PingFangSC-Medium;
}
.c-flex {
    display: flex;
    &.horizontalCenter {
        justify-content: center;
    }
    &.between {
        justify-content: space-between;
    }
    &.alignCenter {
        align-items: center;
    }
    &.wrap {
        flex-wrap: wrap;
    }
}
@keyframes out {
    10% {
        transform: scale(1);
        opacity: 1;
    }
    60% {
        transform: scale(1.15);
        opacity: .6;
    }
    70% {
        transform: scale(1.18);
        opacity: .2;
    }
    80% {
        transform: scale(1.2);
        opacity: 0.05;
    }
    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}
@keyframes img {
    0%{
        transform: scale(.9);
    }
    50% {
        transform: scale(.975);
    }
    100% {
        transform: scale(.9);
    }
}
</style>
