<template>
    <view class="subscribe">
        <navigate
            :url="moreUrl"
        >
            <view class="c-flex between subscribe__navi">
                <text class="c-font-big c-fontfm-pingfang">我的订阅</text>
                <view v-if="moreUrl" class="c-color-b5">
                    <text class="subscribe__navi__text">查看更多</text>
                    <c-icon name="right"/>
                </view>
            </view>
        </navigate>
        <view>
            <scroll-view
                v-if="subscribeList && subscribeList.length && !isLoading"
                :scroll-x="true"
                class="subscribe__card"
                :style="{height: '1.31rem'}"
            >
                <view class="c-flex alignCenter subscribe__card__scroll">
                    <view
                        v-for="(item, index) in subscribeList"
                        :key="item.uid"
                        class="subscribe__card__item c-gap-right-middle c-inline-block"
                        @tap="cardClick(item, index)"
                    >
                        <view class="c-flex subscribe__card__item__avatar__wrap">
                            <!-- 头像 -->
                            <view class="c-gap-right subscribe__card__item__avatar">
                                <c-avatar
                                    :size="70"
                                    :src="item.avatar"
                                    :border-mini="true"
                                />
                                <view v-if="item.subProviderStatus === 1" class="c-color-gray subscribe__card__item__avatar__label">
                                    已关注
                                </view>
                            </view>
                            <view>
                                <view class="c-font-medium-less c-fontfm-pingfang c-line-clamp2 c-gap-bottom-0">{{ item.title }}</view>
                                <view>{{ item.name }}</view>
                            </view>
                        </view>
                        <view class="c-flex between alignCenter">
                            <text v-if="item.time" class="c-color-gray c-font-13">{{ item.time }}</text>
                            <view class="subscribe__card__item__btn">
                                <c-label
                                    v-if="item.status === '0'"
                                    label-type="live"
                                    :live-status="item.status"
                                    live-label-padding=".06rem .08rem"
                                    font-size="12"
                                />
                                <login-btn
                                    v-if="(item.subLiveStatus === 1 || item.subLiveStatus === 2) && item.status !== '0'"
                                    :disabled="isLogin"
                                    @onLoginSuccess="reserveLive(item, index)"
                                    @onTapEndH5="reserveLive(item, index)"
                                >
                                    <view
                                        :class="['c-inline-block',
                                                 'subscribe__card__item__btn__reserve',
                                                 item.subLiveStatus === 2 ? 'subscribe__card__item__btn-notReserved' : 'subscribe__card__item__btn-reserved']"
                                        @tap.stop="reserveLive(item, index)"
                                    >
                                        {{ item.subLiveStatus === 2 ? '预约' : '已预约' }}
                                    </view>
                                </login-btn>
                            </view>
                        </view>
                    </view>
                </view>
            </scroll-view>
            <view v-if="isLoading" class="c-flex subscribe__card-loading">
                <c-loading
                    status="loading"
                    type="list"
                    :status-txt="{loading: ''}"
                />
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @file 直播订阅组件
 * @author shizhongwei02
 * @categories 业务组件
 * @tags [component]
 */
import Navigate from '@commonComponents/navigate';
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import CAvatar from '@baidu/med-ui/components/Avatar/Avatar';
import CLabel from '@baidu/med-ui/components/Label/Label';
import CLoading from '@baidu/med-ui/components/Loading/Loading';
import LoginBtn from '@commonComponents/login-btn';
import {navToBdBoxH5} from '@utils/navigate';
import {request} from '@utils/request';
import {ubcSend} from '@utils/log';
import * as Conf from '@utils/conf';
// import {ubcSend} from '@baidu/med-utils/lib/ubc/index';
import {toLoginPage} from '@utils/login';
export default {
    config: {
        component: true
    },
    components: {
        Navigate,
        CIcon,
        CAvatar,
        CLabel,
        CLoading,
        LoginBtn
    },
    props: {
        moreUrl: {
            type: String,
            default: ''
        },
        list: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            subscribeList: [],
            isLogin: false
        };
    },
    watch: {
        list: {
            handler(val) {
                this.subscribeList = val;
            },
            immediate: true
        }
    },
    computed: {
        isLoading() {
            return this.subscribeList.length === 0;
        }
    },
    methods: {
        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.roomId,
                        source: {
                            livesource: 'sbjkzbpd-xcx'
                        }
                    }
                }
            } : {
                module: 'browser',
                action: 'open',
                parameters: {
                    simple: '1'
                }
            });

            ubcSend({
                type: 'clk',
                value: 'live',
                ext: Object.assign({
                    pd: 'live',
                    value_type: 'index-page-subscribe',
                    roomId: info.roomId,
                    pos: index,
                    status: info.status
                })
            });
        },
        reserveLive(btn, index) {
            const btnStatus = btn.subLiveStatus;
            request({
                url: Conf.goJianKangApiHost + (btnStatus === 2 ? '/hbdlive/v1/live/subscribe' : '/hbdlive/v1/live/unsubscribe'),
                method: 'GET',
                data: Object.assign({
                    roomId: btn.roomId,
                    cuid: this.cuid || ''
                }),
                isFirstScreen: false,
                isNeedLogin: false
            }).then(({data}) => {

                this.isLogin = data.isLogin;
                if (!this.isLogin) {
                    toLoginPage();
                    return;
                }

                this.$set(this.subscribeList[index], 'subLiveStatus', btnStatus === 1 ? 2 : 1);
                
                this.$api.showToast({
                    icon: 'none',
                    title: btnStatus === 2 ? '预约成功' : '取消预约成功'
                });
            });
        }
    }
};
</script>

<style lang="less" scoped>
.subscribe {
    padding: .14rem 0 .18rem .13rem;
    background: #FFFFFF;
    border-radius: .1rem;
    &__navi {
        padding-right: .13rem;
        margin-bottom: .14rem;
        &__text {
            margin-right: .01rem;
            margin-bottom: .01rem;
        }
    }
    &__card {
        &__scroll {
            width: fit-content;
            padding-right: .1rem;
        }
        &__item {
            position: relative;
            width: 2.33rem;
            padding: .12rem;
            border-radius: .10rem;
            flex-shrink: 0;
            &:after{
                content:" ";
                position:absolute;
                top: 0;
                left: 0;
                width: 200%;
                height: 200%;
                transform: scale(0.5);
                transform-origin: left top;
                box-sizing: border-box;
                border: .01rem solid #EEEEEE;
                border-radius: .2rem;
            }
            &__btn {
                min-width: .67rem;
                position: relative;
                z-index: 2;
                &__reserve {
                    width: 100%;
                    text-align: center;
                    box-sizing: border-box;
                    border-radius: .45rem;
                    font-size: .12rem;
                    line-height: .12rem;
                    padding: .06rem .09rem;
                }
                &-notReserved {
                    background-color: #00c8c8;
                    color: #fff;
                }
                &-reserved {
                    background-color: #F5F5F5;
                    color: #525252;
                }
            }
            &__avatar {
                position: relative;
                &__wrap {
                    margin-bottom: .09rem;
                }
                &__label {
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                    bottom: 0;
                    font-size: .1rem;
                    line-height: .1rem;
                    padding: .06rem .06rem .04rem .06rem;
                    background: #F5F5F5;    transform: translateX(-50%);
                    border: .01rem solid #FFFFFF;
                    border-radius: .9rem;
                    white-space: nowrap;
                }
            }
        }
        &-loading {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 1.27rem;
        }
    }
}
.c-flex {
    display: flex;
    &.between {
        justify-content: space-between;
    }
    &.alignCenter {
        align-items: center;
    }
}
.c-color-b5 {
    color: #B5B5B5;
}
.c-fontfm-pingfang {
    font-family: PingFangSC-Medium;
}
.c-gap-bottom-0 {
    margin-bottom: 0;
}
</style>
