<template>
    <med-container hide-header>
        <b-top-bar
            :title="pageTitle"
            :bar-class="barClass"
            :text-color="barClass === 'white' ? '#000' : '#fff'"
            :blank="false"
            :icon="iconImg"
            :url="homeUrl"
            :hide-home="isOppoWebview"
            :hide-back="isOppoWebview"
            @topbarHeightHandle="topbarHeightHandle"
        />
        <!-- 推荐区域 -->
        <view
            v-if="title"
            class="spe-project-header"
            :style="{
                background: backColor || '',
                paddingTop: topHeight + 10 + 'px',

            }"
        >
            <view class="spe-project-header-content">
                <view class="spe-project-header-content-bg">
                    <view v-if="title" class="spe-project-header-content-bg-title">{{ title }}</view>
                    <view
                        class="spe-project-header-content-bg-slogan"
                        :style="{padding: slogan.tag_status ? '.10rem 0 .15rem 0' : '0 0 .15rem'}"
                    >
                        <text v-if="slogan.period">共{{ slogan.period }}期</text>
                    </view>
                    <!-- <view v-if="logo" class="spe-project-header-content-bg-img" :style="{'top': env === 'swan' ? '.48rem' : '0'}">
                        <view v-for="(item, index) in logo" :key="index" :style="{display: 'inline-block'}">
                            <image
                                :src="item.img"
                                class="spe-project-header-content-bg-logo"
                                :style="{
                                    width: item.width,
                                    height: '46px'
                                }"
                                @load="imgLoad($event, index)">
                        </view>
                    </view> -->
                </view>
                <view v-if="textArr.length !== 0 || headerMoreUrl || headerOutLink || headerBanner.length !== 0">
                    <view class="spe-project-header-content-card">
                        <view @tap="toLink(headerMoreUrl, headerOutLink)">
                            <view
                                v-if="textArr"
                                class="spe-project-header-content-card-text c-gap-top-large"
                                :class="[headerMoreUrl || headerOutLink ? '' : 'c-gap-bottom-large']"
                            >
                                <view
                                    v-for="(text, index) in textArr"
                                    :key="index"
                                    class="c-line-clamp1"
                                >
                                    <!-- <view class="spe-project-header-content-card-point"> · </view> -->
                                    <text class="spe-project-icon-point"/>
                                    {{ text }}
                                </view>
                            </view>
                            <view
                                v-if="headerMoreUrl || headerOutLink"
                                class="c-gap-bottom-large c-gap-inner-bottom-small"
                            >
                                <show-more
                                    :icon-color="themeColor"
                                    :url="headerMoreUrl"
                                    :out-link="headerOutLink"
                                    module="live_project_showmore"
                                />
                            </view>
                        </view>
                        <view v-if="headerBanner" class="c-gap-bottom-large">
                            <op-banner :data="headerBanner" :height-percent="1 / 4.75"/>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view v-else :style="{'padding-top': topHeight + 'px', background: backColor}"/>
        <view
            v-if="
                tabs.length > 1 && (textArr.length !== 0 || headerMoreUrl || headerOutLink || headerBanner.length !== 0)
            "
            class="spe-project-separated"
        />
        <view>
            <view
                v-if="tabs.length > 1"
                :style="{
                    top: topHeight + 'px',
                }"
                :class="{
                    'spe-project-tabs-fixed': tabsConf.tabsFixed,
                }"
            >
                <!-- 一级导航 -->
                <c-navs
                    id="tabsContent"
                    :options="tabs"
                    :selected-index="selected"
                    :selected-color="themeColor"
                    selected-font-weight="bold"
                    :border-bottom="true"
                    color="#555555"
                    @itemtap="tabChange"
                />
            </view>
            <!-- 降级一级标题 -->
            <view
                v-for="(tab, i) in tabs"
                v-else
                :key="i"
                class="project-title c-font-big"
            >{{ tab.text }}</view>

            <view
                v-if="tabsConf.tabsFixed"
                :style="{
                    width: '100%',
                    height: (tabs.length > 1 ? 42 : 0) + (statusTags.length > 1 ? 53 : 0) + 'px',
                }"
            />
            <view
                id="recommendContainer"
                :style="{
                    height: feedContaninerHeight + 'px',
                    minHeight: containerMinHeight + 'px',
                }"
            >
                <view id="feedContainer">
                    <view v-if="recommends && recommends.length">
                        <view v-if="selected == '0'">
                            <directory
                                :directories="recommends"
                                :style="{marginTop: statusTags.length > 1 ? '-10px' : '15px', display: 'block'}"
                                :is-baijiahao="isBaijiahao"
                                :theme-color="themeColor"
                                mod="live_project_directory"
                                livesource="sbjkzty-xcx"
                                @liveItem="liveItem"
                            />
                        </view>
                        <view v-if="selected == '1'">
                            <recommend-item
                                v-for="(article, index) in recommends"
                                :key="index"
                                :top-line="false"
                                :bottom-line="index < recommends.length - 1"
                                :title="article.title || ''"
                                :doctor="{
                                    name: article.doctor || '',
                                    rank: article.information || '',
                                    label: article.hospi_level || '',
                                    hospital: article.hospital || '',
                                    image: article.portrait || '',
                                }"
                                :image="article.imageUrl"
                                :url="article.ori_url || ''"
                                :out-link="article.outLink"
                                module="live_project_recommend"
                            />
                        </view>
                        <list-loading v-show="loadStatus === 'loading'" :status="loadStatus"/>
                        <view
                            v-show="noMore"
                            class="spe-project-nomore"
                            :class="{
                                'c-gap-top-large': recommends && recommends.length === 0,
                            }"
                        >没有更多内容了</view>
                        <view class="swan-security-padding-bottom"/>
                    </view>
                </view>
            </view>
        </view></med-container>
</template>

<script>
/**
 * @file 直播聚合页
 * @author lixue25
 */
import * as conf from '../../../utils/conf';
import * as core from '../../../utils/core';
import {request} from '../../../utils/request';
import {send} from '../../../utils/log';
import Container from '../../../components/common/container';
// import CButton from '@baidu/med-ui/components/Button/Button';
// import CIcon from '@baidu/med-ui/components/Icon/Icon';
import TopBar from '../../../components/common/topbar';
import ShowMore from '../../../components/speTopic/ShowMore';
import OpBanner from '@baidu/med-ui/components/Swiper/Swiper';
import Navs from '@baidu/med-ui/components/Navs/Navs';
import RecommendItem from '../../../components/speTopic/Recommend/RecommendItem';
import Directory from '../../../components/speTopic/live/Directory';
import ListLoading from '../../../components/common/list-loading';
import {navigate, navToBdBoxH5} from '../../../utils/navigate';
import share from '../../../utils/share';
import {getSystemInfo} from '@baidu/med-utils/lib/Mars/system';
import {COOKIE_KEY} from '@utils/constant';
import cookie from '@utils/cookie';
import { ubcSend } from '@utils/log';

export default {
    config: {
        navigationStyle: 'custom',
        navigationBarTextStyle: 'white'
    },

    components: {
        ListLoading,
        // CIcon,
        // 'c-btn': CButton,
        'med-container': Container,
        'b-top-bar': TopBar,
        'show-more': ShowMore,
        'op-banner': OpBanner,
        'c-navs': Navs,
        'recommend-item': RecommendItem,
        directory: Directory,
    },
    data() {
        let isOppoWebview = false;
        if (process.env.MARS_ENV === 'h5') {
            isOppoWebview = !!cookie(COOKIE_KEY.IS_OPPO_WEBVIEW);
        }
        return {
            /* eslint-disable */
            topHeight: 0,
            pageTitle: ' ',
            barClass: 'transparent',
            title: '',
            slogan: {},
            logo: [],
            textArr: [],
            themeColor: '',
            backColor: '',
            homeUrl: '',
            headerMoreUrl: '',
            headerOutLink: '',
            headerBanner: [],
            tabs: [],
            selected: 0,
            recommends: [],
            notice: {},
            loadStatus: 'init',
            requesting: false,
            noMore: false,
            env: '',
            /* eslint-disable fecs-camelcase */
            tab_id: '0',
            from: '',
            pn: 1,
            statusTags: [],
            statusSelect: 0,
            listApi: '/hbdlive/v1/topic/list',
            liveStatus: '',
            tabsConf: {
                tabsFixed: false,
                tabsTop: 0
            },
            tagsConf: {
                tagsFixed: false,
                tagsTop: 0
            },
            tagsColor: {
                selectedWord: '',
                selectedBack: '',
                unselectedWord: '',
                unselectedBack: ''
            }, // 二级tab颜色
            iconImg: '',
            iconImgUp: '',
            iconImgDown: '',
            screenHeight: 0,
            feedContaninerHeight: 700,
            containerMinHeight: 0,
            baijiaohaoArr: ['11', '12', '13', '14', '15', '16', '17'],
            isBaijiahao: false,
            shareInfo4Bd: {
                title: '健康直播间',
                content: '',
                imageUrl: ''
            },
            isOppoWebview: isOppoWebview,
            // newhomeurl:'/pages/brand/home/index' //指定home跳转地址
            /* eslint-enable */
        };
    },
    onLoad(options) {
        this.options = options;
        this.getPageData(options);
        this.from = options.from || '';
    },
    onReady() {
        this.env = process.env.MARS_ENV;
    },
    onPageScroll(scrollInfo) {
        if (scrollInfo.scrollTop < 44) {
            this.barClass = 'transparent';
            this.$api.setNavigationBarColor({
                frontColor: '#ffffff',
                backgroundColor: '#ffffff'
            });
            this.iconImg = this.iconImgUp;
        } else {
            this.barClass = 'white';
            this.$api.setNavigationBarColor({
                frontColor: '#000000',
                backgroundColor: '#ffffff'
            });
            this.iconImg = this.iconImgDown;
        }

        // 导航栏吸顶
        this.tabs.length > 1 && this.updateTabsStatus(scrollInfo.scrollTop);
    },
    onReachBottom() {
        !this.noMore && !this.requesting && this.onLoadMore();
    },
    onShareAppMessage() {
        return {
            title: this.shareInfo4Bd.title,
            content: this.shareInfo4Bd.content,
            imageUrl: this.shareInfo4Bd.shareImg,
            shareUrl: conf.apiHost + conf.viewPath + this.shareInfo4Bd.shareUrl
        };
    },
    methods: {
        /* eslint-disable */ 
        getPageData(options) {
            request({
                url: conf.goJianKangApiHost + '/hbdlive/v1/topic/home',
                method: 'GET',
                data: Object.assign(
                    {
                        vn: 'med'
                    },
                    this.options
                ),
                isFirstScreen: true,
                isNeedLogin: false
            })
                .then(({data, update}) => {
                    if (data.header) {
                        this.title = data.header.title;
                        this.slogan = data.header.slogan;
                        this.headerMoreUrl = data.header.url ? data.header.url : '';
                        this.headerOutLink = data.header.outLink ? data.header.outLink : '';
                        this.headerBanner = data.header.banner ? data.header.banner : [];
                        this.textArr = data.header.textArr ? data.header.textArr : [];

                        let colorList = (data.header.backColor && data.header.backColor.split(',')) || [];
                        this.themeColor = colorList.length ? colorList[0] : '#00c8c8';
                        /* eslint-disable max-len */
                        this.backColor = colorList.length
                            ? `linear-gradient(90deg, ${colorList[0]} 0%, ${colorList[1]} 61%, ${colorList[2]} 100%)`
                            : 'linear-gradient(134deg, #00CFA3 0%, #05CFCD 61%, #00D3EA 100%)';
                    }

                    this.homeUrl = (data && data.homeUrl) || '';

                    let unit = (data.logo && data.logo.Unit) || {};
                    this.logo = (unit && unit.list) || [];
                    /* eslint-disable eqeqeq */
                    let suffix = this.options.topic_id == '18' ? '' : '·直播间';
                    this.pageTitle = (unit && unit.list && unit.list[0] && `${unit.list[0].title}${suffix}`) || '';
                    this.iconImgUp = (unit && unit.list && unit.list[0] && unit.list[0].img) || '';
                    this.iconImgDown = (unit && unit.list && unit.list[0] && unit.list[0].img_down) || '';
                    this.iconImg = this.iconImgUp;
                    this.shareInfo4Bd = data.share ? data.share : this.shareInfo4Bd;
                    if (data.tabs && data.tabs.length > 1) {
                        this.tabs = data.tabs;
                    }
                    // this.tabs = data.tabs.slice(0, 1);
                    data.tabs.map((item, index) => {
                        if (item.selected === '1') {
                            this.selected = index;
                        }
                    });

                    this.tabId = data.tabs[this.selected].tab_id;
                    update.call(this, () => {
                        this.tabChange();
                        if (process.env.MARS_ENV === 'h5') {
                            const {timestamp, nonceStr, signature} = data.shareWx || {};
                            share(
                                {
                                    title: this.shareInfo4Bd.title,
                                    url: window.location.href,
                                    content: this.shareInfo4Bd.content,
                                    imageUrl: this.shareInfo4Bd.shareImg
                                },
                                data.shareWx
                                    ? {
                                            wx: true,
                                            debug: false,
                                            timestamp,
                                            nonceStr,
                                            signature
                                        }
                                    : {}
                            );
                        }
                    });
                })
                .catch(error => console.error(error));
        },
        topbarHeightHandle(e) {
            this.topHeight = e;

            // 默认最小高度 可视高度 - 状态栏 - 一级导航栏 - 视频导航
            const systemInfoSync = getSystemInfo();
            this.screenHeight = systemInfoSync.screenHeight;
            this.containerMinHeight = systemInfoSync.screenHeight - this.topHeight - 41 - 53;
        },
        imgLoad(e, index) {
            let {width, height} = e.detail;
            let iWidth = (46 * width) / height;
            this.logo[index].width = iWidth + 'px';
            this.$set(this.logo, index, this.logo[index]);
        },
        toLink(url, outLink = '', isNaLink = false, extra = {}) {
            if (url) {
                if (process.env.MARS_ENV === 'h5') {
                    window.location.href = url;
                } else {
                    navigate({
                        url
                    });
                }
            } else if (outLink) {
                /* eslint-disable max-len */
                outLink = outLink + '&source=' + (process.env.MARS_ENV === 'swan' ? 'sbjkzty-xcx' : 'sbjkzty-h5');
                navToBdBoxH5(
                    outLink,
                    isNaLink
                        ? {
                                module: 'live',
                                action: 'enterRoom',
                                parameters: {
                                    params: {
                                        /* eslint-disable dot-notation */
                                        roomId: core.getQueryObject(outLink)['room_id'],
                                        source: {
                                            livesource: 'sbjkzty-xcx'
                                        }
                                    }
                                }
                            }
                        : {
                                module: 'browser',
                                action: 'open',
                                parameters: {
                                    simple: '1'
                                }
                            }
                );
            }
            send({
                type: 'l',
                action: 'click',
                extra: Object.assign(
                    {
                        module: 'live_project_jump',
                        from: this.from
                    },
                    extra
                )
            });
        },
        // 获取列表数据
        getList() {
            return new Promise((resolve, reject) => {
                request({
                    url: conf.goJianKangApiHost + this.listApi,
                    method: 'GET',
                    data: Object.assign(
                        {
                            vn: 'med',
                            /* eslint-disable fecs-camelcase */
                            flow_type: this.tabId,
                            pn: this.pn++,
                            rn: 10,
                            liveStatus: this.liveStatus
                        },
                        this.options
                    ),
                    isFirstScreen: true,
                    isNeedLogin: false
                })
                    .then(res => {
                        resolve(res);
                    })
                    .catch(() => {
                        reject();
                    });
            });
        },
        // 初始化pagenum、列表数据、是否不可加载状态
        init() {
            this.pn = 1;
            this.recommends = [];
            this.noMore = false;
        },
        initList() {
            this.getList()
                .then(({data, update}) => {
                    // this.setListData(data.liveList || data.articleList);
                    this.setListData(data.liveList || data.articleList || data.list);
                    this.notice = data.notice || {};
                    if (this.baijiaohaoArr.indexOf(this.options.topic_id) !== -1) {
                        this.isBaijiahao = true;
                    }
                    this.$mpUpdated().then(() => {
                        if (this.tabs && this.tabs.length > 1 && this.tabsConf.tabsTop === 0) {
                            this.setNavTop('tabsContent', 'tabsConf', 'tabsTop');
                        }
                        if (this.statusTags && this.statusTags.length > 1 && this.tagsConf.tagsTop === 0) {
                            this.setNavTop('tagsContent', 'tagsConf', 'tagsTop');
                        }
                        this.setFeedContainerHeight();
                        this.setContainerMinHeight();
                    });
                })
                .catch(error => {
                    console.error(error);
                });
        },
        // 切换tab类目
        tabChange(obj) {
            this.init();

            // 请求及选中参数赋值
            if (obj) {
                this.tabId = obj.item.tab_id;
                this.selected = obj.index;
            }

            this.statusSelect = 0;
            this.initList();

            // 切换tab时，滑动至导航顶部
            this.tabsConf.tabsFixed &&
                this.$api.pageScrollTo({
                    scrollTop: this.tabsConf.tabsTop,
                    duration: 0
                });

            // tab点击切换
            obj &&
                send({
                    type: 't',
                    action: 'click',
                    extra: Object.assign({
                        module: 'live_project_tab',
                        tabid: obj.item.tab_id,
                        from: this.from
                    })
                });
        },
        // 下拉加载
        onLoadMore() {
            this.requesting = true;
            this.loadStatus = 'loading';
            this.getList()
                .then(({data, update}) => {
                    this.setListData(data.liveList || data.articleList || data.list);
                    this.loadStatus = 'init';
                    this.requesting = false;
                })
                .catch(error => console.error(error));
        },
        // 列表数据填充
        setListData(data = []) {
            if (data && data.length > 0) {
                let arr = data;
                arr.forEach(el => {
                    if (el.date) {
                        let date = el.date.split('/');
                        el.date = date[1] + '月' + date[2] + '日';

                        // 添加入口分发到直播间的来源
                        if (el.outLink) {
                            /* eslint-disable max-len */
                            el.outLink =
                                el.outLink +
                                '&source=' +
                                (process.env.MARS_ENV === 'swan' ? 'sbjkzty-xcx' : 'sbjkzty-h5');
                        }
                    }
                });
                this.recommends = this.recommends.concat(arr);
                if (data.length < 10) {
                    this.noMore = true;
                }
            } else {
                this.noMore = true;
            }
        },
        
        // 定位
        updateTabsStatus(scrollTop) {
            if (this.tabsConf.tabsTop) {
                this.tabsConf.tabsFixed = scrollTop >= this.tabsConf.tabsTop;
            }
        },
        // updateTagsStatus(scrollTop) {
        //     this.tagsConf.tagsFixed = scrollTop >= this.tagsConf.tagsTop;
        // },
        setNavTop(id = '', conf = '', tKey = '') {
            setTimeout(() => {
                this.$api
                    .createSelectorQuery()
                    .selectViewport()
                    .scrollOffset(viewport => {
                        const scrollTop = viewport.scrollTop;
                        const query = this.$api.createSelectorQuery().select(`#${id}`);
                        query
                            .boundingClientRect(rect => {
                                let {top, height} = rect || {};
                                if (top) {
                                    top = Math.floor(top + scrollTop - this.topHeight);
                                    this.$set(this[conf], tKey, top);
                                } else {
                                    this.setNavTop();
                                }
                            })
                            .exec();
                    })
                    .exec();
            }, 20);
        },
        setFeedContainerHeight() {
            const query = this.$api.createSelectorQuery().select('#feedContainer');
            query
                .boundingClientRect(rect => {
                    const height = rect.height || {};
                    if (height) {
                        this.feedContaninerHeight = height;
                    } else {
                        this.setFeedContainerHeight();
                    }
                })
                .exec();
        },
        setContainerMinHeight() {
            const query = this.$api.createSelectorQuery().select('#recommendContainer');
            query
                .boundingClientRect(rect => {
                    const top = rect.top || {};
                    if (top) {
                        this.containerMinHeight = this.screenHeight - top;
                    } else {
                        this.setContainerMinHeight();
                    }
                })
                .exec();
        },
        liveItem() {
            ubcSend({
                type: 'clk',
                value: 'ydzb_dangezhibo'
            });
        }
         /* eslint-enable */
    }
};
</script>

<style lang="less" scoped>
.spe-project-tag {
    display: block;
    margin: 0 17px;
}
.project-title {
    margin: 0.2rem 0 0 0.17rem;
    color: #333;
    font-family: PingFang-SC-Medium;
    font-size: 0.19rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 0.19rem;
}
.spe-project-icon-live {
    margin-right: 3px;
    display: inline-block;
    width: 20px;
    height: 18px;
    vertical-align: middle;
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
    background-image: url(data:image/png;base64,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);
}
.spe-project-icon-point {
    margin-right: 3px;
    display: inline-block;
    width: 0px;
    height: 0px;
    border: 3px solid #555;
    border-radius: 3px;
    vertical-align: middle;

    &-white {
        display: inline-block;
        width: 0px;
        height: 0px;
        border-radius: 3px;
        vertical-align: middle;
        border: 3px solid #fff;
    }
}
.spe-project-header {
    position: relative;
    font-family: PingFang-SC-Medium;
    // background: linear-gradient(134deg, #00CFA3 0%, #05CFCD 61%, #00D3EA 100%);
    &::before {
        content: '';
        height: 1.22rem;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 0;
    }
    &-content {
        position: relative;
        z-index: 1;
        &-bg {
            position: relative;
            padding: 0 0.17rem;
            color: #ffffff;
            letter-spacing: 0;
            font-family: 'PingFang-SC-Medium';
            &-title {
                font-size: 0.3rem;
                line-height: 0.3rem;
                font-weight: 500;
            }
            &-slogan {
                padding: 0.1rem 0 0.15rem 0;
                font-size: 0.15rem;
                line-height: 0.15rem;
            }
            &-img {
                position: absolute;
                right: 0;
                top: 0;
            }
            &-logo {
                display: inline-block;
                margin-right: 0.2rem;
            }
        }
        &-card {
            font-family: 'PingFang-SC-Regular';
            margin: 0;
            padding: 0 0.17rem;
            font-size: 0.14rem;
            color: #555555;
            letter-spacing: 0;
            line-height: 0.21rem;
            background: #ffffff;
            // box-shadow: 0 3.3px 16.7px 0 rgba(0,0,0,0.08);
            border-radius: 10px 10px 0 0;
            overflow: hidden;
            &-point {
                display: inline-block;
                font-weight: bolder;
            }
            &-text {
                font-size: 0.15rem;
                color: #555555;
                line-height: 0.26rem;
            }
        }
    }
}
.spe-project-separated {
    height: 0.08rem;
    background: #f6f6f6;
}
.spe-project-conclusion {
    margin: 0.15rem 0.17rem 0 0.17rem;
    height: 0.38rem;
    background: #f5f5f5;
    border-radius: 0.05rem;
    text-align: center;
    font-family: PingFang-SC-Regular;
    font-size: 0.14rem;
    color: #555555;
    letter-spacing: 0;
    line-height: 0.38rem;
}
.spe-project-nomore {
    // margin-top: 20px;
    padding-bottom: 15px;
    font-size: 14px;
    color: #999999;
    text-align: center;
}
.spe-project-tabs-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;
}
.spe-project-tags-fixed {
    position: fixed;
    top: 41px;
    left: 0;
    width: 100%;
    z-index: 2;
    background: #fff;
}
</style>
