<template>
    <div>

        <div class="swipe">

            <van-swipe
                    :autoplay="3000"
                    indicator-color="white"
            >
                <van-swipe-item v-for="(image, index) in images" :key="index">

                    <van-image fit="cover" :src="image">
                        <template v-slot:error>图片加载失败...</template>
                        <template v-slot:loading>
                            <van-loading
                                    type="spinner"
                                    style="text-align: center;line-height: 2.6rem;"
                                    size="40"
                            />
                        </template>
                    </van-image>

                </van-swipe-item>
            </van-swipe>

        </div>



        <div class="ctn">
            <div>
                <h3 class="title">{{HospitalData.HospitalName ? HospitalData.HospitalName :'未知' }}</h3>
                <p class="tag">{{HospitalData.HospitalLevel | filterHospitalLevel}}</p>
            </div>
            <a class="option"  :href="'tel:'+HospitalData.HospitalPhone">
                <van-icon name="phone" />
                <u>
                    {{HospitalData.HospitalPhone?HospitalData.HospitalPhone:'未设置'}}
                </u>
                <span>拨打电话</span>
            </a>
            <a class="option" target="_blank" :href="'http://api.map.baidu.com/geocoder?address='+HospitalData.Address+'&output=html&src=webapp.baidu.openAPIdemo'">
                <van-icon name="location" />
                <u>
                    {{HospitalData.Address?HospitalData.Address:'未设置'}}
                </u>
                <span>一键导航</span>
            </a>

            <div class="hospital">
                <p>医院简介</p>
                <div :class="HospitalRemark ? 'hide' :''">
                    {{HospitalData.HospitalRemark?HospitalData.HospitalRemark:'暂未设置'}}
                </div>
                <van-icon v-if="HospitalRemark && HospitalData && HospitalData.HospitalRemark.length > 500" @click="HospitalRemark = !HospitalRemark" class='hideOshow' name="arrow-down" />
                <van-icon v-if="!HospitalRemark" @click="HospitalRemark = !HospitalRemark" class='hideOshow' name="arrow-up" />
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        name: "HospitalDetail",
        data(){
            return{
                id:'', // 医院ID
                HospitalData:'',
                HospitalRemark:true,
                images: [
                    require('../../assets/images/HospitalDetailDefault.jpg'),
                    require('../../assets/images/HospitalDetailDefault.jpg')
                ]
            }
        },
        created() {
            this.id = this.$route.query.id;
            this.GetHospital();
        },
        methods:{
            GetHospital(){
                this.$http.GetHospital(this.id).then(res=>{
                    console.log(res);
                    if(res.data.IsSuccess){

                        var data =  res.data.ResultObject;

                        this.HospitalData = data;
                        if(data.FileList.length !== 0){
                            this.images = [];
                            data.FileList.forEach((item,index)=>{
                                this.images.push(item.AccessoryUrl)
                            })
                        }
                    }else{
                        this.$toast(res.data.ResultMsg)
                    }
                })
            }
        }
    }
</script>

<style lang="less" scoped>

    .tag{
        height: 0.38rem;
        display: inline-block;
        border-radius: 15px;
        background: -webkit-gradient(linear, left top, right bottom, from(#ff8b02), to(#ff6600));
        background: linear-gradient(left top, #ff8b02, #ff6600);
        text-align: center;
        line-height: 0.38rem;
        font-size: 0.22rem;
        color: #ffffff;
        vertical-align: bottom;
        padding: 0 .1rem;
        margin-bottom: .2rem;
    }

    .ctn{
        text-align: left;
        width: 7.5rem;
        margin: 0 auto;
        box-sizing: border-box;
        min-width: 7.5rem;
        max-width: 7.5rem;
        padding: .2rem .3rem;
        .title{
            font-size: .38rem;
            color: #333333;
            margin-bottom: .2rem;
        }
        .option{
            display: block;
            width: 100%;
            font-size: .26rem;
            color: #666666;
            line-height: 1.3;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: .2rem;
            >u{
                word-wrap:break-word;
                text-decoration: none;
                width: 5rem;
            }
            >span{
                font-size: .28rem;
                color: #4ca0ff;
                min-width: 1.2rem;
            }
            i{
                display: inline-block;
                vertical-align: text-bottom;
                color: #fff;
                background: #4ca0ff;
                border-radius: 50%;
                padding: 0.03rem;
                box-sizing: border-box;
                display: inline-block;
                margin-right: .1rem;
                width: .4rem;
                height: .4rem;
                text-align: center;
                line-height: .4rem;
            }
        }
    }
    .hospital{
        margin-top: 0.8rem;
        >div{
            font-size: .26rem;
            color: #666666;
            line-height: 1.2;
        }
        p{
            font-size: .28rem;
            color: #333333;
            margin-bottom: .2rem;
        }
    }
    .hide {
        display: -webkit-box;
        -webkit-line-clamp: 20;
        line-clamp: 20;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .hideOshow{
        display: block;
        text-align: center;
        margin-top: .1rem;
        font-size: .4rem;
    }
    .swipe{
        width: 100%;
        height: 3.2rem;
        div{
            width: 100%;
            height: 100%;
            img{
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
        }

    }
</style>
