<!--
商城
menuId 
uin
-->
<template>
    <div class="shop-container">
        <div class="list">
            <div class="list-item" v-for="item in list" :key="item.id" @click="_showInfo(item.id)">
                <div class="img-box">
                    <img :src="item.real_img" alt="">
                </div>
                <div class="content">
                    <div class="name">{{item.name}}</div>
                    <div class="num">￥ <span class="red">{{item.price}}</span></div>
                    <div class="btn" v-if="item.stock">立即购买</div>
                    <div class="btn2" v-else>已售罄</div>
                </div>
            </div>
        </div>
        <transition name="move-right">
            <div class="details-box" v-if="showInfo">
                <shop-details v-model="showInfo" :goodsId="goodsId" :uin="uin" :userId="userId"></shop-details>
            </div>
        </transition>
    </div>
</template>

<script>
    import {goodsList} from '@/plugins/API/apiShop'
    import shopDetails from './shop_details'
    export default {
        components: {
            shopDetails
        },
        props: {
            menuId: {},
            uin: {},
            userId: {}
        },
        data () {
            return {
                showInfo: false,
                goodsId: 0,
                list: []
            }
        },
        mounted () {
            this.getList()
        },
        methods: {
            async getList() {
                let res = await goodsList({
                    menuId: this.menuId,
                    uin: this.uin,
                });
                if(res.code == 200 && res.errorCode == 0){
                    this.list = res.data.list || [];
                }else{
                    this.$layer.msg(res.errorMessage);
                }

            },
            _showInfo(id){
                this.showInfo = true;
                this.goodsId = id;
            },
        }
    }
</script>
<style lang="less" scoped>
.shop-container{
    position: relative;
    background-color: #F0F1F3;
    height: 100%;
    .list{
        height: 100%;
        overflow: auto;
        .list-item{
            display: flex;
            margin-top: 6px;
            padding: 6px 10px;
            background-color: #fff;

            .img-box{
                flex: 0 0 auto;
                margin-right: 8px;
                width: 89px;
                height: 89px;
                img{
                    display: block;
                    width: 100%;
                    height: 100%;
                }
            }
            .content{
                flex: 1;
                position: relative;
                .name{
                    height: 54px;
                    line-height: 18px;
                    font-size: 13px;
                    color: #333;
                    overflow: hidden;
                }
                .num{
                    height: 35px;
                    line-height: 35px;
                    font-size: 12px;
                    color: #666;
                    .red{
                        font-size: 18px;
                        font-weight: bold;
                        color: #FF3B3B;
                    }
                }
                .btn{
                    position: absolute;
                    bottom: 0;
                    right: 0;
                    display: inline-block;
                    padding: 0 20px;
                    height: 28px;
                    line-height: 28px;
                    font-size: 14px;
                    color: #fff;
                    background-color: #FFA633;
                    border-radius: 28px;
                }
                .btn2{
                    position: absolute;
                    bottom: 0;
                    right: 0;
                    display: inline-block;
                    padding: 0 20px;
                    height: 28px;
                    line-height: 28px;
                    font-size: 14px;
                    color: #fff;
                    background-color: #666;
                    border-radius: 28px;
                }
            }
        }
    }
    .details-box{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #F0F1F3;
    }
}
</style>

