<template>
    <div :class="classes()">
        <div :class="classes('vendor')">本商品由{{ vendor }}专供</div>
        <div :class="classes('cover')">
            <div :class="classes('live', `${ liveType }`)" v-if="liveType">
                <span v-if="liveType === 'upcoming'">直播即将开始</span>
                <span v-if="liveType === 'living'">直播中<span class="living-gif"></span></span>
                <span v-if="liveType === 'finish'">直播已结束</span>
            </div>
            <div :class="classes('cover--con')" v-if="video && posterShow">
                <h-image :class="classes('cover--poster')" :src="cover"  mode="cover"  @click="onCoverClick"/>
                <div :class="classes('cover--btn')" @click="hanldePlay"></div>
            </div>
            <video 
                v-if="video" 
                :poster="cover" 
                :src="video" 
                controls="controls" 
                :class="classes('cover--video')" 
                :id="'video'+productKey" 
                preload="none" 
                :width="videoWidth" 
                ref="cardVideo"
                x5-playsinline="true" 
                playsinline="true" 
                webkit-playsinline="true"
                @play="videoPlay"
                @pause="videoPause"
                @ended="videoEnd"
            >
            </video>
            <h-image v-else :src="cover"  mode="cover"  @click="onCoverClick"/>
        </div>
        <div :class="classes('title')" @click="onCoverClick">
            {{ title }}
        </div>
        <div :class="classes('rules')">
            <div>
                <p>预售时间：{{ preSaleDate }}</p>
                <p>
                    <span v-if="totle > 0">限量{{ totle }}份</span>
                    <span v-if="limit > 0">{{ totle>0 && limit > 0 ? '(' : '' }}每人限购{{limit}}份{{ totle>0 && limit > 0 ? ')' : '' }}</span>
                </p>
            </div>
            <div>
                <p>提货时间：{{ pickUpDate }}</p>
                <p :class="classes('saled')" v-if="saled>0 && status !== 'WAITING'">今日已售<span :class="classes('saled--count')">{{ saled }}</span>份</p>
                <p :class="classes('presell')" v-else-if="status === 'WAITING'">{{presellText}}</p>
            </div>
        </div>
        <div :class="classes('operate')">
            <div :class="classes('operate--price')">
                <span :class="classes('operate--price_big')">￥{{ price }}</span>
                <span :class="classes('operate--price_small')">￥{{ marketPrice }}</span>
            </div>
            <div>
                <span v-if="status === 'ACTIVE' && cartCount === 0" :class="classes('operate--btn', 'active')" @click="handleAdd">加入购物车</span>
                <span v-else-if="status === 'SOLDOUT'" :class="classes('operate--btn', 'soldout')">抢光了</span>
                <span v-else-if="status === 'OVER'" :class="classes('operate--btn', 'soldout')">活动已结束</span>
                <span v-else-if="status === 'WAITING'" :class="classes('operate--btn', 'waiting')"  @click="handleAdd(cartCount)">
                    <span :class="classes('wait-text', { hasnowantBuy: !wantBuy })">提前加入购物车</span>
                    <span v-if="wantBuy" :class="classes('wait-tag')">{{wantBuy}}人想购买</span>
                    <span v-if="cartCount>0" :class="classes('count-tag')">{{cartCount}}</span>
                </span>
                <h-counter v-if="status === 'ACTIVE' && cartCount > 0" :disableInput="true" asyncChange :value="cartCount" @plus="handleAdd" @minus="onReduce" inputWidth="68px"/>
            </div>
        </div>
    </div>
</template>

<script>
import { classesMixin } from '../../common/mixins/classname';
import hButton from '../button/index';
import hImage from '../image/index';
import hCounter from '../counter/index';
let classMixin = classesMixin('active-pcard');
export default {
    name: 'h-active-pcard',
    mixins: [classMixin],
    components: {
       hButton,
       hImage,
       hCounter
    },
    props: {
        vendor: String,
        title: String,
        preSaleDate: String,
        pickUpDate: String,
        saled: [ String, Number ],
        totle: Number,
        limit: Number,
        price: [ String, Number ],
        marketPrice: [ String, Number ],
        status: String,
        wantBuy: [ String, Number ],
        productKey: String, // 卡片ID
        cartCount: Number,
        video: String,
        cover: String,
        presellText: String,
        liveType: String
    },
    data() {
        return {
            videoWidth: '0',
            posterShow: true,
            timer: null
        }
    },
    methods: {
        // 购物车增加
        handleAdd(value) {
            let count = typeof value === 'number' ? value : 0;
            this.$emit("cart-add", { cart: count, key: this.productKey }, this._props);
        },
        // 购物车减少
        onReduce(value) {
            this.$emit("cart-reduce", { cart: value, key: this.productKey }, this._props);
        },
        onCoverClick(e) {
            this.$emit("cover-click", this.productKey, this._props);
        },
        hanldePlay() {
            this.stopAll();
            this.posterShow = false;
            this.videoWidth = '100%';
            this.$refs.cardVideo.play();
        },
        videoPlay() {
            if ( !this.video ) return;
            let target = this.$refs.cardVideo;
            this.timer = setInterval( () => {
                let clientRect = target.getBoundingClientRect();
                let top = clientRect && clientRect.top;
                if ( top < -400 || top > 900 ) {
                    this.$refs.cardVideo.pause();
                    clearInterval( this.timer );
                }
            }, 200 )
        },
        videoPause() {
            if ( !this.video ) return;
            this.timer && clearInterval( this.timer );
        },
        stopAll() {
            var videos = document.getElementsByTagName('video');

            for (var i = videos.length - 1; i >= 0; i--) {
             (function(){
                 var p = i;
                 videos[p].addEventListener('play',function(){
                     pauseAll(p);
                 })
             })()
            }
            function pauseAll(index){
                for (var j = videos.length - 1; j >= 0; j--) {
                    if (j!=index) videos[j].pause();
                }
            }
        },
        videoEnd() {
            this.posterShow = true;
            this.videoWidth = '0';
        }
    }
}
</script>

<style lang="less">
@import './index.less';
</style>