<template>
    <view
        :class="
            promotionInfo.stage === 0 ? 'top-activity-wrapper' : 'top-activity-wrapper top-activity-wrapper__stage__1'
        "
    >
        <view class="top-activity-row">
            <view class="row c-gap-inner-left">
                <text class="fs16 c-gap-right-small">{{ promotionInfo.text }}</text>
                <view
                    v-if="promotionInfo.stage === 0 && saled"
                    class="fs14 top-activity-tag__small bg-orange"
                >{{ saled }}人想买</view>
                <!-- <view class="top-activity-tag__small">{{ promotionInfo.description }}</view> -->
            </view>
            <view class="c-gap-inner-right">
                <image
                    src="https://med-drug.cdn.bcebos.com/%E8%B6%85%E5%80%BC%E7%A7%92logo.png"
                    mode="aspectFit"
                    :style="{width: '.75rem', height: '.2rem', marginTop: '.003rem'}"
                />
            </view>
        </view>
        <view class="top-activity-row">
            <view class="row asb c-gap-inner-left">
                <text
                    v-if="!!promotionInfo.price"
                    class="fs19 fwb"
                >
                    ¥<text
                        v-if="priceInt"
                        class="fs27 fwb"
                    >{{ priceInt }}</text>
                    <text
                        v-if="priceDec"
                        class="fs16"
                    >.{{ priceDec }}</text>
                    <text class="fs16">起</text>
                </text>
                <view
                    v-if="!!promotionInfo.off_price"
                    class="top-activity-tag__big asb c-gap-left-small"
                >
                    <text class="fs14">
                        券后<text class="fwb">¥</text>
                        <text
                            v-if="offPriceInt"
                            class="fs19 fwb"
                        >{{ offPriceInt }}</text>
                        <text
                            v-if="offPriceDec"
                            class="fs14 fwb"
                        >.{{ offPriceDec }}</text>
                        <text>起</text>
                    </text>
                </view>
            </view>
            <view class="fs14 row c-gap-inner-right">
                <text v-if="promotionInfo.stage === 0">{{ promotionDate }}</text>
                <text v-if="promotionInfo.stage === 0">{{ promotionTime }}开抢</text>
                <text v-if="promotionInfo.stage === 1" class="fs14 c-gap-right-small">距结束</text>
                <!-- 倒计时 -->
                <coupon-count-down
                    v-if="promotionInfo.stage === 1"
                    :own-style="countDownStyle"
                    :data="{cancelDate: promotionInfo.end_time * 1000}"
                    @updateData="$emit('updateData')"
                />
            </view>
        </view>
        <view class="fs14 top-activity-row">
            <view
                class="c-gap-inner-left"
            >价格<del>¥{{ promotionInfo.org_price / 100 }}</del>起</view>
            <view v-if="saled" class="c-gap-inner-right">月销{{ saled }}</view>
            <view v-else class="c-gap-inner-right">口碑好货</view>
        </view>
    </view>
</template>

<script>
/**
 * @file 平台活动腰封
 * @author kangpuqing01@baidu.com
 */
import CouponCountDown from '@components/gy/CouponCountDown';

export default {
    config: {
        component: true
    },
    props: {
        promotionInfo: {
            type: Object,
            default: () => ({})
        },
        sales: {
            type: [Number, String],
            default: ''
        }
    },
    components: {
        CouponCountDown
    },
    data() {
        return {
            countDownStyle: {
                color: '#FF5A27',
                'background-color': '#fff',
                'border-radius': '.04rem',
                padding: '.03rem .02rem',
                margin: '.01rem'
            }
        };
    },
    computed: {
        promotionDate() {
            const startTime = this.promotionInfo && this.promotionInfo.start_time;
            if (startTime) {
                const date = new Date(startTime);
                return `${date.getMonth() + 1}月${date.getDate()}日`;
            }
            return '';
        },
        promotionTime() {
            const startTime = this.promotionInfo && this.promotionInfo.start_time * 1000;
            if (startTime) {
                const date = new Date(startTime);
                const hour = `${date.getHours().toString().padStart(2, '0')}`;
                const minute = `${date.getMinutes().toString().padStart(2, '0')}`;
                const second = `${date.getSeconds().toString().padStart(2, '0')}`;
                return `${hour}:${minute}:${second}`;
            }
            return '';
        },
        saled() {
            return (this.sales && this.sales.replace(/[^\d.\u4e07\+]/g, '')) || '';
        },
        priceInt() {
            return this.promotionInfo && this.fixedPrice(this.promotionInfo.price, 'int');
        },
        priceDec() {
            return this.promotionInfo && this.fixedPrice(this.promotionInfo.price);
        },
        offPriceInt() {
            return this.promotionInfo && this.fixedPrice(this.promotionInfo.off_price, 'int');
        },
        offPriceDec() {
            return this.promotionInfo && this.fixedPrice(this.promotionInfo.off_price);
        }
    },
    methods: {
        fixedPrice(price, type) {
            if (!price) {
                return;
            }
            const __price = (price / 100).toString();
            const [int, dec] = __price.split('.');
            if (type === 'int') {
                return int;
            }
            return dec;

        }
    }
};
</script>

<style lang="less" scoped>
.top-activity-wrapper {
    color: #fff;
    display: flex;
    width: 100%;
    height: 1.06rem;
    background-image: url('https://med-drug.cdn.bcebos.com/%E9%A2%84%E7%83%AD.jpg');
    background-size: cover;
    flex-direction: column;
    justify-content: center;
    .top-activity-row {
        display: flex;
        justify-content: space-between;
        margin-top: 0.03rem;
        .row {
            display: flex;
            justify-content: start;
            align-items: center;
        }
        .top-activity-tag__small {
            border-radius: 11px;
            padding: 0.02rem 0.05rem;
            background-color: #e20b0f;
            color: #fff;
        }
        .bg-orange {
            background-color: #e24c00;
        }
        .top-activity-tag__big {
            border-radius: 18px;
            padding: 0 8px;
            background-color: #fff;
            color: #ff5a27;
        }
        .asb {
            flex-direction: row;
            align-self: baseline;
        }
    }
    .top-activity-row:nth-child(1) {
        margin-top: 0;
    }
    .top-activity-row:nth-child(3) {
        margin-top: 0.05rem;
    }
}
.top-activity-wrapper__stage__1 {
    background-image: url('https://med-drug.cdn.bcebos.com/%E6%B4%BB%E5%8A%A8%E4%B8%AD.jpg');
}
.fs14 {
    font-size: 0.14rem;
}
.fs16 {
    font-size: 0.16rem;
}
.fs19 {
    font-size: 0.19rem;
}
.fs27 {
    font-size: 0.27rem;
}
.fwb {
    font-weight: bold;
}
</style>
