<template>
    <view class="ala__special__hospital">
        <!-- 医院头部 -->
        <view class="ala__special__hospital__header" @tap="goHome">
            <view class="ala__special__hospital__header__name c-font-large bold">
                {{ header.title }}
            </view>
            <view 
                v-if="header.abstract && header.abstract.length"
                class="ala__special__hospital__header__tags c-font-normal"
            >
                <text 
                    v-for="(item,index) in header.abstract"
                    :key="index"
                    class="c-gap-right-xsmall"
                >{{ item }}</text>
                <c-label
                    v-if="header.label"
                    :text="header.label"
                    color="white"
                />
            </view>
        </view>
        <!-- 金刚位 -->
        <view>
            <h-showcase
                v-if="serviceInfo.length || ranks.length"
                :service-info="serviceInfo"
                :ranks="ranks"
                :special-hospital-name="header.title"
                :new-status="newStatus"
                :ala-card="alaCard"
            />
        </view>
        <view class="ala__special__hospital__wrap">
            <view 
                v-if="showcase.applets && showcase.applets.name"
                class="ala__special__hospital__wrap__applet" 
                @tap="appletClick"
            >
                <view class="ala__special__hospital__wrap__applet__title">
                    <text class="c-font-medium base_title">
                        官方小程序
                    </text>
                    <c-icon
                        name="youjiantou"
                        font-size="16px"
                        color="#1F1F1F"
                        class="base_title"
                    />
                </view>
                <official-applet
                    :applets="showcase.applets"
                />
            </view>
            <view class="ala__special__hospital__wrap__basics">
                <view class="ala__special__hospital__wrap__basics__title" @tap="basicsClick">
                    <text class="c-font-medium base_title">
                        基础信息
                    </text>
                    <c-icon
                        name="youjiantou"
                        font-size="16px"
                        color="#1F1F1F"
                        class="base_title"
                    />
                </view>
                <h-basics
                    :description="basicInfo.description"
                    :open-time="basicInfo.openTime"
                    :tel-list="basicInfo.telList"
                    :location="basicInfo.location"
                    :coordinate="basicInfo.coordinate"
                    :desc-link="basicInfo.descLink"
                    :pos-app="basicInfo.posApp"
                    :desc-line="serviceInfo && serviceInfo.length"
                    :website-wap="showcase.officialWebsiteWap"
                    :websitedomain="showcase.websitedomain"
                    :hospital-name="showcase && showcase.name"
                    :address-url="basicInfo.multiAddrUrl"
                    :tel-url="basicInfo.multiPhoneUrl"
                    :tel-app="basicInfo.telAppUrl"
                    :outpatient-services="basicInfo.outpatientServices"
                    :location-url-type="basicInfo.locationUrlType"
                />        
            </view>           
        </view>
        <view class="ala__special__hospital__footer" @tap="goHome">
            <view class="c-line-superfine-after"/>
            <view class="ala__special__hospital__footer__more">
                <view class="c-gap-right-xsmall">
                    查看更多
                </view>
                <view class="ala-recommend-hospital-bottom-icon">
                    <c-icon
                        name="youjiantou"
                        color="#1F1F1F"
                        class="icon"
                    />
                </view>
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @file ala 医院推荐卡
 * @author 赵强
 */
import HBasics from '@components/Hospital/Home/Basics';
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import CLabel from '@baidu/med-ui/components/Label/Label';
import HShowcase from '@components/Hospital/Home/Showcase';
import {navigate} from '../../utils/navigate';
import OfficialApplet from '@components/Hospital/Home/official-applet';
export default {
    config: {
        component: true
    },
    props: {
        /**
        * 科室详情页金刚位状态
        */
        hospitalInfo: {
            type: Object,
            default: () => {}
        }
    },
    watch: {
        hospitalInfo: {
            immediate: true,
            handler(val) {
                this.init(val);
            }
        }
    },
    components: {
        CLabel,
        HBasics,
        CIcon,
        HShowcase,
        OfficialApplet
    },
    data() {
        return {
            header: {},
            serviceInfo: [],
            ranks: [],
            basicInfo: {
            },
            showcase: {
            },
            homeUrl: '',
            newStatus: 1,
            alaCard: true
        };
    },
    created() {

    },
    methods: {
        goHome () {
            navigate({
                url: this.homeUrl,
                log: {
                    type: 'clk',
                    value: 'special_header'
                }
            });
        },
        basicsClick () {
            navigate({
                url: this.basicInfo.descLink,
                log: {
                    type: 'clk',
                    value: 'special_basic'
                }
            });
        },
        appletClick () {
            let info = this.showcase.applets;
            let url = process.env.MARS_ENV === 'h5' ? info.guidePage : info.swanUrl;
            navigate({
                url: url,
                urlType: '1',
                extra: {
                    type: 'clk',
                    name: 'applet_' + info.name
                }
            });
        },
        // 医院数据兼容小程序模板
        init (obj) {
            let hospital = obj.hospital || {};
            let baseInfo = hospital.baseInfo || {};
            let telList = [], telUrl = '';
            this.homeUrl = hospital.url;
            let outpatientServices = [];
            let appletsData = hospital.appletsData || {};
            // 头部信息
            this.header = hospital.header || {};
            // 金刚位处理
            if (hospital.kingKongList && hospital.kingKongList.length) {
                this.serviceInfo = hospital.kingKongList .map(res => {
                    return {
                        btnText: res.btnText,
                        desc: res.subTitle,
                        icon: res.icon,
                        link: res.url,
                        swanUrl: res.swanUrl,
                        text: res.title,
                    };
                });
            };
            if (hospital.rankList && hospital.rankList.length) {
                this.ranks = hospital.rankList.map((res, index) => {
                    return {
                        rankType: index,
                        label: res.label,
                        text: res.text
                    };
                });
            };
            // 基础信息
            if (baseInfo.newTel && baseInfo.newTel.text) {
                telList.push(baseInfo.newTel.text);
                telUrl = baseInfo.newTel.url;
            } else if (baseInfo.tel) {
                telList.push( baseInfo.tel);
            };
            // 医院卡返回的数据第一条返回标题了需要截取
            if (baseInfo.outPatient && baseInfo.outPatient.service && baseInfo.outPatient.service.length) {
                outpatientServices = baseInfo.outPatient.service.slice(1).map(res => {
                    return {
                        text: res
                    };
                });
            };
            this.basicInfo = {
                descLink: baseInfo.intro && baseInfo.intro.url,
                description: baseInfo.intro && baseInfo.intro.text,
                outpatientServices: outpatientServices,
                openTime: baseInfo.outPatient && baseInfo.outPatient.text,
                telList: telList,
                multiPhoneUrl: telUrl,
                location: {
                    distance: baseInfo.location.distance,
                    address: baseInfo.location.detail,
                },
                posApp: baseInfo.location.swanUrl,
                multiAddrUrl: baseInfo.location.url,
                locationUrlType: baseInfo.location.url.indexOf('expert.baidu.com') > -1 ? '' : '2'
            };
            this.showcase = {
                websitedomain: baseInfo.websiteShowUrl,
                officialWebsiteWap: baseInfo.website,
                applets: {
                    title: appletsData.title,
                    swanUrl: appletsData.swanUrl,
                    name: appletsData.name,
                    icon: appletsData.icon,
                    guidePage: appletsData.url
                }
            };
        }
    }
};
</script>
<style lang="less" scoped>
    .bold {
        font-weight: bold;
    }
    .ala__special__hospital {
        padding-bottom: 11px;
        border-radius: 12px;
        margin-bottom: 0.1rem;
        background: #ffffff;
        .base_title {
            line-height: 16px;
        }
        &__header{
            color: #fff;
            border-radius: 12px 12px 0 0;
            padding: 17px 13px 14px;
            background-image: linear-gradient(134deg, #00CFA3 0%, #05CFCD 61%, #00D3EA 100%);
            &__name {
                margin-bottom: 1px;
            }
        }
        &__wrap {
            padding: 0 13px;
            &__applet {
                padding: 3px 0 18px;
                &__title {
                    display: flex;
                    align-items: center;
                }
            }
            &__basics {
                &__title {
                    display: flex;
                    align-items: center;
                }
            }
        }
        &__footer {
            padding-top: 10px;
            &__more {
                color: #1F1F1F;
                font-size: 14px;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-top: 11px;
                .ala-recommend-hospital-bottom-icon {
                    width: .16rem;
                    height: .16rem;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background: #f5f5f5;
                    border-radius: 50%;
                    .icon {
                        margin-top: .01rem;
                        margin-left: .02rem;
                        font-size: .12rem;
                        font-weight: bold;
                    }
                }
            }
        }
    }
</style>
