<template>
    <view
        v-if="!!options"
        :style="{
            'background': 'url(' + options.bgImg + ') center center no-repeat',
            'background-size': 'cover',
        }"
        class="fs14"
    >
        <view class="activity c-gap-left c-gap-right">
            <view class="activity__line">
                <view class="activity__line__left">
                    <view v-if="options.title" class="activity__line__left__title">
                        {{ options.title }}
                    </view>
                    <view v-if="options.tag" class="activity__tag">
                        {{ options.tag }}
                    </view>
                </view>
                <view class="activity__line__right">
                    <view v-if="options.actImg">
                        <image
                            :src="options.actImg"
                            mode="aspectFit"
                            :style="{width: '.75rem', height: '.2rem', marginTop: '.06rem'}"
                        />
                    </view>
                </view>
            </view>
            <view class="activity__line">
                <view class="activity__line__left">
                    <view>
                        <text
                            v-if="!!options.price"
                            class="fs19 fwb"
                        >
                            ¥<text
                                v-if="priceInt"
                                class="fs27 fwb"
                            >{{ priceInt }}</text>
                            <text
                                v-if="priceDec"
                            >.{{ priceDec }}</text>
                        </text>
                        <rich-text
                            v-if="options.orgPrice"
                            :nodes="'<del>￥' + options.orgPrice / 100 + '</del>'"
                            class="fs16 c-inline activity__del"
                        />
                    </view>
                </view>
                <view class="activity__line__right mt3">
                    <view v-if="saled" class="activity__right__saled">月销{{ saled }}</view>
                    <view v-else class="mt3 activity__right__nosaled">口碑好货</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @file 两行左右对齐活动页
 * @author kangpuqing
 * @categories 业务组件
 * @tags [component]
 */
/* global getApp */

export default {
    config: {
        component: true
    },
    components: {

    },
    props: {
        /**
         * 配置项
         * @property options.bgImg - 腰封背景颜色
         * @property options.title - 腰封标题
         * @property options.tag - 腰封tag
         * @property options.actImg - 腰封右侧活动文字图片
         * @property options.price - 腰封商品优惠价格
         * @property options.orgPrice - 腰封商品原价
         * @property options.sales - 腰封商品销量
         */
        options: {
            type: Object
        }
    },
    methods: {
        fixedPrice(price, type) {
            if (!price) {
                return;
            }
            const __price = (price / 100).toString();
            const [int, dec] = __price.split('.');
            if (type === 'int') {
                return int;
            }
            return dec;

        }
    },
    computed: {
        saled() {
            return (this.options && this.options.sales && this.options.sales.replace(/[^\d.]/g, '')) || '';
        },
        priceInt() {
            return this.options && this.options.price && this.fixedPrice(this.options.price, 'int');
        },
        priceDec() {
            return this.options && this.options.price && this.fixedPrice(this.options.price);
        }
    }
};
</script>

<style lang="less" scoped>
.activity {
    display: block;
    margin-top:-1px;
    color: #fff;
    height: .74rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    &__line {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        &__left {
            display: flex;
            justify-content: flex-start;
            &__title {
                padding-right: 0.04rem;
            }
        }
    }
    &__line:nth-child(1) {
        margin-top: .02rem;
    }
    &__line:nth-child(2) {
        margin-top: -0.02rem;
    }
    &__right {
        &__saled {
            margin-top: -0.03rem;
        }
        &__nosaled {
            margin-top: -0.03rem;
        }
    }
    &__tag {
        background-color: #F42326;
        border-radius: 24px;
        height: 0.16rem;
        line-height: 0.16rem;
        padding: .02rem 0.07rem;
    }
    .activity__del {
        opacity: 0.9;
        margin-left: 0.04rem;
    }
}
.fs14 {
    font-size: .14rem;
}
.fs16 {
    font-size: .16rem;
}
.fs19 {
    font-size: .19rem;
}
.fs27 {
    font-size: .27rem;
}
.fwb {
    font-weight: bold;
}
.mt3 {
    margin-top: 0.03rem;
}
</style>
