<template>
    <view class="appointlist-hospital-info">
        <view
            class="appointlist-hospital-info__header c-gap-right-xmiddle"
            @tap="handleHospitalTap"
        >
            <view
                :style="{
                    background: isGray ? '#B8B8B8' : '',
                }"
                class="appointlist-hospital-info__header__label"
            >出诊地</view>
            <view class="appointlist-hospital-info__header__info c-line-clamp1">
                <view class="appointlist-hospital-info__header__info__title">
                    <text
                        :style="{
                            color: isGray ? '#858585' : '',
                        }"
                        class="c-font-big c-font-wb hospital-title"
                    >{{ hospital.hospitalName }}</text>
                    <view
                        v-if="hospital.appointsSource.isVerified"
                        class="hospital-identify c-font-small"
                        @tap.stop="handleClick"
                    >已认证</view>
                </view>
                <view v-if="hospital.hospitalTags" class="appointlist-hospital-info__header__info__labels">
                    <c-label
                        v-if="hospital.hospitalNature"
                        :text="hospital.hospitalNature"
                        :disable-sanjia="false"
                        border-color="rgba(153,153,153, 0.20)"
                        color="#999"
                        bg-color="#fff"
                        :custom="true"
                        margin="3"
                    />
                    <c-label
                        v-for="(tag, tagIndex) in hospital.hospitalTags"
                        :key="tagIndex"
                        :text="tag"
                        :disable-sanjia="false"
                        border-color="rgba(153,153,153, 0.20)"
                        color="#999"
                        bg-color="#fff"
                        :custom="true"
                        margin="3"
                    />
                </view>
            </view>
            <view class="appointlist-hospital-info__header__right_arrow"/>
        </view>

        <view v-if="showGuideTips" class="appointlist-hospital-info__calendar testguide">
            <view class="appointlist-hospital-info__tips c-width c-font-13'">
                {{ guideTips.tip }}
                <view v-if="guideTips.linkTip" class="appointlist-hospital-info__link">
                    <text style="color: #00c8c8" @tap="JumpTo">
                        {{ guideTips.linkTip }}
                    </text>
                    <c-icon
                        name="right"
                        class="appointlist-hospital-info__more"
                        font-size="14px"
                        style="color: #00c8c8"
                    />
                </view>
            </view>
        </view>

        <view v-else-if="showTips" class="appointlist-hospital-info__calendar">
            <view class="appointlist-hospital-info__tips c-width c-font-13'">
                {{ tips }}
                <!-- <view
                    v-if="tipsPrompt"
                    class="appointlist-hospital-info__tips__icon"
                    @tap.stop="handleTipTap"
                >
                    <view class="icon-flex">
                        <c-icon name="question-circle" font-size="13"/>
                    </view>
                </view> -->
            </view>
        </view>
        <c-dialog
            :show="showDialog"
            :btn-opts="dialogBtnOpts"
            :content="dialogContent"
            content-text-align="center"
            content-padding="20px"
            content-color="#555"
            gap-top="0"
            @close="handleCloseDialog"
            @btntap="handleDialogButtonTap"
        />
        <!-- 已认证弹窗 -->
        <c-dialog
            :show="showIdentify"
            :width="0.72"
            border-radius="8px"
            content-padding="0 0"
            :gap-top="0"
            :gap-slot-bottom="0"
            :btn-opts="[]"
        >
            <view class="dialog-content">
                医院资质在国家卫健委完成审核并备案
            </view>
            <view class="dialog-line"/>
            <view 
                class="dialog-confirm"
                @tap="closeDialog"
            >
                我知道了
            </view>
        </c-dialog>
    </view>
</template>

<script>
/**
 * @file 医院信息
 * @author 颜廷熙
 * @categories 业务组件
 * @tags [component]
 */

import CIcon from '@baidu/med-ui/components/Icon/Icon';
import CLabel from '@baidu/med-ui/components/Label/Label';
import CDialog from '@baidu/med-ui/components/Dialog/Dialog';
import {navToBdBoxH5, navigate} from '@utils/navigate';
import {Mars as MarsUtils} from '@baidu/med-utils';
import {ubcSend} from '@utils/log';

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    props: {
        /**
         * 医院数据
         */
        hospital: {
            type: Object,
            default: () => ({})
        },

        /**
         * 医生名称
         */
        doctor: {
            type: String,
            default: ''
        },

        /**
         * 医院索引
         */
        index: Number,

        /**
         * 无号提示
         */
        tips: {
            type: String,
            default: ''
        },

        /**
         * 无号引导跳转提示
         */
        guideTips: {
            type: Object,
            default: () => {}
        },

        /**
         * 弹窗内容
         */
        tipsPrompt: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            showDialog: false,
            dialogBtnOpts: [
                {
                    text: '确认',
                    color: '#00C8C8',
                    bold: '500',
                    fontSize: '0.17rem',
                    event: 'sure'
                }
            ],
            dialogContent: '',
            dialogType: '',
            showIdentify: false
        };
    },
    computed: {
        showTips() {
            return this.index === 0 && this.tips && this.tips.length;
        },
        showGuideTips() {
            return this.index === 0 && this.guideTips && this.guideTips.tip;
        },
        isGray() {
            return this.hospital.hospitalNature === '公立医院' && this.hospital.hospitalText === '无号';
        }
    },
    components: {
        CLabel,
        CDialog,
        CIcon
    },
    mounted() {
        // 引导跳转第三方提示展现
        if (this.showGuideTips) {
            ubcSend({
                type: 'view',
                value: 'other_platform',
                ext: {
                    pd: 'gh'
                }
            });
        }
    },
    methods: {
        // 无排班解释
        handleTipTap() {
            this.dialogContent = this.tipsPrompt;
            this.showDialog = true;
            this.dialogType = 'tips';
            ubcSend({
                type: 'clk',
                value: 'btn_explain'
            });
        },
        // 公立非公立解释
        handleHospitalTipTap(hospitalNature) {
            const dialogTip = hospitalNature === '公立'
                ? '公立医院是指政府举办的纳入财政预算管理的医院，也就是国营医院、国家出钱办的医院。也可以理解成国立。'
                : '非政府公办的，具有私人性质的医院。民营医院大部分是由社会出资以营利性机构为主导所办立的卫生机构；也有少数为非营利机构，享受政府补助。';
            this.dialogContent = dialogTip;
            this.dialogBtnOpts = [
                {
                    text: '我知道了',
                    color: '#00C8C8',
                    bold: '500',
                    fontSize: '0.17rem',
                    event: 'sure'
                }
            ];
            this.showDialog = true;
            this.dialogType = 'tips';
        },
        JumpTo() {
            navigate({
                url: this.guideTips.url,
                log: {
                    type: 'clk',
                    value: 'other_platform',
                    ext: {
                        pd: 'gh'
                    }
                }
            });
        },
        handleCloseDialog() {
            this.showDialog = false;
            this.dialogType = '';
        },
        handleHospitalTap() {
            ubcSend({
                type: 'clk',
                value: this.hospital.hospitalNature + '_' + this.hospital.hospitalName
            });
            if (this.hospital.hospitalUrl) {
                MarsUtils.navigate({
                    url: this.hospital.hospitalUrl,
                    extra: {
                        mod: `appoint-hospital-${this.index}`
                    }
                });
            } else {
                this.$api.showToast({
                    title: '该医院的主页正在开通中，敬请期待~',
                    icon: 'none'
                });
            }
        },
        handleDialogButtonTap({btn}) {
            if (btn && btn.event === 'sure' && this.dialogType === 'map') {
                this.openMap({
                    ...this.hospital.hospitalGps,
                    name: this.hospital.hospitalName,
                    scale: 17
                });
            }
        },
        openMap(conf) {
            if (!conf.latitude || !conf.longitude) {
                this.$api.showToast({
                    title: '调起地图失败',
                    icon: 'none'
                });
                return;
            }
            const api = 'https://api.map.baidu.com/marker';
            /* eslint-disable max-len */
            const url = `${api}?location=${conf.latitude},${conf.longitude}&zoom=${conf.scale}&title=${conf.name || '我的位置'}&content=${conf.name || ''}&output=html&src=webapp.baidu.smartapp`;
            /* eslint-disable max-len */
            navToBdBoxH5(url);
        },
        handleClick() {
            ubcSend({
                type: 'clk',
                value: 'dd_attes',
                ext: {
                    pd: 'gh'
                }
            });
            this.showIdentify = true;
        },
        closeDialog() {
            this.showIdentify = false;
        }
    }
};
</script>
<style lang="less" scoped>
.appointlist-hospital-info {
    padding: .15rem 0 0 0;
    &__more {
        margin-left: -4px;
    }
    &__link {
        display: inline;
    }
    &__header {
        display: flex;
        position: relative;
        padding-bottom: 0.09rem;

        &__label {
            padding: .02rem 0 0;
            height: .48rem;
            background: #00C8C8;
            border-radius: 0 .05rem .05rem 0;
            color: #FFF;
            font-size: .12rem;
            writing-mode: vertical-lr;
            letter-spacing: .03rem;
            text-align: center;
            line-height: .2rem;
            flex: 0 0 auto;
        }

        &__info {
            margin-left: .1rem;
            margin-right: .67rem;

            &__title {
                .hospital-nature {
                    background: rgba(0, 200, 200, .10);
                    border-radius: .285rem;
                    padding: 0 .09rem;
                    height: .19rem;
                    line-height: .2rem;
                    font-size: .12rem;
                    color: #00C8C8;
                    text-align: center;
                    margin-left: .06rem;
                    font-weight: bold;
                    display: flex;
                    justify-content: center;
                    margin-top: -0.01rem;
                }
            }

            &__labels {
                margin-left: -3px;
                margin-top: 2px;
            }
        }

        &__right_arrow {
            position: absolute;
            top: 6px;
            right: 1px;
            width: .07rem;
            height: .12rem;
            background: url(https://b.bdstatic.com/searchbox/icms/searchbox/img/look-more-hospital.png) no-repeat center;
            background-size: 100% auto;
        }
    }

    &__calendar {
        padding: 0 .13rem .15rem;
    }

    &__tips {
        background: #FFF6DA;
        border-radius: 0.05rem;
        height: .53rem;
        line-height: .53rem;
        text-align: center;
        color: #999;
        font-size: .13rem;
        display: inline-block;
        &__icon {
            display: inline-block;
            color: #FF9500;
            .icon-flex {
                display: flex;
                align-items: center;
                justify-content: center;
                margin-top: .01rem;
            }
        }
    }

    .btn-slot {
        font-size: .17rem;
    }
    .hospital-title {
        white-space: normal;
    }
    .hospital-identify {
        position: relative;
        top: -2px;
        margin-left: 0.06rem;
        display: inline-block;
        width: 0.54rem;
        height: 0.19rem;
        background: rgba(0,200,200,0.1);
        border-radius: 9.5px;
        text-align: center;
        color: #00C8C8;
        font-weight: bold;
    }
    .dialog-content {
        font-size: 0.15rem;
        line-height: 0.15rem;
        text-align: center;
        color: #525252;
        padding: .3rem .2rem;
    }
    .dialog-line {
        height: 1px;
        background: #F1F1F1;
    }
    .dialog-confirm {
        font-family: PingFangSC-Medium;
        font-weight: bold;
        font-size: 0.17rem;
        color: #00C8C8;
        text-align: center;
        line-height: 0.17rem;
        padding-top: 0.14rem;
        padding-bottom: 0.14rem;
    }
}
</style>
