<template>
    <div class="shop-zone">
        <div class="shop-zone__time">
            <img src="https://front-xps-cdn.xsyx.xyz/2019/11/01/1597827872.jpg"/>
            <span>{{tmPubStr}}</span>
        </div>
        <div class="shop-zone__text">
            <pre>{{ txt }}</pre>
        </div>
        <ul class="shop-zone__sudoku">
            <li class="shop-zone__sudoku--item" v-for="(item,index) in imgs" :key="index" @click="handlePreview(item,index)">
                <img :src="item.smalImg" v-if="item.type!='VIDEO'"/>

                <video v-if="item.type=='VIDEO'"
                    :src="item.videoUrl" 
                    controls="controls"
                    preload="none"
                    :poster="item.fstImg"
                    loop="loop"
                    >
                </video>
            </li>
        </ul>
        <div class="shop-zone__follow">
            <div class="shop-zone__head">
                <div class="shop-zone__praise" @click="handleClick">
                    <span :class="['shop-zone__praise--icon', isCur === 'TRUE'?'praise-true' : 'praise-false']"></span>
                    <span class="shop-zone__praise--text">赞</span>
                </div>
            </div>
            <div class="shop-zone__details">
                <img src="https://front-xps-cdn.xsyx.xyz/2019/11/01/198560248.png"/>
                <span v-for="(item,index) in upAvatorsList" :key="index">
                    {{item.wxName}}
                    <span v-if="index < upAvatorsList.length - 1">,</span>
                </span>
            </div>
        </div>
    </div>
</template>
<script>
import { ImagePreview } from '../image-preview/index';
export default {
    name: 'h-shop-zone',
    props: {
        tmPubStr: String,
        txt: String,
        isCur: String,
        upAvatorsList: {
            type: Array,
            default: () => []
        },
        imgs: {
            type: Array,
            default: () => []
        }
    },
    watch: {
        imgs( newV ) {
            if ( Array.isArray( newV ) && newV.length > 0 ) {
                let bigImg = [];
                newV.map( ( item ) => {
                    bigImg.push( item.bigImg );
                } );
                this.bigImg = bigImg;
            }
        }
    },
    mounted() {
        let bigImg = [];
        this.imgs.map( ( item ) => {
            bigImg.push( item.bigImg );
        } );
        this.bigImg = bigImg;
    },
    data() {
        return {
            bigImg: []
        }
    },
    methods: {
        handlePreview( item, index ) {
            if ( item.bigImg === this.bigImg[index] ) {
                ImagePreview( {
                    images: this.bigImg,
                    startPosition: index
                } );
            }
        },
        handleClick() {
            this.$emit('click');
        }
    }
}
</script>
<style lang="less" scoped>
@import './index.less';
</style>
