<template>
    <div v-if="skeleton" class='hanzo-product-card-skeleton'>
        <div class='view cover'></div>
        <div class='view title'></div>
        <div class='view sub-title'></div>
        <div class='view line'></div>
        <div class='view line'></div>
        <div class='view bottom'></div>
    </div>
    <div v-else :class="[ 'hanzo-product-card', size === 'small' ? 'hanzo-product-card__small' : '' ]">
        <!-- 普通商品品牌信息 -->
        <div v-if="vendor" class="vendor-name">
            本商品由{{ vendor }}专供
        </div>
        <!--商品封面图-->
        <div :class="[ 'product-cover', ( type==='FRESH_HOUSE' || type==='FRESH_ENTRY' ) ? 'fresh-house': '']" @click="onCoverClick" bindlongpress="onCoverPress">
            <!--视频播放标记-->
            <!-- <div v-if="video && type!=='FRESH_ENTRY' && status != 'SOLDOUT'" class="video-play-button" @click.stop="onPlayerClick">
                <div class="video-player-icon"></div>
            </div> -->
            <video v-if="video"
                :poster="cover"
                :src="video" 
                controls="controls" 
                class="cover"
                :id="'video'+productKey"
                preload="none"
                loop="loop"
                >
            </video>
            <h-image :src="cover" :class="['cover', size === 'small' ? 'smallimg' : '' ]" mode="cover" v-else />

            <!--已售完/库存不足-->
            <div class="cover-mask soldout" v-if="status === 'SOLDOUT'">抢光了</div>
            <div class="cover-mask lack" v-if="status === 'LACK'">库存不足</div>
        </div>
        <!--商品标题-->
        <div :class="[ 'product-title', 'row', (type=='FRESH_ENTRY'||type=='FRESH_HOUSE' || follows==0 || follows=='' ) ? 'type-fresh-house':'' ]"  @click="onCoverClick">
            <div class="title">{{title}}</div>
            <div v-if="follows" class="split" />
            <div v-if="follows" class="follows">
                <span class="number">{{follows}}</span>
                <span class="text">关注人数</span>
            </div>
        </div>
        <div class="delayed-downOrUp" v-if="delayedDown || delayedUp">
            {{delayedDown ? '预下架' : '预上架'}}时间：{{delayedDown ? delayedDownDateStr : delayedUpDateStr}}
        </div>
        <!--购买规则-->
        <div :class="[ 'buy-rule', 'row', (type==='FRESH_HOUSE' || type==='FRESH_ENTRY') ?'type-fresh-house':'']">
            <div class="row">
                <div class="cpbr-col-lf">
                    <span class="pretime yellow" v-if="preSaleDate">预售时间：{{ preSaleDate }}</span>
                </div>
                <div class="cpbr-col-rg">
                    <div class="salenum">
                        <div v-if="saled > 0">已售<span class="red">{{saled}}</span>份</div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="cpbr-col-lf">
                    <div class="thtime yellow" v-if="pickUpDate">提货时间：{{ pickUpDate }}</div>
                </div>
                <div class="cpbr-col-rg">
                    <div class="sale-data yellow">
                        <div v-if="totle > 0">限量{{totle}}份</div>
                        <div v-if="limit > 0">{{totle > 0 && limit > 0 ? "(" : ""}}每人限购{{limit}}份{{totle > 0 && limit > 0 ? ")" : ""}}</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 价格标签和购买按钮 -->
        <div class="price-and-buy row" v-if="!brandBtnText">
            <div class="price">
                <span class="big">{{price}}</span>
                <span class="small">{{marketPrice}}</span>
            </div>
            <div class="cart-button" v-if="!vCode">
                <!--购物车按钮封面-->
                <div class="button-cover fresh-house" v-if="type==='FRESH_ENTRY'" @click="onBtnClick">进入生鲜馆购买</div>
                <div class="button-cover active" v-else-if="status==='ACTIVE' && innercartCount===0" @click="onAdd">加入购物车</div>
                <div class="button-cover waiting" v-else-if="status==='WAITING'">{{statusText || "10点销售"}}</div>
                <div class="button-cover soldout" v-else-if="status==='SOLDOUT'">抢光了</div>
                <div class="button-cover over" v-else-if="status==='OVER'">活动已结束</div>
                <!--购物车数量控制-->
                <h-counter :size="size" :disableInput="true" v-else-if="(status == 'ACTIVE' || status == 'LACK') && innercartCount>0" asyncChange :value="innercartCount" 
                    @plus="onAdd" @minus="onReduce" :inputWidth="size==='small' ? '40px' : '54px'"/>
            </div>
            <div class="mini-button" v-else>
                <div class="button-cover minibuy">仅支持小程序购买</div>
            </div>
        </div>
        
        
        <!-- 价格标签和购买按钮 -->
        <div class="price-and-buy hasbrandBtn row" v-else>
            <div class="price">
                <span class="big">{{price}}</span>
                <span class="small">{{marketPrice}}</span>
            </div>
            <div class="brand-and-buy">
                <div :class="['go-brand-button', winType==='BRAND_HOUSE'? 'fhExtraBtn':'' ]" @click="onBrandClick">
                    <span v-if="winType==='BRAND_HOUSE'" class="fhExtraIcon"></span>
                    <div class="go-brand-button__text">{{brandBtnText}}</div>
                    <div class="go-brand-button__bg"></div>
                </div>
                <div class="cart-button" v-if="!vCode">
                    <!--购物车按钮封面-->
                    <div class="button-cover fresh-house" v-if="type==='FRESH_ENTRY'" @click="onBtnClick">进入生鲜馆购买</div>
                    <div class="button-cover active" v-else-if="status==='ACTIVE' && innercartCount===0" @click="onAdd">加入购物车</div>
                    <div class="button-cover waiting" v-else-if="status==='WAITING'">{{statusText || "10点销售"}}</div>
                    <div class="button-cover soldout" v-else-if="status==='SOLDOUT'">抢光了</div>
                    <div class="button-cover over" v-else-if="status==='OVER'">活动已结束</div>
                    <!--购物车数量控制-->
                    <h-counter :size="size" :disableInput="true" v-else-if="(status == 'ACTIVE' || status == 'LACK') && innercartCount>0" asyncChange :value="innercartCount" 
                        @plus="onAdd" @minus="onReduce" :inputWidth="size==='small' ? '40px' : '54px'"/>
                </div>
                <div class="mini-button" v-else>
                    <div class="button-cover minibuy">仅支持小程序购买</div>
                </div>
            </div>
        </div>
        <!--购买此商品的消费者-->
        <div class="product-buyer" @click="onBuyerClick" v-if="buyer && buyer.length > 0">
            <div class="dall">
                <h-image v-for="( item, index ) in buyer" :key="index" :src="item.avatar" class="avator" />
                <div class="more" v-if="buyer.length >= 5" />
                <em class="em">等购买了此商品。</em>
            </div>
            <h-icon type="jiantou" size="12" color="#999999" />
        </div>
    </div>
</template>
<script>
import hImage from '../image/index';
import hIcon from '../icon/index';
import hButton from '../button/index';
import hCounter from '../counter/index';

const SALE_STATUS = {
  WAITING: "WAITING", // 预售
  ACTIVE: "ACTIVE", // 正常
  SOLDOUT: "SOLDOUT", // 售罄
  OVER: "OVER", //  活动结束
  LACK: "LACK", // 缺货
};

const CARD_TYPE = {
    NORMAL: 'NORMAL',
    FRESH_HOUSE: 'FRESH_HOUSE',
    FRESH_ENTRY: "FRESH_ENTRY" // 仅作为入口
}
// 橱窗类型
const WINDOW_TYPE = {
  NORMAL: 'NORMAL',
  // 生鲜橱窗
  BRAND_HOUSE: 'BRAND_HOUSE',
  // 首页橱窗
  FRESH_ENTRY: "CLASSIFY" // 仅作为入口
}
export default {
    name: "h-product-card",
    components: {
        hImage,
        hIcon,
        hButton,
        hCounter
    },
    props: {
        buyer: {
            type: Array,
            default: () => []
        }, // 购买记录
        cartCount: {type:Number,default:0}, // 购物车数量
        cover: String,
        follows: String | Number,
        productKey: String, // 卡片ID
        limit: Number, // 个人限量
        marketPrice: String | Number, // 市场价
        pickUpDate: String,
        preSaleDate: String,
        price: String | Number, // 折后价
        saled: String | Number, // 已售，销量
        saledTotle: {
            type: String,
            default: '0'
        }, // 已售
        skeleton: Boolean, // 是否骨架
        status: { type: String, default: SALE_STATUS.ACTIVE }, // 卡片状态
        statusText: { type: String, default: "加入购物车" }, // 卡片状态文字
        totle: Number, //库存、总量,
        timeOffset: Number, //修正本地时间
        title: String,
        type: { type: String, default: CARD_TYPE.NORMAL }, // 卡片类型，品牌馆卡片、普通商品
        winType: { type: String, default: WINDOW_TYPE.NORMAL }, // 跳转橱窗类型
        vendor: String,
        video: String,
        brandBtnText: String,
        delayedDown: {
            default: false,
            type: Boolean
        },
        delayedUp: {
            default: false,
            type: Boolean
        },
        delayedDownDateStr: {
            default: "",
            type: String
        },
        delayedUpDateStr: {
            default: "",
            type: String
        },
        size: String,
        vCode: {  default: false, type: Boolean },  //是否验证码商品
    },
    watch: {
        cartCount( newV ) {
            this.innercartCount = newV;
        }
    },
    data() {
        return {
            innercartCount: this.cartCount
        }
    },
    methods: {
        // 封面点击
        onCoverClick(e) {
            this.$emit("cover-click", this.productKey, this._props);
        },
        onBtnClick(e) {
            this.$emit("btn-click", this.productKey, this._props);
        },
        // 购物车增加
        onAdd(value) {
            this.$emit("cart-add", { cart: value, key: this.productKey }, this._props);
        },
        // 购物车减少
        onReduce(value) {
            this.$emit("cart-reduce", { cart: value, key: this.productKey }, this._props);
        },
        // 视频播放点击
        onPlayerClick() {
            document.getElementById('video'+this.productKey).play();
            //this.$emit("player-click", this.productKey, this._props);
        },
        // 查看购买者
        onBuyerClick(e) {
            this.$emit("buyer-click", this.productKey, this._props);
        },
        // 生鲜馆按钮
        onBrandClick() {
		    this.$emit("brand-click", this.productKey, this._props);
        }
    }
}
</script>
<style lang="less">
@import './index.less';
</style>
