<template>
    <view
        v-if="packageInfo"
        class="pack-item"
        :style="itemStyle"
    >
        <view
            v-if="img"
            class="pack-item__tag"
            :style="{backgroundImage: 'url(' + img + ')'}"
        />
        <view style="height: 100%" class-name="pack-item-height">
            <view
                class="pack-item-cont"
                :style="{'flex-direction': layout}"
                @tap="toOrder(packageInfo.url)"
            >
                <view
                    class="pack-item-img"
                    :style="{
                        backgroundImage: 'url(' + packageInfo.img + ')',
                        width: imageStyle.width,
                        height: imageStyle.height ? imageStyle.height : imageStyle.width,
                        borderRadius: imageStyle.borderRadius,
                    }"
                />
                <view
                    class="pack-item-right"
                    :style="{
                        padding: layout === 'column' ? '0rem 0.13rem' : '0 0.13rem 0 0.10rem',
                    }"
                >
                    <view
                        class="pack-item-name c-line-clamp2"
                        :class="{
                            'c-gap-top-small': layout === 'column',
                        }"
                    >{{ packageInfo.name }}</view>
                    <!-- 机构名称 -->
                    <view class="c-color-gray c-font-normal">
                        <view class="c-inline c-gap-right">{{ packageInfo.address }}提供</view>
                        <view class="c-inline">{{ packageInfo.sales }}</view>
                    </view>
                    <view v-if="packageInfo.tags && packageInfo.tags.length" class="pack-tag-wrapper">
                        <c-label
                            v-for="(item, index) in packageInfo.tags"
                            :key="index"
                            :text="item.text"
                            font-size="0.12rem"
                            height="0.14rem"
                            line-height="0.14rem"
                            color="#999"
                            :background-color="item.backgroundColor ? item.backgroundColor : '#fff'"
                            :border-color="item.borderColor"
                            custom
                            class="c-gap-right-small c-gap-bottom-small"
                        />
                    </view>
                    <view
                        v-if="packageInfo && packageInfo.price"
                        class="pack-price"
                        :style="{
                            marginTop: '0.10rem',
                        }"
                    >
                        <!-- 亿元补贴活动价 -->
                        <view class="act-price">
                            <view class="c-font-normal c-color-gray">
                                <view class="price c-gap-inner-left-small">¥{{ packageInfo.price }}</view>
                            </view>
                            <view class="act-price-img">
                                <view class="c-inline pack-price-lowest price">
                                    <span class="c-font-normal pack-price-symbol-color font-medium">￥</span>
                                    <span class="pack-price-now">
                                        <text>{{ packageInfo.couponPrice }}</text>
                                    </span>
                                </view>
                            </view>
                            <view class="c-font-normal act-price-row">
                                <view class="c-inline c-color-gray">全网低价</view>
                                <view class="c-inline pack-price-symbol-color act-price-text">补贴价</view>
                            </view>
                        </view>
                        <view class="pack-price-btn c-gap-left-large">
                            <c-button
                                type="primary"
                                :background="btnColor"
                                border-radius="1rem"
                                :height="28"
                                :font-size="14"
                                auto
                            >
                                立即预定
                            </c-button>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

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

/* global Page swan  getApp */
import CLabel from '@baidu/med-ui/components/Label/LabelOld';
import CButton from '@baidu/med-ui/components/Button/Button';
import {navigate} from '@utils/navigate';

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        CLabel,
        CButton
    },
    props: {
        /**
         * 套餐信息
         */
        packageInfo: {
            type: Object,
            default: () => {
                return {
                    id: '',
                    url: '',
                    name: '',
                    img: '',
                    sales: '',
                    tags: [],
                    address: '',
                    price: '',
                    couponPrice: ''
                };
            }
        },
        /**
         * 按钮颜色
         */
        btnColor: {
            type: String,
            default: '#FF6161'
        },
        /**
         * 自定义套餐item颜色
         */
        itemStyle: {
            type: Object,
            default: () => ({
                'margin-bottom': '0.10rem'
            })
        },
        /**
         * 日志
         */
        log: {
            type: String,
            default: ''
        },
        /**
         * imageStyle
         */
        imageStyle: {
            type: Object,
            default: () => {
                return {
                    width: '28.34vw',
                    height: '28.34vw'
                };
            }
        },
        /**
         * layout
         */
        layout: {
            type: String,
            default: 'row'
        },
        /**
         * tag图片
         */
        img: {
            type: String,
            require: false,
            default: ''
        }
    },
    methods: {
        toOrder(url) {
            navigate({url});
        }
    }
};
</script>
<style lang="less" scoped>
.pack-item {
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 0.08rem;
    padding-top: 0.15rem;
    padding-left: 0.13rem;
    padding-bottom: 0.08rem;
    position: relative;
    &:first-child {
        border-radius: 0 0 0.08rem 0.08rem;
    }

    &__tag {
        position: absolute;
        left: 0.08rem;
        top: 0;
        width: 35px;
        height: 40px;
        background-size: contain;
        background-repeat: no-repeat;
    }

    &-cont {
        display: flex;
        height: 100%;
    }
    &-right {
        width: 100%;
        padding-right: 0.13rem;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        flex: 1;
    }
    &-img {
        width: 28.34vw;
        height: 28.34vw;
        border-radius: 0.08rem;
        background-size: 100% 100%;
        flex-shrink: 0;
    }
    &-name {
        font-size: 0.16rem;
        line-height: 0.24rem;
        // font-family: PingFangSC-Medium;
        margin-bottom: 0rem;
        color: #1f1f1f;
    }
}
[class*='_pack-item-height'] {
    height: 100%;
}

.pack-tag {
    display: inline;
    border-radius: 0.08rem;
    margin-right: 0.05rem;
    padding: 0 0.05rem;
    word-break: keep-all;
    margin-bottom: 0.04rem;
    line-height: 0.14rem;
    border: 0.01rem solid #f1f1f1;
    color: #999;
}
.pack-price {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    &-symbol {
        font-size: 0.13rem;
        color: #fd503e;
        line-height: 0.1rem;
        font-weight: 550;
    }
    &-now {
        font-weight: 550;
        font-size: 0.19rem;
        color: #fd503e;
        line-height: 0.16rem;
    }
    &-store {
        font-size: 0.13rem;
        color: #858585;
        text-decoration: line-through;
        margin-left: 0.04rem;
    }
    &-symbol-color {
        color: #fd503e;
    }
    &-after {
        font-weight: bold;
    }
    .act-price {
        width: 100%;
        .price {
            margin-top: 0.05rem;
            line-height: 0.2rem;
        }
    }
    .act-price-row {
        display: flex;
        justify-content: space-between;
        line-height: 0.2rem;
        padding-bottom: 0.02rem;
    }
    .act-price-img {
        width: 100%;
        height: 5.6vw;
        background: url('https://med-fe.cdn.bcebos.com/vaccine/dc572f0656ed56daacc645ccdf2aa948.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        text-align: right;
    }
    .act-price-text {
        width: 0.58rem;
        text-align: center;
        padding-right: 0.04rem;
    }
    &-btn {
        flex-shrink: 0;
        position: relative;
        bottom: 0.05rem;
    }
    &-lowest {
        position: relative;
        bottom: 0.09rem;
        display: inline-block;
        min-width: 0.7rem;
        text-align: center;
        padding-right: 0.04rem;
    }
}
.font-medium {
    font-family: PingFangSC-Semibold;
}
@media only screen and (max-width: 360px) {
    .act-price-row {
        font-size: 0.13rem;
    }
}
</style>
