<template>
    <view
        :style="{
            margin: newStatus === 1 ? '0px 13px' : '',
        }"
        class="hospital-showcase-card c-bg-color-white"
    >
        <!-- 信息展示 -->
        <view
            :style="{
                padding: newStatus === 1 ? '0px 0px 15px' : '',
            }"
            class="hospital-showcase-main"
        >
            <view v-if="hospitalName || tags && tags.length || hospitalLogo" class="hospital-showcase-main-inner">
                <!-- 医院徽标 -->
                <view v-if="hospitalLogo" class="hospital-showcase-main-logo">
                    <c-image
                        has-compress
                        :src="hospitalLogo"
                        :extra="{column: 2}"
                        width="0.48rem"
                        height="0.48rem"
                        mode="widthFix"
                        :hack-white-stroke="false"
                    />
                </view>
                <view class="hospital-showcase-main-text">
                    <!-- 医院名称 -->
                    <view class="hospital-showcase-main-caption c-font-wb c-font-big c-row">
                        <text class="c-span12 hospital-showcase-main-caption--label">
                            {{ hospitalName }}
                            <text
                                v-if="isSettledHospital"
                                class="hospital-showcase-main-caption--settled-hospital"
                            >
                                官方入驻
                            </text>
                        </text>
                    </view>
                    <!-- 医院标签 -->
                    <view v-if="tags && tags.length" class="hospital-showcase-main-tags c-font-normal">
                        <view
                            v-for="(tag, index) in tags"
                            :key="'tags' + index"
                            class="c-gap-inner-top-mini"
                        >
                            <view
                                v-if="tag && index < maxLength"
                                class="tag"
                            >
                                {{ tag }}
                            </view>
                        </view>
                        <c-label
                            v-if="auth"
                            text="已认证"
                            color="box_gray"
                            class="auth c-gap-inner-top-xsmall"
                        />
                    </view>
                </view>
            </view>
            <!-- 医院核算检测和发热门诊信息提示 -->
            <h-fever
                v-if="outpatientServices && outpatientServices.length"
                :list="outpatientServices"
            />
            <!-- 排行 -->
            <view v-if="ranks && ranks.length && ranks.length > 0" class="hospital-showcase-main-rank-wrap">
                <swiper
                    vertical
                    circular
                    :duration="1500"
                    :interval="2000"
                    autoplay
                    :style="{
                        height: '.4rem',
                    }"
                >
                    <swiper-item
                        v-for="(rank, rankIndex) in ranks"
                        :key="rankIndex"
                    >
                        <view
                            class="hospital-showcase-main-rank c-font-normal"
                            @tap.stop="handleRankTap(rank.rankType)"
                        >
                            <c-label
                                :text="rank.label"
                                color="green"
                                bg-color="green"
                                border-color="green"
                                class="rank-label"
                            />
                            <text class="rank-text c-gap-left-middle">{{ rank.text }}</text>
                        </view>
                    </swiper-item>
                </swiper>
            </view>
        </view>
        <!-- 排名弹窗 -->
        <c-dialog
            :show="dialog.isShown"
            :title="dialog.title"
            :content="dialog.desc"
            :content-color="dialog.contentColor"
            :btn-opts="dialog.btnOpts"
            :gap-bottom="dialog.gapBottom"
            :gap-slot-bottom="dialog.gapSlotBottom"
            :max-height="dialog.maxHeight"
            @close="handleDialogClose"
        >
            <view slot="title" class="dialog-content-title c-line-clamp1">
                <text class="dialog-text">{{ dialog.rankText }}</text>
                <text class="dialog-rank">{{ dialog.rank }}</text>
            </view>
            <view
                slot="btn"
                class="dialog-btn-slot c-line-clamp1"
                @tap.stop="navigateTo(dialog.url, dialog.urlType)"
            >
                {{ dialog.btnText }}
            </view>
        </c-dialog>
    </view>
</template>

<script>
import CLabel from '@baidu/med-ui/components/Label/Label';
import CDialog from '@baidu/med-ui/components/Dialog/Dialog';
import CImage from '@components/common/image';
import HFever from './Fever';
import * as conf from '@utils/conf';
import {navigate} from '@utils/navigate';
import {request} from '@utils/request';
import * as Log from '../../../utils/log';

export default {
    config: {
        component: true
    },
    props: {
        /**
         * 排名文本
         */
        rankText: String,
        /**
         * 医院名称
         */
        hospitalName: String,
        /**
         * 医院徽标
         */
        hospitalLogo: String,
        /**
         * 是否在页面加载时就显示弹窗
         */
        showDialog: {
            type: Number,
            default: 0
        },
        /**
         * 页面加载时卡传过来显示的弹框类型
         */
        cardRankType: {
            type: String,
            default: ''
        },
        /**
         * 医院标签
         */
        tags: {
            type: Array,
            default: () => []
        },
        /**
         * 排行信息
         */
        ranks: {
            type: Array,
            default: () => []
        },
        /**
         * 是否认证
        */
        auth: {
            type: Boolean,
            default: false
        },
        /**
         * 科室详情页金刚位状态
         */
        newStatus: {
            type: Number,
            default: 0
        },
        specialHospitalName: {
            type: String,
            default: ''
        },
        alaCard: {
            type: Boolean,
            default: false
        },
        outpatientServices: {
            type: Array,
            default: () => ([])
        },
        /**
         * 是否入驻医院
         */
        isSettledHospital: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            api: '/harbor/hospital/fudanrank/applets',
            rankLabelText: '排行',
            dialog: {
                isShown: false,
                btnText: '查看全部排名',
                contentColor: '#555',
                title: '',
                dialogtext: '',
                desc: '',
                btnOpts: [],
                rank: '',
                rankText: '',
                url: '',
                urlType: 2,
                maxHeight: 1,
                gapBottom: 14,
                gapSlotBottom: 20
            },
            maxLength: 4,
            urlType: 0,
            itemLink: ''
        };
    },
    components: {
        CLabel,
        CDialog,
        HFever,
        CImage
    },
    mounted() {
        // 当页面传入参数 showDialog=1 显示排名弹窗,并展示传入参数的数据
        if (this.showDialog === 1) {
            this.fetchDialogData(this.cardRankType);
        }
    },
    methods: {
        sendLog(type) {
            Log.send({
                type: 'l',
                action: 'click',
                extra: {
                    name: `banner(${type})`
                }
            });
        },
        navigateTo(link, type = 0) {
            if (!link) {
                return;
            }
            this.sendLog(type);
            navigate({url: link, urlType: type});
        },
        serviceNavigate(service) {
            let url = '';
            let urlType = 0;
            if (service.swanUrl) { // 沧州市人民医院
                if (process.env.MARS_ENV === 'h5') {
                    url = service.link;
                    urlType = 2;
                } else {
                    url = service.swanUrl;
                    urlType = 1;
                }
            } else {
                url = service.link;
                urlType = service.urlType;
            }
            Log.send({
                type: 'l',
                action: 'click',
                extra: {
                    name: service.tracedata
                }
            });
            navigate({
                url: url,
                urlType: urlType,
                log: {
                    type: 'clk',
                    value: service.tracedata
                }
            });
        },
        fetchDialogData(rankType) {
            request({
                url: conf.goApiHost + this.api,
                data: {
                    hospitalName: this.hospitalName || this.specialHospitalName
                },
                isFirstScreen: false
            }).then(resp => {
                if (resp.data && resp.data.ranklist && resp.data.ranklist.length) {
                    let ranklist = resp.data.ranklist;
                    this.dialog = Object.assign({}, this.dialog, ranklist[rankType] || ranklist[0]);
                    this.dialog.isShown = true;
                }
            });
        },
        handleDialogClose() {
            this.dialog.isShown = false;
        },
        handleRankTap(rankType) {
            Log.send({
                type: 'l',
                action: 'click',
                extra: {
                    name: 'rank'
                }
            });
            // 根据点击值向弹窗发送请求
            this.fetchDialogData(rankType);
        }
    }
};
</script>

<style lang="less" scoped>
.hospital-showcase-card {
    position: relative;
    margin: 8px 10px 0;
    color: #1f1f1f;
    border-radius: .12rem;

    .hospital-showcase-media {
        position: relative;
        width: 100%;

        &.media-video,
        &.media-image {
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            overflow: hidden;
        }

        .swiper-text-wrapper {
            position: absolute;
            right: 8px;
            bottom: 10px;
            height: 18px;
            line-height: 18px;
            color: #fff;
            background: rgba(0, 0, 0, 0.4);
            z-index: 10;

            .swiper-icon,
            .swiper-text {
                display: inline-block;
            }
        }

        .media-backdrop {
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            z-index: 1;
            width: 100%;
            height: 100%;
        }

        .media-play {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 2;
            color: #fff;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

            &--wrapper {
                position: relative;
            }
        }
    }

    .hospital-showcase-main {
        padding: 15px 13px;
        position: relative;

        &-inner {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        &-logo {
            flex: 0 0 auto;
            margin-right: .1rem;
        }

        &-text {
            flex: 1;
        }

        &-caption {
            line-height: 30px;

            .media-default-image {
                background-size: contain;
                background-position: 0 1px;
                background-repeat: no-repeat;
                border-radius: 50%;
                margin-top: -60px;
                margin-left: -15px;
                box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
            }

            &--label {
                display: flex;
                align-items: center;
            }

            &--settled-hospital {
                width: .59rem;
                height: .16rem;
                line-height: .16rem;
                font-size: .12rem;
                color: #fff;
                background: #00c8c8;
                border-radius: .08rem;
                text-align: center;
                margin-left: .08rem;
                flex-shrink: 0;
            }
        }

        &-tags {
            display: flex;
            flex-direction: row;
            line-height: 14px;
            flex-wrap: wrap;

            .tag {
                padding: 0 8px 0 0;
            }

            .auth {
                flex-shrink: 0;
            }
        }
    }

    .hospital-showcase-main-links {
        display: flex;
        flex-direction: row;
        align-content: flex-start;
        margin-top: 6px;
        flex-wrap: wrap;
        width: 100%;

        .link {
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 15px;

            &-image {
                width: 30px;
                height: 30px;

                &-one {
                    margin-right: 10px;
                    height: .57rem;
                    width: .57rem;
                }
            }

            &-text {
                margin-top: 8px;
                font-size: 14px;
            }

            &-btn {
                border: 1px solid #898989;
                border-radius: 42px;
                color: #000;
                padding-top: 0.025rem;
                padding-bottom: 0.025rem;
            }

            &-desc {
                display: block;
                color: #858585;
                font-size: 13px;
            }
        }

        .otherlink {
            display: flex;
            flex-direction: row;
            align-items: center;
        }
    }

    .hospital-showcase-main-rank {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: .09rem .1rem;

        .rank-label {
            top: 0 !important;
            flex: 0 0 auto;
        }

        &-wrap {
            border-radius: .09rem;
            overflow: hidden;
            margin-top: .1rem;
            background: #f5f5f5;
        }
    }

    .dialog-content-title {
        height: 28px;
        line-height: 28px;
        background: #f5f5f5;
        color: #858585;
        padding: 0 10px;
        border-radius: 9px;
        margin-bottom: 15px;

        .dialog-rank {
            color: #00c8c8;
            margin-left: 3px;
        }
    }

    .dialog-btn-slot {
        font-family: PingFangSC-Medium;
        height: 38px;
        line-height: 38px;
        color: #fff;
        font-size: 16px;
        margin: 0 20px 20px;
        border-radius: 20px;
        text-align: center;
        background-image: linear-gradient(to right, #00cfa3 0, #05cfcd 80%, #00d3ea 100%);
    }
}

.link-border {
    position: relative;
    margin-top: 21px;
    padding-right: 15px;

    &::after {
        content: '';
        position: absolute;
        top: -100%;
        bottom: -100%;
        right: -100%;
        left: -100%;
        border: 1px solid rgba(151, 151, 151, .24);
        transform: scale(.333);
        border-radius: 27px;
    }
}
</style>

