<template>
    <view class="pack-item" :style="itemStyle">
        <view
            class="pack-item-cont"
            :style="{'flex-direction': layout}"
            @tap="onItemTap(packageInfo)"
        >
            <view
                class="pack-item-img"
                :style="{
                    'background-image': 'url(' + packageInfo.img + ')',
                    'width': imageStyle.width,
                    'height': imageStyle.height ? imageStyle.height : imageStyle.width,
                    'border-radius': imageStyle.borderRadius,
                } | imgCompress('background-image', {column: 3})"
            />
            <!-- 疫苗列表角标 -->
            <view
                v-if="packageInfo.cornerMark &&
                    JSON.stringify(packageInfo.cornerMark) !== '[]' &&
                    JSON.stringify(packageInfo.cornerMark) !== '{}'"
                class="pack-item-name__jb"
                :style="{
                    'background-image': 'url(' + packageInfo.cornerMark.cornerAndBorder + ')',
                    width: imageStyle.width,
                    height: imageStyle.height ? imageStyle.height : imageStyle.width,
                    'border-radius': isSelected ? '0.08rem 0.08rem 0 0' : '0.08rem',
                } | imgCompress('background-image')"
            />
            <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',
                        'c-line-clamp1': layout === 'column' && packageInfo.price.dcType === 1,
                    }"
                >
                    {{ packageInfo.name }}
                </view>
                <view class="c-color-gray c-font-normal">
                    <view
                        v-if="packageInfo.agency && packageInfo.agency.name"
                        class="c-inline c-gap-right"
                    >
                        {{ packageInfo.agency.name }}提供
                    </view>
                    <view class="c-inline">{{ packageInfo.sales }}</view>
                </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"
                        font-size="0.12rem"
                        height="0.14rem"
                        line-height="0.14rem"
                        :color="item.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:
                            packageInfo.price.dcType && packageInfo.price.dcType === 1 ? '-0.02rem' : '0.10rem',
                    }"
                >
                    <!-- 亿元补贴活动价 -->
                    <view v-if="packageInfo.price.dcType && packageInfo.price.dcType === 1" class="act-price">
                        <view class="c-font-normal c-color-gray">
                            <view class="price c-gap-inner-left-small">¥{{ packageInfo.price.storePrice }}</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 v-if="price.int" class="pack-price-now">
                                    <text>{{ price.int }}</text>
                                    <text
                                        v-if="price.dec"
                                        class="c-font-normal pack-price-after"
                                    >.{{ price.dec }}</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 v-else class="pack-price-wrapper">
                        <view class="c-inline pack-price-symbol">￥</view>
                        <view v-if="price.int" class="c-inline pack-price-now">
                            <text>{{ price.int }}</text>
                            <text v-if="price.dec" class="c-font-normal pack-price-after">.{{ price.dec }}</text>
                        </view>
                        <view v-if="packageInfo.price.storePrice" class="c-inline pack-price-store">
                            <text class="c-font-normal">￥{{ packageInfo.price.storePrice }}</text>
                        </view>
                    </view>
                    <view
                        v-if="packageInfo.button"
                        class="pack-price-btn c-gap-left-large"
                    >
                        <c-button
                            type="primary"
                            :background="btnColor"
                            border-radius="1rem"
                            :height="28"
                            :font-size="14"
                            auto
                            :disabled="packageInfo.button.soldOut != 1"
                        >
                            {{ packageInfo.button.buttonText }}
                        </c-button>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @file 会员疫苗Item
 * @author jiaxiangju@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';
import {ubcSend} from '@utils/log';

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        CLabel,
        CButton
    },
    props: {
        /**
         * 套餐信息
         */
        packageInfo: {
            type: Object,
            default: () => {}
        },
        /**
         * 按钮颜色
         */
        btnColor: {
            type: String,
            default: '#FF6161'
        },
        /**
         * 自定义套餐item颜色
         */
        itemStyle: {
            type: Object,
            default: () => ({
                'margin-bottom': '0.10rem'
            })
        },
        /**
         * 日志
         */
        log: {
            type: Object,
            default: () => {
                return {
                    value: '',
                    ext: {
                    }
                };
            }
        },
        /**
         * imageStyle
         */
        imageStyle: {
            type: Object,
            default: () => {
                return {
                    width: '28.34vw',
                    height: '28.34vw'
                };
            }
        },
        /**
         * layout
         */
        layout: {
            type: String,
            default: 'row'
        },
        /**
         * isSelected
         */
        isSelected: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            price: {
                int: 0,
                dec: 0
            }
        };
    },
    watch: {
        'packageInfo.price.nowPrice': {
            handler(n, o) {
                if (n) {
                    this.handleDecimalPlace();
                }
            }
        }
    },
    created() {
        this.handleDecimalPlace();
    },
    methods: {
        // 处理小数位
        handleDecimalPlace() {
            const priceArr = this.packageInfo.price.nowPrice.toString().split('.');
            this.price.int = priceArr[0];
            this.price.dec = priceArr[1];
        },
        onItemTap(item) {
            if (item.url) {
                ubcSend({
                    type: 'clk',
                    value: this.log.value,
                    ext: Object.assign({
                        pd: 'member',
                        value_type: item.id,
                    }, this.log.ext || {})
                });
                navigate({
                    url: item.url,
                    // log: {
                    //     type: 'clk',
                    //     value: this.log.value,
                    //     ext: Object.assign({
                    //         pd: 'member',
                    //         value_type: 'ym',
                    //         value_id: item.id
                    //     }, this.log.ext || {})
                    // }
                });
            }
        }
    }
};
</script>
<style lang="less" scoped>
.pack-item {
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 0.08rem;
    // padding-top: 0.08rem;
    padding-left: 0.13rem;
    // padding-bottom: 0.08rem;
    &-cont {
        display: flex;
        height: 100%;
        position: relative;
    }

    &-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;

        &__jb {
            background-repeat: 'no-repeat';
            position: 'absolute';
            left: 0;
            top: 0;
            background-size: 'contain';
        }
    }
}

[class*='_pack-item-height'] {
    height: 100%;
}
// .pack-tag-wrapper {
// display: flex;
// flex-wrap: wrap;
// }
.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>
