<template>
    <view v-if="list && list.length" class="ala-recommend-hospital">
        <view
            v-if="index === 0"
            class="ala-recommend-hospital-header"
            @tap="headerClick"
        >
            <view v-if="header.title" class="c-font-large bold">
                {{ header.title }}
            </view>
            <view v-if="header.subTitle" class="c-font-normal">
                {{ header.subTitle }}
            </view>
        </view>
        <view v-else>
            <view class="ala-recommend-hospital-header-weaken" @tap="headerClick">
                <view class="c-color-title c-font-17 bold">
                    医院
                </view>
            </view>
            <view class="c-line-superfine-after"/>
        </view>
        <view>
            <view v-for="(item,index) in list" :key="index">
                <ala-hospital
                    :key="index"
                    :hospital="item"
                />
                <view 
                    :class="{'c-line': index !== list.length - 1}"
                >
                    <view class="c-line-superfine-after"/>
                </view>
            </view>
        </view>
        <view class="ala-recommend-hospital-bottom" @tap="goRecommendList">
            <view class="c-gap-right-xsmall">
                查看更多
            </view>
            <view class="ala-recommend-hospital-bottom-icon">
                <c-icon
                    name="right"
                    color="#1F1F1F"
                    class="icon"
                />
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @file ala 医院推荐列表
 * @author 赵强
 */
import AlaHospital from '../zyy/hospital-new-card';
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import {navigate} from '../../utils/navigate';
export default {
    config: {
        component: true
    },
    components: {
        AlaHospital,
        CIcon
    },
    props: {
        hospitalInfo: {
            type: Object,
            default: () => {}
        },
        index: {
            type: Number,
            default: 0
        }
    },
    watch: {
        hospitalInfo: {
            immediate: true,
            handler(val) {
                this.init(val);
            }
        }
    },
    data() {
        return {
            header: {},
            list: [],
            moreUrl: '',
            headerUrl: ''
        };
    },
    methods: {
        init (val) {
            this.header = val.header;
            this.moreUrl = val.footer && val.footer.moreUrl && val.footer.moreUrl.url;
            this.headerUrl = val.url;
            if (val.list && val.list.length) {
                this.list = val.list.map((res, index)=> {
                    let tags = [];
                    let labelText = [];
                    let rankAreaUrl = '';
                    let reseon = '';
                    if (res.sanjiaFlag == '1') {
                        tags.push('三甲');
                    };
                    if (res.tags && res.tags.length) {
                        tags = tags.concat(res.tags);
                    };
                    if (res.moreTagData && res.moreTagData.list && res.moreTagData.list.length) {
                        labelText = res.moreTagData.list.map(labelRes => {
                            return {
                                label: labelRes.type,
                                text: labelRes.text
                            };
                        });
                        rankAreaUrl = res.moreTagData.url;
                    };
                    if (res.reason && res.reason.length) {
                        reseon = res.reason.map(res => {
                            return '“' + res +  '”';
                        }).join(' ');
                    };
                    return {
                        hospitalName: res.name,
                        logo: res.image,
                        tags: tags,
                        address: res.address,
                        distance: res.distance,
                        reason: reseon,
                        labelText: labelText,
                        unifiUrl: res.url,
                        rankAreaUrl: rankAreaUrl
                    };
                });
            };
        },
        goRecommendList () {
            navigate({
                url: this.moreUrl,
                log: {
                    type: 'clk',
                    value: 'search_more_recommend'
                }
            });
        },
        headerClick () {
            navigate({
                url: this.headerUrl,
                log: {
                    type: 'clk',
                    value: 'search_header_recommend'
                }
            });
        }
    }
};
</script>
<style lang="less" scoped>
    .ala-recommend-hospital {
        border-radius: 12px;
        margin-bottom: 0.1rem;
        background: #ffffff;
        padding-bottom: 10px;
        .bold {
            font-weight: bold;
        }
        .ala-recommend-hospital-header {
            color: #fff;
            border-radius: 12px 12px 0 0;
            padding: 17px 13px 14px;
            background-image: linear-gradient(134deg, #00CFA3 0%, #05CFCD 61%, #00D3EA 100%);
        }
        .ala-recommend-hospital-header-weaken {
            padding: 0.1rem 0.13rem;
            background: #fff;
            border-radius: 12px 12px 0 0;
        }
        .c-line {
            padding: 0 13px;
        }
        .ala-recommend-hospital-bottom {
            color: #1F1F1F;
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding-top: 10px;
            .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>
