<template>
    <div class="shop-message">
        <div class="count-down">
            <div class="count-down__text">
                <span class="count-down__text--unit">￥</span>
                <span class="count-down__text--big">{{saleAmt}}</span>
                <span class="count-down__text--small">￥{{marketAmt}}</span>
            </div>
            <div class="count-down__time">
                <p class="count-down__time--tip">{{ purchaseStatus === 1 ? '距兴盛优选开始还剩：' : '距离本商品结束还剩:' }}</p>
                <div class="count-down__time--content"> 
                    <span class="count-down__time--hour">{{hour}}</span>
                    <span class="count-down__time--dot">:</span>
                    <span class="count-down__time--min">{{minute}}</span>
                    <span class="count-down__time--dot">:</span>
                    <span class="count-down__time--sec">{{second}}</span>
                </div>
            </div>
        </div>
        <div class="shop-title">
            <div class="shop-title__text">
                <p v-if="title" class="shop-title__text--title">{{ title }}</p>
                <p v-if="subtitle" class="shop-title__text--subtitle">{{subtitle}}</p>
            </div>
            <div class="shop-title__focus" v-if="focusNum">
                <p class="shop-title__focus--num">{{focusNum}}</p>
                <p class="shop-title__focus--text">关注人数</p>
            </div>
        </div>
        <div class="shop-time">
            <div class="shop-time__dowcnt">
                <p v-if="tmBuyStr" class="shop-time__time--pre">预售时间：{{tmBuyStr}}</p>
                <p class="shop-time__tip--limit">
                    <span v-if="saleQty>0">今日已售{{saleQty}}份</span>
                </p>
            </div>
            <div class="shop-time__dowcnt">
                <p v-if="tmPickUpStr" class="shop-time__time--pick">提货时间：{{tmPickUpStr}}</p>
                <p class="shop-time__tip--sales">
                    <span v-if="limitQty > 0">限量{{limitQty}}份</span>
                    <span v-if="ulimitQty">{{limitQty > 0 && ulimitQty > 0 ? "(" : ""}}每人限购{{ulimitQty}}份{{limitQty > 0 && ulimitQty > 0 ? ")" : ""}}</span>
                </p>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'h-shop-message',
    props: {
        title: String,
        subtitle: String,
        focusNum: [String,Number],
        tmBuyStr: String,
        tmPickUpStr: String,
        limitQty: String,
        saleQtyTxt: String,
        ulimitQty: String,
        purchaseStatus: [String,Number], // 状态
        saleQty: [String,Number], // 今日已售
        hour: [String,Number], // 时
        minute: [String,Number], // 分
        second: [String,Number], // 秒
        saleAmt: {
            type: [String,Number],
            default: 0.00
        },
        marketAmt: {
            type: [String,Number],
            default: 0.00
        },
    }
}
</script>
<style lang="less" scoped>
@import './index.less';
</style>