/*
    选择的商品信息
*/
<template>
    <div class="warpper">
        <div class="img">
            <img :src="info.imgs[0]" alt="">
        </div>
        <div class="content">
            <div class="name">{{info.name}}</div>
            <div class="change" v-if="confStr">已选：{{confStr}}</div>
            <div class="price"><span class="unit">￥</span><span>{{info.price}}</span></div>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            info: {},
            specList: {}
        },
        computed: {
            confStr(){
                let str = '';
                for(let i=0;i<this.specList.length;i++){
                    let listItem = this.specList[i];
                    if(listItem.selectId){
                        for(let j=0;j<listItem.spec_value.length;j++){
                            let item = listItem.spec_value[j];
                            if(listItem.selectId == item.id){
                                str += item.name + ' '
                            }
                        }
                    }
                }
                return str;
            }
        },
    }
</script>

<style lang="less" scoped>
    .warpper{
        display: flex;
        padding: 12px 0;
        border-bottom: 1px solid #DBDBDB;

        .img{
            flex: 0 0 auto;
            width: 75px;
            height: 75px;
            margin-right: 12px;

            img{
                display: block;
                width: 100%;
                height: 100%;
            }
        }
        .content{
            position: relative;
            flex: 1;
            padding-right: 30px;

            .name{
                min-height: 20px;
                line-height: 20px;
                font-size: 13px;
                color: #111;
            }
            .change{
                min-height: 15px;
                line-height: 15px;
                font-size: 11px;
                color: #666;
            }
            .price{
                margin-top: 5px;
                height: 25px;
                line-height: 25px;
                color: #F14936;
                font-size: 16px;

                .unit{
                    font-size: 9px;
                }
            }
        }
    }
</style>