<template>
    <view>
        <view 
            v-for="(visitItem, visitIndex) in visit.list"
            :key="visitIndex"
            class="visitInfo-container"
            @tap="docVisitInfo(visit.url)"
        >
            <view class="visitInfo-details c-color-title">
                <view class="visitInfo-details-logo c-gap-right-xsmall">
                    <c-icon class="icon-size" name="location-new"/>
                </view>
                <!-- 医院名称 -->
                <view v-if="visitItem.hospital" class="visitInfo-details-name c-font-medium-less c-line-clamp1 c-gap-right-middle">
                    {{ visitItem.hospital }}
                </view>
                <!-- 标签 -->
                <view v-if="visitItem.tag" class="visitInfo-details-tags">
                    <c-label
                        :text="visitItem.tag" 
                        :color="visitItem.onePractice ? 'box_green' : 'box_gray'"
                        class="c-gap-right" 
                    />
                </view>
            </view>
            <!-- 出诊时间 -->
            <view>
                <view 
                    v-if="visitItem.time && visitItem.time.length > 0" 
                    class="visitInfo-time c-font-normal"
                >
                    <view v-if="visitItem.text">
                        <c-icon class="c-gap-right-xsmall icon-size" name="clock-circle"/>{{ visitItem.text }}：
                    </view>
                    <view class="visitInfo-time-details  c-line-clamp1">
                        <text 
                            v-for="(item, itemIndex) in visitItem.time" 
                            :key="itemIndex"
                        >
                            <text class="visitInfo-time-details-text">{{ item }}</text><text v-if="itemIndex !== visitItem.time.length - 1" class="visitInfo-time-details-line">|</text>
                        </text>
                    </view>
                </view>
                <!-- 分割线 -->
                <view 
                    v-if="visit.list.length > 1"
                    class="c-line-superfine-after c-gap-top-middle c-gap-bottom-middle"
                />
            </view>
        </view>
        <!-- 查看更多 -->
        <view
            class="c-font-normal info-more"
            @tap="docVisitInfo(visit.url)"
        >
            {{ visit.text }}
        </view>
    </view>
</template>

<script>
import CLabel from '@baidu/med-ui/components/Label/Label';
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import {navigate} from '../../utils/navigate';

export default {
    config: {
        component: true
    },
    date() {
        return {};
    },
    props: {
        visit: {
            type: Object,
            default: () => ({})
        },
        // UBC日志必传字段page
        page: {
            type: String,
            default: ''
        }
    },
    components: {
        CLabel,
        CIcon
    },
    methods: {
        // 跳转医生出诊信息页
        docVisitInfo(api) {
            if (!api) {
                return;
            }
            if (api) {
                navigate({
                    url: api,
                    log: {
                        page: this.page,
                        type: 'clk',
                        value: 'ChuZhenXinXi'
                    }
                });
            }
        }
    },
};
</script>

<style lang="less" scoped>

.visitInfo {

    &-title {
        font-weight: 700;
    }
    &-details {
        display: flex;
        align-items: center;
        padding-bottom: 1px;

        &-tags {
            flex-shrink: 0;
        }
    }
    &-time {
        display: flex;
        align-items: center;
        overflow: hidden;

        &-details {
            margin-top: 1px;
            flex: 1;
            &-line {
                color: rgb(241, 241, 241);
                display: inline-block;
                margin-right: 5px;
                margin-left: 5px;
            }
        }
    }
}
.info-more {
    text-align: center;
}
.icon-size {
    font-size: 14px;
}
</style>
