<template>
    <view>
        <view v-if="item.topTitle" class="c-gap-inner-bottom c-color-gray">
            {{ item.topTitle }}
        </view>
        <view v-if="item.topTitle" class="c-line-bottom pl-sv-hor-line"/>
        <!-- 服务列表 -->
        <view
            :class="item.resultType === 'wzCard'
            ? 'pl-sv-list-wrap c-gap-inner-top-small c-gap-inner-bottom-small'
            : ''"
        >
            <view
                v-for="(card, i) in list"
                :key="i"
                class="pl-sv-row"
                :class="item.resultType === 'wzCard' ? 'c-gap-inner-top c-gap-inner-bottom' : ''"
                @tap="onTapItem(card, i)"
            >
                <view class="pl-sv-left">
                    <view class="pl-sv-icon-wrap">
                        <c-avatar
                            :src="card.icon"
                            mode="widthFix"
                            :size="48"
                            class="pl-sv-icon c-span-middle"
                        />
                    </view>
                    <view class="pl-sv-wrap c-gap-inner-left">
                        <view>
                            <text
                                v-if="card.title"
                                class="pl-sv-color c-font-medium c-inline-block pl-sv-bold"
                                :class="{
                                    'c-gap-right': card.tag,
                                }"
                            >{{ card.title }}</text>
                            <c-label
                                v-if="card.tag"
                                :text="card.tag"
                                color="red"
                                class="c-inline-block pl-sv-tag"
                            />
                        </view>
                        <view class="c-line-clamp1 c-color-gray">
                            <text
                                v-for="(s, idx) in card.sub"
                                v-if="card.sub && card.sub.length > 0"
                                class="c-color-gray c-font-small"
                            >
                                <text>{{ s }}</text>
                                <text
                                    v-if="idx < card.sub.length - 1"
                                    class="pl-sv-line c-gap-left-small c-gap-right-small"
                                />
                            </text>
                        </view>
                    </view>
                </view>
                <view class="c-span-middle pl-sv-row-right">
                    <view
                        class="pl-tar pl-sv-row-right-inner"
                    >
                        <text>
                            <text
                                v-if="card.orgPrice"
                                class="c-color-gray pl-sv-under c-font-13 c-inline-block"
                            >{{ card.orgPrice }}</text>
                            <text
                                v-if="card.priceText"
                                class="c-color-orange c-gap-left-small c-font-medium c-inline-block pl-sv-bold"
                            >{{ card.priceText }}</text>
                        </text>
                        <c-icon
                            name="right"
                            font-size="14px"
                            class="pl-sv-arrow c-gap-left-small c-color-gray c-inline-block"
                        />
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
/**
* @file 问诊列表推随机三甲
* @author huanghongwei
@categories 业务组件
* @tags [component]
*/
import {navigate} from '../../utils/navigate';

import CAvatar from '@baidu/med-ui/components/Avatar/Avatar';
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import CLabel from '@baidu/med-ui/components/Label/LabelOld';
import {ubcSend} from '@utils/log';

export default {
    config: {
        component: true
    },
    props: {
        /**
         * 问诊列表数据
         */
        item: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
            list: [], // 推荐列表
            chkBtn: {} // 选中的选项
        };
    },
    watch: {
        item() {
            this.initCard();
        }
    },
    created() {
        this.initCard();
        if (this.item.resultType === 'phoneClinicCard') {
            ubcSend({
                type: 'view',
                value: 'dingxiang_access'
            });
        }
    },
    components: {
        CAvatar,
        CLabel,
        CIcon
    },
    methods: {
        // 确认继续
        onTapItem(card) {
            if (card.msUrl || card.sfUrl) {
                if (this.item && this.item.resultType === 'phoneClinicCard') {
                    ubcSend({
                        type: 'clk',
                        value: 'dingxiang_access'
                    });
                    navigate({url: card.msUrl || card.sfUrl});
                } else {
                    const __params = Object.assign({}, {url: card.msUrl || card.sfUrl}, {
                        log: {
                            type: 'clk',
                            value: 'wenyishengka'
                        }
                    });
                    navigate(__params);
                }
            }
        },
        initCard() {
            // 推荐列表
            let list = [];
            if (this.item.list && this.item.list.length) {
                list = this.item.list;
            }
            else {
                list = [this.item];
            }
            this.list = list.map(d => {
                return Object.assign({}, d, {
                    sub: (d.sub || '').split(/\|/)
                });
            });
        }
    }
};
</script>

<style lang="less" scoped>
.pl-tar {
    text-align: right;
    margin-top: -13px;
}

.pl-sv-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pl-sv-left {
    display: flex;
    align-items: center;
}

.pl-sv-icon-wrap {
    height: 100%;
    display: flex;
    align-items: center;
    float: left;
}

.pl-sv-icon {
    display: flex;
    justify-content: center;
}

.pl-sv-hor-line {
    margin-left: -.15rem;
    margin-right: -.15rem;
}

.pl-sv-list-wrap {
    margin-bottom: -.15rem;
}

.pl-sv-under {
    text-decoration:line-through;
}

.pl-sv-wrap {
    overflow: hidden;
}

.pl-sv-bold {
    font-weight: 600;
}

.pl-sv-color {
    color: #333;
}
.pl-sv-row-right {
    position: relative;
}
.pl-sv-row-right-inner {
    position: absolute;
    right: 0;
    top: 50%;
    white-space: nowrap;
}

.pl-sv-line {
    border-left: 1px solid #f6f6f6;
}

.pl-sv-arrow {
    color: #ddd;
}
</style>
