<template>
    <div>
        <v-touch class="items" 
            v-if="item.show"
            v-for="(item, index) in list" 
            :key="index"
            @swipeleft="swipeleft(index)"
            @swiperight="swiperight(index)"  
            :class="{showbtn:item.isshowbtn,xiajia:!item.status,shouwan:!item.storage}" 
            :swipe-options="{ direction: 'horizontal', threshold: 10}">
            <div class="wrap">
                <a :href="item.goodsUrl">
                    <img :src='item.image'>
                    <div class="right">
                        <div class="main-title">{{item.product_name}}</div>
                        <div class="price">
                            <span class="market" :class="{underline:item.sales_price}">¥{{item.market_price}}</span><span class="sales" v-if="item.sales_price">¥{{item.sales_price}}</span>
                        </div>
                    </div>
                </a>
            </div>
            <v-touch class="delete" @tap="deleteItem(index)"><span><i></i>删除</span></v-touch>
        </v-touch>
    </div>
</template>
<script>
    export default {
        props: ['list'],
        methods: {
            deleteItem(inx) {
                this.$emit('deleteskn', inx);
            },
            swipeleft(inx) {
                this.$emit('showbutton', inx);
            },
            swiperight(inx) {
                this.$emit('hidebutton', inx);
            }
        }
    };
</script>
<style>
    .items {
        border-bottom: 1px solid #eee;
        overflow: hidden;
        position: relative;

        .wrap {
            padding: 20px 26px 20px 30px;
            height: 203px;
            position: relative;

            a {
                display: block;
                height: 163px;
            }
        }

        img {
            padding: 20px 0 20px 30px;
            width: 150px;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }

        .right {
            padding-left: 176px;
            width: 100%;
            height: 100%;
            font-size: 30px;

            .main-title {
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
            }

            .price {
                margin-bottom: 60px;
                margin-top: 5px;
                text-align: left;
                color: #b0b0b0;
                font-size: 22px;
            }

            .sales {
                color: #f00;
                display: inline-block;
                margin-left: 7px;
            }

            .underline {
                text-decoration: line-through;
            }
        }

        .delete {
            position: absolute;
            right: 0;
            top: 0;
            background: #f00;
            color: #fff;
            width: 126px;
            height: 100%;
            text-align: center;
            line-height: 203px;
            display: none;

            i {
                display: block;
                width: 36px;
                height: 46px;
                background: resolve("me/delete.png") no-repeat;
                background-size: 100% 100%;
                margin: 0 auto 14px;
            }

            span {
                display: inline-block;
                vertical-align: middle;
                width: 100%;
                text-align: center;
                line-height: 1;
                font-size: 22px;
            }
        }

        &.showbtn {
            .wrap {
                left: -126px;
            }

            .delete {
                display: block;
            }
        }

        &.xiajia {
            .main-title {
                color: #b0b0b0;
            }

            .price {
                color: #b0b0b0;
            }
        }

        &.shouwan {
            .wrap:after{
                content: '已售完';
                position: absolute;
                bottom: 15px;
                right: 30px;
                width: 95px;
                height: 30px;
                background: #b0b0b0;
                color: #fff;
                text-align: center;
                line-height: 30px;
                border-radius: 16px;
            }
        }

        &.xiajia {
            .wrap:after{
                content: '已下架';
                position: absolute;
                bottom: 15px;
                right: 30px;
                width: 95px;
                height: 30px;
                background: #b0b0b0;
                color: #fff;
                text-align: center;
                line-height: 30px;
                border-radius: 16px;
            }
        }
    }
</style>