<template>
    <div class="feature-selector" :class="{ 'slide-in': isVisible }">
        <div class="header">
            <div class="image-box">
                <img :src="selection.thumbnail | resize 45 60"/>
            </div>
            <div class="text-box">
                <h3>{{entity.productName}}</h3>
                <h4>{{entity.productPriceBo.formatSalesPrice}}</h4>
            </div>
        </div>

        <hr>

        <div>
            <section>
                <h4>颜色</h4>
                <feature-options name="color" :options="colors" :selection="selection.color"></feature-options>
            </section>
            <section>
                <h4>尺码</h4>
                <feature-options name="size" :options="sizes" :selection="selection.size"></feature-options>
            </section>
            <button @click="addToCart()"
                    class="button button-solid add-to-cart">加入购物袋
            </button>
        </div>
    </div>
</template>
<style src="./css/feature-selector.css"></style>
<script src="./js/feature-selector.js"></script>