<template>
    <view
        class="content"
        :style="{
            padding: !titleNone
                ? content.data.bgImg
                    ? '0.4rem 0.12rem 0.15rem 0.12rem'
                    : '0.15rem 0.12rem 0.15rem 0.12rem'
                : '0',
            backgroundImage: content.data.bgImg ? 'url(' + content.data.bgImg + ')' : '',
            'background-color':
                content.type === 'card-nav-img' || content.type === 'card-nav-icon' || content.data.bgImg ? 'none' : '#fff',
            'background-size': '100% 100%',
            'background-repeat': 'no-repeat',
            'margin-bottom': 
                content.type === 'card-nav-icon' || content.type === 'card-nav-img' ? '0.06rem' : '0.09rem',
        }"
    >
        <!-- 卡片标题 -->
        <view v-if="content.data.title" class="content-title c-color-333">{{ content.data.title }}</view>

        <!-- 卡片主体 -->
        <!-- 名医堂 -->
        <view v-if="content.type === 'card-swiper-doctor'">
            <view v-if="content.data.docHall && content.data.docHall.length" class="content__cont__docHall c-radius-large">
                <swiper
                    circular
                    autoplay
                    :indicator-dots="false"
                    :interval="3000"
                    class="content__cont__docHall__swiper"
                    @change="swiperChange"
                >
                    <swiper-item
                        v-for="(item, idx) in content.data.docHall"
                        :key="idx"
                        class="c-radius-large c-color"
                        @tap="goLink(item, 0)"
                    >
                        <view class="content__cont__docHall__item">
                            <c-avatar 
                                :size="55" 
                                :src="item.avatar" 
                                class="c-gap-right-xmiddle" 
                            />
                            <view style="width: calc(100% - 55px - 0.12rem);" class="c-font-normal">
                                <view class="c-font-17">{{ item.name }}</view>
                                <view>
                                    <text class="c-gap-right"> {{ item.docLevel }} </text>
                                    <text>{{ item.docDepart }}</text>
                                </view>
                                <view style="display: flex; align-items: center;">
                                    <view class="c-gap-right c-line-clamp1">{{ item.hosName }}</view>
                                    <view 
                                        v-if="item.hosLevel !== ''"
                                        style="flex: 1;"
                                    >
                                        <c-label 
                                            :text="item.hosLevel" 
                                            color="green" 
                                            solid 
                                        />
                                    </view>
                                </view>
                                <view class="c-line-clamp2">{{ item.goodAt }}</view>
                                <view v-if="item.docTags && item.docTags.length">
                                    <c-label
                                        v-for="(tag, idx) in item.docTags"
                                        :key="idx"
                                        :text="tag"
                                        color="box_red"
                                        class="c-gap-right"
                                    />
                                </view>
                                <!--服务-->
                                <view v-if="item.consultArr && item.consultArr.length">
                                    <view :style="{display: 'flex'}">
                                        <view
                                            v-for="(consult, index) in item.consultArr"
                                            :key="index"
                                            :class="[
                                                'c-slink c-slink-auto c-gap-top button button-bright c-line-clamp1',
                                                {'c-gap-right': index + 1 !== item.consultArr.length},
                                            ]"
                                            @tap.stop="onBtnTap(consult, item)"
                                        >
                                            <login-btn
                                                :disabled="!consult.callbackUrl"
                                                @onTapStart="onTapStart(consult, item)"
                                                @onLoginSuccess="onBtnTap(consult, item)"
                                            >
                                                <text class="button-text">{{ consult.text }}</text>
                                                <!-- 划线价 -->
                                                <text
                                                    v-if="consult.deleteline"
                                                    class="c-color-gray c-gap-left-small button-info button-del"
                                                >
                                                    {{ consult.deleteline }}
                                                </text>
                                                <text class="c-color-orange c-gap-left-small button-info">
                                                    ({{ consult.abstract }})
                                                </text>
                                            </login-btn>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </swiper-item>
                </swiper>
                <b-indicator 
                    :length="content.data.docHall.length" 
                    :cur-index="swiperIndex" 
                    selected-color="#00c8c8" 
                />
            </view>
        </view>
        <!-- 专家列表 -->
        <view v-else-if="content.type === 'card-tab'">
            <!-- 医生列表 -->
            <view id="contentCont" class="content__cont__list c-gap-top c-radius-large">
                <!-- tab -->
                <view
                    v-if="content.data.tabs && content.data.tabs.length && content.data.tabs.length > 1"
                    :style="{
                        top: topHeight + 'px',
                    }"
                    :class="{
                        content__cont__list__tab: true,
                        'content__cont__list__tab--fixed': tabsFixed,
                    }"
                >
                    <c-tabs
                        :data="content.data.tabs"
                        :selected="selectedIdx"
                        :scroll="true"
                        :item-style="{
                            'line-height': '1.7',
                            'background-color': content.data.tabColor || '',
                            padding: '5px 15px',
                            color: content.data.tabTextColor,
                            width: content.data.tabs.length > 3 ? 'auto' : (100 / content.data.tabs.length) + '%',
                        }"
                        :wrap-style="{
                            'background-color': content.data.tabColor || '#f5f5f5',
                        }"
                        :selected-style="{
                            'background-color': content.data.tabSelectColor || '',
                            color: content.data.tabTextSelectColor || '',
                        }"
                        @handleItemTap="switchTab"
                    />
                </view>
                <view v-show="tabsFixed" class="content__cont__list__mass"/>
                <!-- 详情 -->
                <view>
                    <!-- 介绍 -->
                    <view v-if="desc" class="c-color c-gap-top c-font-normal">{{ desc }}</view>
                    <!-- 图片链接 -->
                    <view 
                        v-if="content.data.tabs[selectedIdx] 
                            && content.data.tabs[selectedIdx].navImg" 
                        class="c-gap-top"
                    >
                        <view 
                            v-if="content.data.tabs[selectedIdx].navImg.bg" 
                            class="c-radius-large" 
                            @tap="goLink(content.data.tabs[selectedIdx].navImg)"
                        >
                            <image 
                                :src="content.data.tabs[selectedIdx].navImg.bg" 
                                mode="widthFix" 
                                class="content__cont__list__navImg" 
                            />
                        </view>
                    </view>
                    <!-- 医生列表 -->
                    <view 
                        v-if="content.data.tabs[selectedIdx] 
                            && content.data.tabs[selectedIdx].list 
                            && content.data.tabs[selectedIdx].list.length"
                    >
                        <view v-for="(item, idx) in content.data.tabs[selectedIdx].list" :key="idx">
                            <view :class="idx === 0 ? '' : 'c-line-superfine-after'"/>
                            <view class="c-gap-top-large c-gap-inner-bottom-large">
                                <b-card-wz-doctor 
                                    :expert="item" 
                                    @tap="goLink"
                                />
                            </view>
                        </view>
                    </view>
                    <c-loading 
                        type="list" 
                        :status="loadingStatus" 
                        style="margin-top: 0.5rem;"
                    />
                    <view 
                        v-if="content.data.tabs[selectedIdx]
                            && content.data.tabs[selectedIdx].list 
                            && content.data.tabs[selectedIdx].list.length"
                    >
                        <b-navigate
                            :url="content.data.tabs[selectedIdx].list 
                                && content.data.tabs[selectedIdx].list.length >= 10 
                                ? content.data.tabs[selectedIdx].url : ''"
                            :style="{
                                'text-align': 'center',
                                'color': '#00c8c8',
                            }"
                            :log="{
                                type: 'clk',
                                value: `specialCenter-more-url`,
                            }"
                        >
                            {{ content.data.tabs[selectedIdx].list 
                                && content.data.tabs[selectedIdx].list.length >= 10
                                ? '查看更多' : '没有更多内容了' 
                            }}
                        </b-navigate>
                    </view>
                </view>
            </view>
        </view>
        <!-- 挂号卡片 -->
        <view v-else-if="content.type === 'card-tab-registerlist'">
            <view class="content__cont__list c-gap-top c-radius-large">
                <!-- tab -->
                <view
                    v-if="content.data.tabs && content.data.tabs.length && content.data.tabs.length > 1"
                    :style="{
                        top: topHeight + 'px',
                    }"
                    :class="{
                        content__cont__list__tab: true,
                        'content__cont__list__tab--fixed': tabsFixed,
                    }"
                >
                    <c-tabs
                        :data="content.data.tabs"
                        :selected="selectedIdx"
                        :scroll="true"
                        :item-style="{
                            'line-height': '1.7',
                            'background-color': content.data.tabColor || '',
                            padding: '5px 15px',
                            color: content.data.tabTextColor,
                            width: content.data.tabs.length > 3 ? 'auto' : (100 / content.data.tabs.length) + '%',
                        }"
                        :wrap-style="{
                            'background-color': content.data.tabColor || '#f5f5f5',
                        }"
                        :selected-style="{
                            'background-color': content.data.tabSelectColor || '',
                            color: content.data.tabTextSelectColor || '',
                        }"
                        @handleItemTap="switchTab"
                    />
                </view>
                <view v-show="tabsFixed" class="content__cont__list__mass"/>
                <!-- 详情 -->
                <view>
                    <!-- 挂号卡片列表 -->
                    <view 
                        v-if="content.data.tabs[selectedIdx] 
                            && content.data.tabs[selectedIdx].list
                            && content.data.tabs[selectedIdx].list.expertList
                            && content.data.tabs[selectedIdx].list.expertList.length"
                    >
                        <view v-for="(item, idx) in content.data.tabs[selectedIdx].list.expertList" :key="idx">
                            <view :class="idx === 0 ? '' : 'c-line-superfine-after'"/>
                            <view class="c-gap-top-large c-gap-inner-bottom-xsmall">
                                <expert-item 
                                    :expert="item"
                                    :is-no-shadow="true"
                                    :border-shadow="false"
                                    :is-pre-consultation-type-three="true"
                                    padding="0"
                                    @tap="goLink"
                                />
                            </view>
                        </view>
                    </view>
                    <view 
                        v-if="content.data.tabs[selectedIdx]
                            && content.data.tabs[selectedIdx].list 
                            && content.data.tabs[selectedIdx].list.expertList
                            && content.data.tabs[selectedIdx].list.expertList.length"
                    >
                        <view
                            :style="{
                                'text-align': 'center',
                                'color': '#00c8c8',
                            }"
                        >
                            没有更多内容了
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <!-- icon 卡片 -->
        <view v-else-if="content.type === 'card-nav-icon'">
            <view v-if="content.data.entitySearch && content.data.entitySearch.length" class="gold-categories-bg">
                <view class="gold-categories">
                    <view 
                        v-for="(item, index) in content.data.entitySearch" 
                        :key="index" 
                        class="gold-categories-item"
                    >
                        <b-navigate
                            :url="item.url"
                            :log="{
                                type: 'clk',
                                value: `specialCenter-${item.title}`,
                            }"
                        >
                            <image :src="item.icon" class="gold-categories-item-img"/>
                            <view 
                                v-if="item.title" 
                                class="gold-categories-item-title"
                                :style="{color: content.data.color || ''}"
                            >
                                {{ item.title }}
                            </view>
                        </b-navigate>
                    </view>
                </view>
            </view>
        </view>
        <!-- 带链接的图片 -->
        <view v-else-if="content.type === 'card-nav-img'" class="card-nav-img">
            <view 
                v-if="content.data.navImg.bg" 
                class="c-radius-large" 
                @tap="goLink(content.data.navImg)"
            >
                <image 
                    :src="content.data.navImg.bg" 
                    mode="widthFix" 
                    class="content__cont__list__navImg" 
                />
            </view>
        </view>
        <!-- 健康logo -->
        <view v-else-if="content.type === 'card-logo'" class="logo-intro">
            <pcr-slogan 
                v-if="content.data.slogan" 
                :slogan="content.data.slogan" 
            />
        </view>
    </view>
</template>

<script>
/**
 * @file Contents
 * @author baiyuhang
 * @categories 专科中心页组件
 * @tags [component]
 */
import CTabs from '@baidu/med-ui/components/Tabs/Tabs';
import BCardWzDoctor from '@components/search/card-wz-doctor';
import CAvatar from '@baidu/med-ui/components/Avatar/Avatar';
import CLabel from '@baidu/med-ui/components/Label/Label';
import BIndicator from '@commonComponents/indicator';
import BNavigate from '../../../components/common/navigate';
import PcrSlogan from '../../../components/act/pcr/PcrSlogan';
import LoginBtn from '@components/common/login-btn';
import CLoading from '@baidu/med-ui/components/Loading/Loading';
import ExpertItem from '../../../components/guahao/expert-item';
import {request} from '@utils/request';
import {navigate} from '@baidu/med-utils/lib/Mars';
import {ubcSend} from '@utils/log';
import {pay} from '../../../utils/pay';
import * as login from '../../../utils/login';

export default {
    config: {
        component: true
    },
    components: {
        CTabs,
        CAvatar,
        CLabel,
        BIndicator,
        BCardWzDoctor,
        CLoading,
        BNavigate,
        PcrSlogan,
        ExpertItem,
        LoginBtn
    },
    props: {
        /**
         * 内容对象
         */
        content: {
            type: Object,
            default() {
                return {};
            }
        },

        /**
         * 内容索引
         */
        index: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            options: {},
            topHeight: 10,
            swiperIndex: 0,
            tabsFixed: false,
            tabsFixedTop: 0,
            docHall: null,
            tabs: null,
            desc: '',
            selfTest: null,
            selectedIdx: 0,
            list: null,
            callbackUrl: '',
            titleNone: false,
            loadingStatus: ''
        };
    },
    created() {
        if (this.content.name || this.content.type) {
            ubcSend({
                type: 'view',
                value: `specialCenter-${this.content.name || this.content.type}`,
            });
        }
        if (this.content.data.tabs) {
            this.selectedIdx = 0;
            if (this.content.data.tabs[this.selectedIdx] && this.content.data.tabs[this.selectedIdx].desc) {
                this.desc = this.content.data.tabs[this.selectedIdx].desc;
            }
        }
        if (
            this.content.type === 'card-logo' ||
            this.content.type === 'card-nav-icon' ||
            this.content.type === 'card-nav-img'
        ) {
            this.titleNone = true;
        }
        this.callbackUrl = this.content.data.callbackUrl || '';
    },
    methods: {
        // 设置tab距离顶部的高度
        setTabsTop(delay = 0, noCheck) {
            const __set = () => {
                Promise.all([
                    new Promise((resolve, reject) => {
                        this.$api
                            .createSelectorQuery()
                            .selectViewport()
                            .scrollOffset(viewport => resolve(viewport.scrollTop))
                            .exec();
                    }),
                    new Promise((resolve, reject) => {
                        const query = this.$api.createSelectorQuery().select('#contentCont');
                        query
                            .boundingClientRect(rect => {
                                const top = rect.top || {};
                                resolve(top);
                            })
                            .exec();
                    })
                ]).then(val => {
                    const scrollTop = val[0];
                    let top = val[1];
                    if (top) {
                        top = Math.floor(top + scrollTop - this.topHeight + 20);
                        this.$set(this, 'tabsFixedTop', top);
                    } else {
                        !noCheck && this.setTabsTop(500, !noCheck);
                    }
                });
            };
            delay ? setTimeout(__set, delay) : __set();
        },
        switchTab(data) {
            if (this.tabs && this.tabs.length < 2) {
                return;
            }
            if (data.index || data.index === 0){
                this.selectedIdx = data.index;
            }

            const {tab} = data;
            Object.assign(this, {
                desc: tab.desc || '',
                selfTest: tab.selfTest || null,
            });
            this.options.tab = tab.text;
        },
        onTapStart(btn, expert) {
            if (process.env.MARS_ENV === 'h5') {
                if (btn.isLogin && btn.isLogin === 1) {
                    this.onBtnTap(btn, expert);
                } else {
                    login.toH5LoginPage({openType: 'relaunch', href: btn.refreshUrl});
                }
            }
        },
        onBtnTap(btn, expert) {
            if (expert.type === 'expertRec' && btn.callbackUrl) {
                //诊前推荐定向医生支付逻辑
                this.$api.showLoading({
                    title: '正在跳转支付...'
                });
                request({
                    url: btn.callbackUrl, // 自测注释，后面放开
                    method: 'POST',
                    header: {
                        'content-type': 'application/x-www-form-urlencoded'
                    },
                    isNeedLogin: true,
                    isFirstScreen: false
                }).then(res => {
                    // 分端逻辑
                    if (res.data.toast) {
                        this.$api.showToast({
                            icon: 'none',
                            title: res.data.toast
                        });
                        return;
                    }
                    const {pay_url, payUrl, jumpUrl} = res.data || {};
                    if (process.env.MARS_ENV === 'swan') {
                        // 去支付
                        this.$api.hideLoading();
                        if (pay_url || payUrl) {
                            pay({
                                url: pay_url || payUrl
                            });
                        }
                    } else if (process.env.MARS_ENV === 'h5') {
                        // 跳转
                        if (jumpUrl) {
                            let path = window.location.hash;
                            path = path + '&timestamp=' + new Date().getTime();
                            window.history.replaceState(null, null, path);
                            this.$api.hideLoading();
                            window.location.href = jumpUrl;
                        }
                    }
                });
            } else {
                if (btn.callbackUrl) {
                    request({
                        url: btn.callbackUrl, // 自测注释，后面放开
                        method: 'POST',
                        header: {
                            'content-type': 'application/x-www-form-urlencoded'
                        },
                        isNeedLogin: true,
                        isFirstScreen: false
                    }).then(res => {
                        const {pay_url, payUrl} = res.data || {};
                        if (pay_url || payUrl) {
                            pay({
                                url: pay_url || payUrl
                            });
                        }
                        if (res.data && res.data.msUrl) {
                            navigate({
                                url: res.data.msUrl
                            });
                        }
                    });
                }
            }
            if (btn.url) {
                this.goLink(btn, 0);
            }
        },
        updateTabsStatus(scrollTop) {
            this.tabsFixed = scrollTop >= this.tabsFixedTop;
        },
        swiperChange($event) {
            const {current} = $event.detail;
            this.swiperIndex = current;
        },
        goLink({url}, urlType = 2) {
            if (this.content.name || this.content.type){
                ubcSend({
                    type: 'clk',
                    value: `specialCenter-${this.content.name || this.content.type}`
                });
            }
            if (url && url !== '' && url.indexOf('pages') >= 0 || url.indexOf('/pages') >= 0 || url.indexOf('#/pages') >= 0){
                urlType = 0;
            }
            if (url && url !== '') {
                navigate({
                    url,
                    urlType: urlType
                });
            }
        }
    }
};
</script>

<style lang="less" scoped>
.content-title {
    font-size: 0.18rem;
    line-height: 0.18rem;
    margin-bottom: 0.15rem;
    font-weight: bold;
}

.content {
    border-radius: 0.1rem;
    padding: 0.15rem 0.12rem 0.15rem 0.12rem;
    // background: #fff;
    margin-bottom: 0.09rem;

    &__cont {
        padding: 0 0.1rem;

        &__docHall {
            border-radius: 0.1rem;
            // background: #fff;
            &__swiper {
                height: 1.9rem;
            }

            &__item {
                height: 1.68rem;
                box-sizing: border-box;
                display: flex;
            }

            .button {
                padding-left: 0.12rem;
                padding-right: 0.12rem;
                font-size: 14px;
                line-height: 0.28rem;
                border-radius: 30px;
            }

            .button-bright {
                background: #e5f9f9;
                color: #00c8c8;
            }

            .button-del {
                text-decoration: line-through;
            }
            @media only screen and (max-width: 320px) {
                .button {
                    padding-left: 0.05rem;
                    padding-right: 0.05rem;

                    .button-text {
                        font-size: 12px;
                    }

                    .button-info {
                        font-size: 12px;
                    }
                }
            }
        }

        &__list {
            // background: #fff;
            &__tab {
                &__scroll {
                    display: flex;
                }

                &--fixed {
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100%;
                    z-index: 10;
                    box-sizing: border-box;
                    background-color: #fff;
                    padding: 0.1rem 0.13rem;
                }
            }

            &__mass {
                height: 0.58rem;
            }

            &__navImg {
                width: 100%;
            }
        }
    }
}

.c-flex {
    display: flex;
}

.card-nav-img {
    padding: 0;
}

.gold-categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    border-radius: 10px;
    overflow: hidden;
    padding: 20px 0;

    &-bg {
        margin-top: -10px;
        border-radius: 12px 12px 0 0;
        z-index: 98;
        position: relative;
    }

    &-item {
        flex: 1;

        &-img {
            display: block;
            width: 30px;
            height: 30px;
            margin: 0 auto 10px;
        }

        &-title {
            line-height: 14px;
            text-align: center;
            color: #1f1f1f;
        }
    }
}
// logo标签特点
.logo-intro {
    margin-bottom: 10px;
    padding: 0 10px;

    .logo-charact {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 13px 17px 13px 17px;
        box-shadow: 0 3.3px 16.7px 0 rgba(0, 0, 0, 0.08);
        background: #fff;
        border-radius: 5px;

        &-logo {
            width: 97px;
            height: 18px;
        }

        &-tag {
            display: flex;

            &-item {
                display: flex;
                align-items: center;
                font-size: 12px;
                line-height: 12px;
                color: #bbb;
                margin-left: 12px;

                &-icon {
                    width: 12px;
                    margin-right: 4px;
                }

                &:first-child {
                    margin-left: 0;
                }
            }
        }
    }
}
</style>
