/*
    商品页
*/
<template>
    <div class="details" v-if="info.id">
        <div class="top">
            <div class="back" @click="close">列表</div>
            商品详情
        </div>
        <div class="details-box">
            <div class="wrapper">
                <div class="img-wrapper" @touchmove.stop>
                    <ul class="list">
                        <li class="item" v-for="(item,index) in info.imgs" :key="index">
                            <img :src="item" v-photoswipe="{group: 'shop'}" alt="">
                        </li>
                    </ul>
                </div>
                <div class="price-box">
                    <span class="price">
                        <span class="unit">￥</span>
                        <span>{{info.price}}</span>
                    </span>
                    <span class="shop_price" v-if="info.shop_price">
                        <span class="unit">￥</span>
                        <span>{{info.shop_price}}</span>
                    </span>
                </div>
                <div class="name">{{info.name || ''}}</div>
                <div class="describe">{{info.desc || ''}}</div>
            </div>
            <div class="wrapper">
                <div class="title">商品详情</div>
                <div class="content" v-html="info.context">
                    {{info.context || ''}}
                </div>
            </div>
        </div>
        <div class="btn-box">
            <div class="btn" v-if="info.stock" @click="sub">立即购买</div>
            <div class="btn2" v-else>已售罄</div>
        </div>
        <transition name="move-bottom">
            <div class="choice-box" v-show="specShow">
                <shop-spec v-model="specShow" :info="info"></shop-spec>
            </div>
        </transition>
    </div>
</template>
<script>
    import {getGoodsMsg} from '@/plugins/API/apiShop'
    import {mapGetters} from 'vuex'
    import shopSpec from './shop_spec';

    export default {
        components: {
            shopSpec
        },
        props: {
            value: {},
            uin: {},
            userId: {},
            goodsId: {}
        },
        data(){
            return {
                info: {},
                specShow: false,
            }
        },
        computed: {
            ...mapGetters({
                'userInfo': 'userInfo',
            }),
        },
        mounted(){
            this.getGoodsMsg()
        },
        methods: {
            close(){
                this.$emit('input',false)
            },
            async getGoodsMsg() {
                let res = await getGoodsMsg({
                    goodsId: this.goodsId,
                    uin: this.uin,
                });
                if(res.code == 200 && res.errorCode == 0){
                    this.info = res.data || {};
                }else{
                    this.$layer.msg(res.errorMessage);
                }
            },
            sub(){
                if(!this.userId){
                    this.$layer.msg('请先登录!~');
                    this.$Bus.$emit('bus-showLogin', true);
                    return false;
                }else{
                    this.specShow = true;
                }
            }
        }
    }
</script>
<style lang="less">
    .details-box{
        .content{
            *{
                max-width: 100% !important;
            }
        }
    }
</style>
<style lang="less" scoped>
    .details{
        position: relative;
        height: 100%;
        padding-bottom: 40px;
        padding-bottom: 50px;

        .wrapper{
            padding: 12px;
            background-color: #fff;
            margin-bottom: 12px;
        }
    }
    .top{
        position: relative;
        height: 40px;
        line-height: 40px;
        background: #F0F1F3;
        color: #111111;
        font-size: 14px;
        text-align: center;

        .back{
            position: absolute;
            top: 0;
            left: 0;
            padding-left: 20px;
            width: 50px;
            height: 40px;
            background: url("./img/left.png") no-repeat 10px center;
            background-size: 8px auto;
            font-size: 12px;
            color: #999;
            cursor: pointer;
        }
    }
    .details-box{
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;

        .img-wrapper{
            overflow-x: auto;
            overflow-y: scroll;

            .list{
                height: 160px;
                font-size: 0;
                white-space: nowrap;
                .item{
                    display: inline-block;
                    margin-right: 12px;
                    width: 160px;
                    height: 160px;

                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
        .price-box{
            padding: 5px 0 0 0;
            line-height: 25px;
            
            .price{
                margin-right: 10px;
                color: #F14936;
                font-size: 24px;

                .unit{
                    font-size: 12px;
                }
            }
            .shop_price{
                text-decoration: line-through;
                color: #9B9B9B;
                font-size: 12px;

                .unit{
                    font-size: 12px;
                }
            }
        }
        .name{
            line-height: 20px;
            font-size: 17px;
            color: #111;
        }
        .describe{
            line-height: 20px;
            font-size: 13px;
            color: #666;
        }
        .title{
            color: #111;
            font-size: 13px;
        }
        .content{
            line-height: 20px;
            margin-top: 12px;
            text-align: justify;
            font-size: 12px;

            *{
                max-width: 100%
            }
        }
    }
    .btn-box{
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 5px 12px;
        width: 100%;
        height: 50px;
        background-color: #fff;
        border-top: 1px solid #E5E5E5;

        .btn{
            display: block;
            line-height: 40px;
            border-radius: 40px;
            font-size: 15px;
            color: #fff;
            text-align: center;
            background: linear-gradient(to right,#F68044,#EF3030);
            cursor: pointer;
        }
        .btn2{
            display: block;
            line-height: 40px;
            border-radius: 40px;
            font-size: 15px;
            color: #fff;
            text-align: center;
            background: #666;
            cursor: pointer;
        }
    }
    .choice-box{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #fff;
    }
</style>