<template>
    <view class="pack-item c-gap-inner-top-large" :style="itemStyle">
        <c-navigate
            :url="packageInfo.url"
            :extra="{type: 'sku-item', level1: log}"
            :log="ubcLogSearchAll"
        >
            <view class="pack-item-cont">
                <view 
                    class="pack-item-img"
                    :style="{backgroundImage: 'url(' + packageInfo.img + ')'}"
                />
                <!-- 疫苗角标列表 -->
                <view
                    v-if="packageInfo.cornerMark && JSON.stringify(packageInfo.cornerMark) !== '[]'"
                    class="pack-item-name__jb"
                    :style="{
                        backgroundImage: 'url(' + packageInfo.cornerMark.cornerAndBorder + ')',
                        backgroundRepeat: 'no-repeat',
                        width: '0.8rem',
                        height: '0.8rem',
                        position: 'absolute',
                        left: '13px',
                        top: 0,
                        backgroundSize: 'contain',
                        borderRadius: '8px',
                    }"
                />
                <view class="pack-item-right c-gap-inner-left">
                    <view class="pack-item-name">{{ packageInfo.name }}</view>
                    <view
                        v-if="packageInfo.packageTags && packageInfo.packageTags.length"
                        class="pack-tag-wrapper"
                    >
                        <c-label
                            v-for="(item, index) in packageInfo.packageTags"
                            :key="index"
                            :text="item.text"
                            :color="item.color || '#999'"
                            bg-color="#fff"
                            custom
                            class="c-gap-right-small"
                        />
                    </view>
                    <view class="pack-price">
                        <view 
                            v-if="packageInfo && packageInfo.price" 
                            class="pack-price-wrapper"
                        >
                            <view class="c-inline pack-price-symbol">￥</view>
                            <view class="c-inline pack-price-now">{{ packageInfo.price.nowPrice }}</view>
                            <view v-if="packageInfo.price.storePrice" class="c-inline pack-price-store">
                                <text class="c-font-small">￥{{ packageInfo.price.storePrice }}
                                </text></view>
                        </view>
                        <view 
                            v-if="packageInfo && packageInfo.sales"
                            class="c-inline pack-sales"
                        >
                            {{ packageInfo.sales }}
                        </view>
                    </view>
                </view>
            </view>
        </c-navigate>
        <c-navigate
            v-if="packageInfo.agency"
            :url="packageInfo.agency.unifUrl"
            :extra="{type: 'sku-item-agency', level1: log}"
            :log="ubcLogSearchAll"
        >
            <view class="pack-hosp c-gap-inner-left-large">
                <view class="pack-hosp-name">
                    <text class="m-icon m-icon-dianpu c-font-15 c-gap-right-small"/>
                    <text class="text">{{ packageInfo.agency.name }}</text>
                </view>
                <c-navigate
                    v-if="packageInfo.button"
                    :url="packageInfo.url"
                    :extra="{type: 'sku-item-btn', level1: log}"
                    :log="ubcLogSearchAll"
                >
                    <c-button
                        type="primary"
                        :background="btnColor"
                        border-radius="100px"
                        :height="25"
                        :font-size="12"
                        auto
                        :disabled="packageInfo.button.soldOut != 1"
                    >
                        {{ packageInfo.button.buttonText }}
                    </c-button>
                </c-navigate>
                <view v-else class="pack-hosp-distance">
                    <view class="c-gap-right-small">{{ packageInfo.agency.distance }}</view>
                    <c-icon name="right" font-size="15px"/>
                </view>
            </view>
        </c-navigate>
    </view>
</template>

<script>
/**
 * @file 精选套餐Item
 * @author zhanngqian51@baidu.com
 * @categories 业务组件
 * @tags [component]
*/

/* global Page swan  getApp */
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import CLabel from '@baidu/med-ui/components/Label/LabelOld';
import CButton from '@baidu/med-ui/components/Button/Button';
import CNavigate from '../common/navigate';

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        CIcon,
        CLabel,
        CButton,
        CNavigate
    },
    props: {
        // 套餐信息
        packageInfo: {
            'type': Object,
            'default': () => {}
        },
        // 按钮颜色
        btnColor: {
            type: String,
            default: '#FF6161'
        },
        // 自定义套餐item颜色
        itemStyle: {
            'type': Object,
            'default': () => ({
                'box-shadow': '0 10px 50px 0 rgba(0,0,0,0.06)',
                'margin-bottom': '20px'
            })
        },
        // 日志
        log: {
            type: [Object, String],
            default: () => ({})
        },
        ubcLogSearchAll: {
            type: Object,
            default: () => ({})
        }
    }
};
</script>
<style lang="less" scoped>
    .pack-item {
        box-sizing: border-box;
        background-color: #fff;
        // margin-bottom: 20px;
        border-radius: 8px;
        &-cont {
            display: flex;
            padding-bottom: 15px;
            padding-left: 13px;
            position: relative;
        }
        &-right {
            width: 100%;
            padding-right: .13rem;
        }
        &-img {
            width: .8rem;
            height: .8rem;
            border-radius: 6px;
            background-size: 100% 100%;
            flex-shrink: 0;
        }
        &-name {
            font-size: 15px;
            line-hgith: 16px;
            color: #333333;
        }
    }
    .pack-tag-wrapper {
        display: flex;
        flex-wrap: wrap;
        margin-top: 3px;
    }
    .pack-tag {
        display: inline;
        border-radius: 8px;
        margin-right: 5px;
        padding: 0 5px;
        word-break: keep-all;
        margin-bottom: 4px;
        line-height: 14px;
        border: 1px solid #f1f1f1;
        color: #999;
    }
    .pack-price {
        display: flex;
        justify-content: space-between;
        margin-top: .08rem;
        &-symbol {
            font-size: 13px;
            color: #ff6050;
            line-height: 10px;
        }
        &-now {
            font-family: Arial-BoldMT;
            font-size: 18px;
            color: #ff6050;
            line-height: 16px;
        }
        &-store {
            font-size: 13px;
            color: #999999;
            text-decoration: line-through;
            margin-left: 6px;
        }
    }
    .pack-sales {
        font-size: 13px;
        color: #999999;
    }
    .pack-hosp {
        // height: .35rem;
        border-top: 1px solid #F1F1F1;
        padding: 8px 13px 8px 13px;
        display: flex;
        align-items: center;
        font-size: 13px;
        line-height: 25px;
        color: #999999;
        justify-content: space-between;
        &-name {
            max-width: 85%;
            display: flex;
        }
        &-distance {
            display: flex;
        }
        .text {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
</style>
