<template>
    <div v-loading="loading">
        <div class="white-box">
            <el-row>
                <el-col :span="12"><div class="grid-content bg-purple">图片</div></el-col>
                <el-col :span="12"><div class="grid-content bg-purple-light">
                    <h2>{{this.GOODS_NAME}}</h2>
                    <small>{{this.CONTENT}}</small>
                    <div class="mar-top-small">
                           <h2>￥ <span>{{this.SELL_PRICE}}</span></h2>
                    </div>
                    <div class="border-padding"></div>
                    <div class="mar-top-small" style="padding-bottom: 10px;">
                        <dt>数量</dt>
                        <dd class="pad-top-small clearfix">
                            <el-row>
                                <el-col :span="8"><div class="grid-content bg-purple">
                                    <template>
                                        <el-input-number v-model="goodsNum" controls-position="left" @change="handleChange" size="mini" ></el-input-number>
                                    </template>
                                </div>

                                </el-col>
                                <el-col :span="16"><div class="grid-content bg-purple-light">
                                    库存 <span>{{this.STORE_NUMS}}</span>
                                </div></el-col>
                            </el-row>
                        </dd>
                    </div>
                   <!-- <div class="border-padding"></div>-->

                </div></el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue'
    import network from '@/utils/network'
    import tool from '@/utils/tool'
    import store from '@/utils/vuexStore'

    export default {
        name: 'goods-detail',
        mounted () {
            this.getData()
        },
        data () {
            return {

                loading: true,
                tool: tool,

                GOODS_NAME:'',
                CONTENT:'',
                SELL_PRICE:'',
                STORE_NUMS:'',
                goodsNum:'1',
            }
        },
        methods: {
            getData () {
                network.getData(`shop/goods-detail/${this.$route.params.id}`).then(response => {
                    console.log(response)
                    this.loading = false
                    this.GOODS_NAME = response.GOODS_NAME;
                    this.CONTENT = response.CONTENT;
                    this.SELL_PRICE = response.SELL_PRICE;
                    this.STORE_NUMS = response.STORE_NUMS;

                }).catch(response => {
                })
            },
            handleChange(value) {
                console.log(value);
            }

        }
    }

</script>

<style scoped>
    .white-box-title span{color: #999}
    .white-box-content{font-size: 16px;padding: 15px 0;line-height: 2;}
    .border-padding {
        height: 1px;width: 100%;
        border-color: #e9e9e9;background: #e9e9e9;
    }
    .mar-top-small {
        margin-top: 10px;
    }
    h2{
        font-size: 28px;
        margin-top: 20px;
        margin-bottom: 10px;
    }
    .pad-top-mini, .pad-top-small {
        padding-top: 10px!important;margin: 0;
    }
</style>