<template>
    <view class="basic-info c-color-333 c-font-normal">
        <!-- 描述信息 -->
        <view
            v-if="description"
            class="basic-info-line description"
            @tap.stop="navigateTo(descLink, 0, 'desc')"
        >
            <text
                :class="[descLine > 1 ? 'c-line-clamp3' : 'c-line-clamp6']"
            >
                {{ description }}
            </text>
        </view>
        <view class="c-line-superfine-after"/>
        <!-- 门诊服务 -->
        <view v-if="outpatientServices && outpatientServices.length && outpatientServices.length > 0" class="basic-info-line">
            <text>门诊服务：</text>
            <template
                v-for="(serve, serveIndex) in outpatientServices"
            >
                <c-label
                    v-if="serve.text"
                    :key="serveIndex"
                    :text="serve.text"
                    color="box_red"
                    class="c-gap-right-small"
                />
            </template>
            
        </view>
        <template v-if="openTime">
            <view class="c-line-superfine-after"/>
            <!-- 门诊时间 -->
            <view v-if="openTime" class="basic-info-line openTime">
                <text>{{ openTimeText }} {{ openTime }}</text>
            </view>
        </template>
        <view class="c-line-superfine-after"/>
        <!-- 官网地址 -->
        <view
            v-if="websiteWap && websiteWap.length > 0"
            class="basic-info-line website"
            @tap.stop="navigateTo(websiteWap, 2, 'link')"
        >
            <view class="website-left-box">
                <c-icon
                    :font-size="iconSize"
                    name="link"
                    class="website-icon"
                />
                <text class="c-line-clamp1 website-url">
                    {{ websitedomain || websiteWap }}
                </text>
                <c-label
                    :text="'医院官网'"
                    color="green"
                    bg-color="green"
                    border-color="green"
                    class="website-authority"
                />
            </view>
            <c-icon
                :font-size="iconSize"
                name="right"
                class="website-right"
            />
        </view>
        <view class="c-line-superfine-after"/>
        <!-- 电话号码 -->
        <view
            v-if="telList && telList.length > 0"
            class="basic-info-line tel"
            @tap.stop="handleTelTap(telList)"
        >
            <c-icon
                :font-size="iconSize"
                name="call"
                class="tel-icon"
            />
            <text
                v-for="(tel, index) in telList"
                :key="index"
                class="tel-number c-line-clamp1"
            >
                {{ tel }}
            </text>
            <c-icon
                :font-size="iconSize"
                name="youjiantou"
                class="tel-right"
            />
        </view>
        <view v-if="telList && telList.length > 0" class="c-line-superfine-after"/>
        <!-- 位置信息 -->
        <view
            v-if="location"
            class="basic-info-line location"
            @tap.stop="handleLocationTap(coordinate, posApp)"
        >
            <c-icon
                :font-size="iconSize"
                name="location-hollow"
                class="location-icon"
            />
            <view class="location-text c-line-clamp1">
                <text v-if="location.distance" class="distance">{{ location.distance }}</text>
                <text v-if="location.address" class="addresss">{{ location.address }}</text>
            </view>
            <view class="daohang">
                <c-icon
                    :font-size="iconSize"
                    name="navigate"
                    class="navigate-icon"
                />
                <view>
                    到这去
                </view>
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @file 医院主页第二版/医院基础信息t
 * @author chenyang28
 * @categories 医院主页
 * @tags [sub-component]
 */
import CLabel from '@baidu/med-ui/components/Label/Label';
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import { navigate, navToBdBoxH5} from '@utils/navigate';
import * as Log from '@utils/log';

export default {
    config: {
        component: true
    },
    props: {
        /**
         * 描述介绍
         */
        description: String,
        /**
         * 描述跳转
         */
        descLink: String,
        /**
         * 问诊时间
         */
        openTime: String,
        /**
         * 三方跳转小程序
         */
        posApp: {
            type: String,
            default: ''
        },
        /**
         * 电话
         */
        telApp: {
            type: String,
            default: ''
        },
        /**
         * 详细地址
         */
        location: {
            type: Object,
            default: () => {}
        },
        /**
         * 电话号码列表
         */
        telList: {
            type: Array,
            default: () => []
        },
        /**
         * 经纬度坐标
         */
        coordinate: {
            type: Array,
            default: () => []
        },
        /**
         * 金刚位数量
         */
        descLine: Number,
        /**
         * 官网
         */
        websiteWap: String,
        /**
         * 网站
         */
        websitedomain: String,
        /**
         * 医院名字
         */
        hospitalName: String,
        /**
         * 地址
         */
        addressUrl: String,
        /**
         * 电话地址
         */
        telUrl: String,
        /**
         * 门诊服务：
         */
        outpatientServices: {
            type: Array,
            default: () => []
        },
        locationUrlType: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            openTimeText: '',
            iconSize: '14px',
            mapScale: 17
        };
    },
    components: {
        CIcon,
        CLabel
    },
    methods: {
        handleTelTap(telList) {
            if (!telList || telList.length === 0) {
                return;
            }
            Log.send({
                type: 'l',
                action: 'click',
                extra: {
                    name: 'tel'
                }
            });
            if (this.telApp && process.env.MARS_ENV === 'swan') {
                navigate({
                    url: this.telApp,
                    urlType: 1
                });
            } else {
                if (this.telUrl) {
                    navigate({
                        url: this.telUrl
                    });
                } else {
                    this.$api.makePhoneCall({
                        phoneNumber: telList[0]
                    });
                }
            }
        },
        handleLocationTap(coordinate, posApp) {
            Log.send({
                type: 'l',
                action: 'click',
                extra: {
                    name: 'map'
                }
            });
            if (posApp && process.env.MARS_ENV === 'swan') { // 三方小程序跳转
                navigate({
                    url: posApp,
                    urlType: 1
                });
            } else if (this.addressUrl) { // 调起地图
                navigate({
                    url: this.addressUrl,
                    urlType: this.locationUrlType
                });
            } else if (coordinate && coordinate.length === 2) {
                const api = 'https://api.map.baidu.com/marker';
                let conf = {
                    latitude: coordinate[0],
                    longitude: coordinate[1],
                    scale: this.mapScale,
                    name: this.hospitalName || '',
                    content: this.location && this.location.address
                };
                /* eslint-disable max-len */
                const url = `${api}?location=${conf.latitude},${conf.longitude}&zoom=${conf.scale}&title=${conf.name || '我的位置'}&content=${conf.content || ''}&output=html&src=webapp.baidu.smartapp`;
                /* eslint-disable max-len */
                navToBdBoxH5(url);
            }
        },
        navigateTo(url, type = 0, tag = '') {
            if (!url) {
                return;
            }
            Log.send({
                type: 'l',
                action: 'click',
                extra: {
                    name: tag
                }
            });
            navigate({ url: url, urlType: type });
        }
    }
};
</script>

<style lang="less" scoped>
.basic-info {
    line-height: 23px;

    &-line {
        padding: 10px 0;
    }

    &-line:last-child {
        padding-bottom: 0;
    }

    .description {
        padding: 10px 0 2px;
        margin-bottom: .05rem;
    }

    .openTime span {
        margin: 0;
    }

    .tel, .location, .website {
        display: flex;
        flex-direction: row;
        align-items: center;

        &-icon, &-right {
            flex: 0 0 auto;
        }

        &-number, &-text {
            flex: 1 1 auto;
            margin-left: 8px;
        }
    }
    .distance {
        padding-right: 6px;
        margin-right: 6px;
        border-right: 1px solid #eee;
    }
    .daohang {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        margin-left: 10px;
    }
    .website {
        justify-content: space-between;
    }
    .website-left-box {
        display: flex;
        align-items: center;
        width: 90%;
    }
    .website-url, .website-authority {
        margin-left: 8px;
        top: 0 !important;
    }
    .website-authority {
        flex-shrink: 0;
    }
    .website-right {
        flex-shrink: 0;
    }
    .navigate-icon {
        margin-right: 4px;
    }
}
.c-line-clamp6 {
    display: -webkit-box;
    overflow: hidden;
    margin-bottom: .05rem;
    white-space: normal;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
}
</style>

