<template>
    <view class="b-hospital">
        <b-navigate
            v-if="haveNavs && hosTitle"
            :url="urlTo"
        >
            <b-title :text="hosTitle"/>
        </b-navigate>
        <view
            v-if="hospitalList && hospitalList.length"
            class="hospital-wrap"
        >
            <c-tabs
                v-if="haveNavs && wrapPage === 'ghHome' && hospitalList.length > 1"
                :data="hospitalList"
                :selected="selected"
                :scroll="true"
                :item-style="{
                    color: '#1f1f1f',
                }"
                :wrap-style="{
                    background: '#f5f5f5',
                    margin: '11px 13px 0',
                }"
                :selected-style="{
                    color: '#00C8C8',
                    background: '#fff',
                }"
                @handleItemTap="navChange"
            />
            <c-navs
                v-else-if="haveNavs && hospitalList.length > 1"
                :options="hospitalList"
                :selected-index="selected"
                :scroll="true"
                :selected-color="selectedColor"
                selected-font-weight="bold"
                :border-bottom="true"
                color="#555555"
                @itemtap="navChange"
            />
            <scroll-view
                v-if="haveNavs ? hospitalList[selected].list : hospitalList"
                scroll-x
                :scroll-into-view="selectedView"
                :lower-threshold="60"
                class="scroll-hospital"
                @scroll="scrollHos"
                @scrolltolower="onScrollToLower"
            >
                <view id="hos-start"/>
                <view
                    v-for="(item, index) in (haveNavs ? hospitalList[selected].list : hospitalList)"
                    :id="'hos-' + index"
                    :key="index"
                    class="hos-item"
                    :class="(index + 1) === (haveNavs ? hospitalList[selected].list.length :
                        hospitalList.length) ? '' : 'c-gap-right-middle'"
                >
                    <view
                        class="hos-item-wrap"
                        :style="{boxShadow: isNoShadow ? 'none' : ''}"
                        @tap="onTapItem(item.url, item.hospitalName, item.hospitalId, item.queryDepartment)"
                    >
                        <view style="display: flex;" class="c-gap-bottom-small">
                            <image
                                class="image-self"
                                mode="aspectFill"
                                :src="item.hospitalLogo || defaultHosLogo"
                            />
                        </view>
                        <view
                            v-if="item.hospitalName"
                            class="c-line-clamp2 hos-name c-font-normal c-color-title c-gap-bottom-small"
                        >{{ item.hospitalName }}</view>
                        <view class="hos-level">
                            <c-label
                                v-if="item.hospitalLevel"
                                :text="item.hospitalLevel"
                                color="blue"
                            />
                        </view>
                        <view
                            v-if="item.hospitalDistance"
                            class="hos-distance c-color-gray c-font-normal"
                        >距离{{ item.hospitalDistance }}</view>
                    </view>
                </view>
                <view id="hos-end"/>
            </scroll-view>
            <view v-else class="empty-list">
                抱歉目前没有相关城市的医院~
            </view>
        </view>
    </view>
</template>

<script>

/**
 * @file 医院业务组件
 * @author wangying51
 * @categories
 * @tags
 */

import CNavs from '@baidu/med-ui/components/Navs/Navs';
import CTabs from '@baidu/med-ui/components/Tabs/Tabs';
import CLabel from '@baidu/med-ui/components/Label/Label';

import BTitle from './title';
import BNavigate from '../common/navigate';
import {navigate} from '../../utils/navigate';
import {ubcSend} from '@utils/log';
import {formatUrl} from '@utils/toNewPage';

export default {
    config: {
        component: true
    },
    props: {
        /**
         * url
         */
        url: String,
        /**
         * hosTitle
         */
        hosTitle: String,
        /**
         * hosNavSelected
         */
        hosNavSelected: Number,
        /**
         * hospitalList
         */
        hospitalList: Array,
        /**
         * haveNavs
         */
        haveNavs: Boolean,
        /**
         * logFlag
         */
        logFlag: {
            'type': String,
            'default': ''
        },
        /**
         * selectedColor
         */
        selectedColor: {
            type: String,
            default: '#489AF6'
        },
        /**
         * isNoShadow
         */
        isNoShadow: {
            type: Boolean,
            default: false
        },
        /**
         * wrapPage
         */
        wrapPage: {
            type: String,
            default: ''
        },
        /**
         * 是否是挂号重构
         */
        restructure: {
            type: Boolean,
            default: false
        },
        /**
         * url参数
         */
        options: {
            type: Object,
            default() {
                return {};
            }
        },
        /**
         * 组件所在页面
         */
        curpage: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            defaultHosLogo: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2128139361,2499500856&fm=179&app=35&f=PNG?w=144&h=144&s=88011F7C4F636F204C6611D20300E0BA',
            selected: this.hosNavSelected,
            selectedView: 'hos-start',
            urlTo: '',
            fullShow: false,
            selectedTab: ''
        };
    },
    watch: {
        selected(newVal) {
            this.urlTo = this.calUrlTo();
        },
        url(v) {
            if (v) {
                this.urlTo = this.calUrlTo();
            }
        }
    },
    lifetimes: {
        attached() {
            this.urlTo = this.calUrlTo();
        }
    },
    components: {
        CNavs,
        CTabs,
        CLabel,
        BTitle,
        BNavigate
    },
    methods: {
        navChange(obj) {
            let index = obj.index;
            this.selectedView = 'hos-start';
            this.selected = index;
            this.selectedTab = obj.tab.text;
            // 发送日志
            ubcSend({
                type: 'clk',
                value: 'tab_' + this.selectedTab
            });
        },
        calUrlTo() {
            if (!this.url || !this.hospitalList.length) {
                return '';
            }
            let urlTo = '';
            let url = this.url;
            let paramKey = this.hospitalList[this.selected].key;
            let paramValue = this.hospitalList[this.selected].value;

            if (paramKey && paramValue) {
                urlTo = url.indexOf('?') > -1
                    ? url + `&${paramKey}=${paramValue}`
                    : url + `?${paramKey}=${paramValue}`;
            }
            else {
                urlTo = url;
            }
            return urlTo;
        },
        scrollHos(e) {
            this.selectedView = '';
        },
        onScrollToLower() {
            if (this.haveNavs && !this.fullShow && this.hosNavSelected === this.selected) {
                this.fullShow = true;
                /**
                 * loadFullHospital
                 */
                this.$emit('loadFullHospital');
            }
        },
        onTapItem(url, name, hospitalId, qdepartment) {
            if (!url && !this.restructure) {
                return;
            }

            if (!url && this.restructure) {
                // 号源页跳转医生列表页
                if (this.curpage === 'appoint') {
                    url = formatUrl('/pages/guahao/expertlist/index', this.options, {
                        title: name,
                        hospital_id: encodeURIComponent(hospitalId),
                        q_department: qdepartment
                    });
                }
                // 跳转医院主页
                else {
                    url = formatUrl('/pages/guahao/hospitaldetail/index', this.options, {
                        title: name,
                        hospital: name,
                        hospital_id: encodeURIComponent(hospitalId)
                    });
                }

            }

            navigate({
                url,
                log: {
                    type: 'clk',
                    value: 'hot_' + this.selectedTab + '_' + name
                },
                extra: {
                    logName: this.logFlag ? this.logFlag + '-hos-scroll-item' : 'hos-scroll-item'
                }
            });
        }
    }
};
</script>

<style lang="less" scoped>
.b-hospital {
    .scroll-hospital {
        white-space: nowrap;
        width: 100%;
    }

    #hos-start,
    #hos-end {
        width: .13rem;
        display: inline-block;
    }

    .hos-item {
        display: inline-block;
        width: calc(30% - .01rem);
        vertical-align: top;

        &::before,
        &::after {
            content: '';
            display: block;
            height: 15px;
            width: 100%;
            background-color: transparent;
        }
    }

    .hos-item-wrap {
        width: 100%;
        padding: .12rem .08rem .1rem;
        background-color: #fff;
        text-align: center;
        border-radius: .08rem;
        box-sizing: border-box;
        border: .5px solid rgba(224, 224, 224, .7);
        box-shadow: 0 2px 4px 0 rgba(198, 201, 213, .27);

        .image-self {
            margin: 0 auto;
            display: inline-block;
            width: .48rem;
            height: .48rem;
            border-radius: 100%;
            border: 1px solid rgba(0, 0, 0, .05);
        }

        .hos-level {
            margin-top: -.05rem;
            min-height: 22px;
        }

        .hos-name {
            color: #333;
            line-height: .22rem;
            height: .46rem;
        }
    }

    .empty-list {
        font-size: 13px;
        padding: 30px 0 10px 0;
        text-align: center;
        color: #999;
    }
}
</style>


