/*
    选择分类
*/
<template>
    <div class="spec">
        <div class="spec-box">
            <shop-commodity :info="info" :specList="specList"></shop-commodity>
            <div class="spec-list">
                <div class="spec-item" v-for="(listItem,listIndex) in specList" :key="listIndex">
                    <div class="title">{{listItem.name}}</div>
                    <ul class="list-box">
                        <li class="item"
                            :class="{'z-active': listItem.selectId == item.id}"
                            v-for="(item,index) in listItem.spec_value"
                            :key="index"
                            @click="changeChoice(listItem.id,item.id)"
                        >{{item.name}}</li>
                    </ul>
                </div>
            </div>
            <shop-count v-model="num" :stock="info.stock"></shop-count>
            <div class="close" @click="close"></div>
        </div>
        <div class="btn-box">
            <div class="btn" @click="sub">确定</div>
        </div>
        <transition name="move-right">
            <div class="payment-box" v-transfer-dom v-show="paymentShow">
                <div class="mask" @click="paymentShow = false "></div>
                <div class="box">
                    <shop-payment v-model="paymentShow" :specList="specList" :num="num" :info="info" @count="count"></shop-payment>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
    import shopCommodity from './shop_commodity'
    import shopCount from './shop_count'
    const shopPayment =resolve => require(['./shop_payment'],resolve)

    export default {
        components: {
            shopCommodity,
            shopCount,
            shopPayment,
        },
        props: {
            info: {},
        },
        data(){
            return {
                specList: [
                    // {
                    //     id: 1,
                    //     title: '颜色',
                    //     selectId: 0,
                    //     spec_value: [
                    //         {id:11,name:'蓝色'},
                    //     ]
                    // },
                ],
                paymentShow: false,
                num: 1,
            }
        },
        watch: {
            info(){
                this.setSpecList();
            }
        },
        mounted(){
            this.setSpecList();
        },
        methods: {
            setSpecList(){
                this.specList = [];
                let spec = this.info.spec || [];
                spec.forEach((item) => {
                    this.specList.push({
                        id: item.id,
                        name: item.name,
                        selectId: 0,
                        spec_value: item.spec_value
                    })
                })
            },
            changeChoice(type,id){
                this.specList.map(item => {
                    if(item.id == type){
                        item.selectId = id;
                    }
                    return item;
                })
            },
            sub(){
                let all = true;
                for(let i=0;i<this.specList.length;i++){
                    if(!this.specList[i].selectId){
                        all = false;
                        break;
                    }
                }
                if(!all){
                    this.$layer.msg('请选择商品分类！')
                    return false;
                }
                if(!this.num){
                    this.$layer.msg('请添加商品！')
                    return false;
                }
                this.paymentShow = true;
            },
            close(){
                this.$emit('input',false)
            },
            count(num){
                this.num = num;
            }
        }
    }
</script>

<style lang="less" scoped>
    .spec{
        position: relative;
        height: 100%;
        padding-bottom: 50px;

        .spec-box{
            padding: 0 12px;
            height: 100%;
            overflow-x: hidden;
            overflow-y: auto;
        }
    }
    .spec-box{
        .spec-list{
            .spec-item{
                margin: 11px 0;
                display: flex;
                line-height: 25px;

                .title{
                    flex: 0 0 auto;
                    margin-right: 10px;
                    width: 30px;
                    color: #666666;
                    font-size: 12px;
                }
                .list-box{
                    flex: 1;
                    font-size: 11px;
                    line-height: 25px;

                    .item{
                        display: inline-block;
                        padding: 0 10px;
                        margin-bottom: 5px;
                        height: 25px;
                        margin-right: 8px;
                        background: #F2F2F2;
                        color: #111;
                        border-radius: 25px;

                        &.z-active{
                            background: #F14936;
                            color: #fff;
                        }
                    }
                }
            }
        }
        .close{
            position: absolute;
            right: 12px;
            top: 12px;
            width: 25px;
            height: 25px;
            background: url("./img/close.png") no-repeat center center;
            background-size: 19px 19px;
        }
    }
    .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;
        }
    }
    .payment-box{
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 900;
        width: 100%;
        height: 100%;
            
        .mask{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .box{
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: auto;
            background-color: #fff;
        }
    }
</style>