<template>
    <div>
        <div class="biggestBox">
            <div>
                <!-- data-type=0 隱藏刪除按鈕 data-type=1 顯示刪除按鈕 -->
                <div class="li_vessel" v-for="(item,index) in lists " data-type="0" :key="index">
                    <!-- "touchstart" 當手指觸摸屏幕時候觸發(fā)  "touchend"  當手指從屏幕上離開的時候觸發(fā)  "capture" 用于事件捕獲-->
                    <div @touchstart.capture="touchStart" @touchend.capture="touchEnd" @click="oneself">
                        <div class="contant">
                            <div class="imgico">
                                <img class="image" :src="item.imgUrl" />
                                <div class="label">新品</div>
                            </div>
                            <div class="rightBox">
                                <div class="title">牛排A</div>
                                <div class="Sold">已售999</div>
                                <div class="money"> <span>1積分+</span><span>￥14.00</span> <span>/￥20.00</span> </div>
                                <div class="look">查看</div>
                            </div>
                        </div>
                    </div>
                    <div class="removeBtn" @click="remove" :data-index="index">取消</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "index",
        data() {
            return {
                lists: [{
                    title: "標題1",
                    imgUrl: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg",
                    subheading: "副標題1",
                    faddish: "爆款",
                    price: "￥12.00",
                },
                {
                    title: "標題2",
                    imgUrl: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg",
                    subheading: "副標題2",
                    faddish: "爆款",
                    price: "￥58.00",
                },
                {
                    title: "標題3",
                    imgUrl: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg",
                    subheading: "副標題3",
                    faddish: "爆款",
                    price: "￥99.99",
                },
                {
                    title: "標題4",
                    imgUrl: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg",
                    subheading: "副標題4",
                    faddish: "爆款",
                    price: "￥88.32",
                },
                {
                    title: "標題5",
                    imgUrl: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg",
                    subheading: "副標題5",
                    faddish: "爆款",
                    price: "￥9999.99",
                },
                ],
                startX: 0, //滑動開始
                endX: 0, //滑動結(jié)束
            };
        },
        methods: {
            // 向左滑動出現(xiàn)刪除按鈕時，點擊商品信息區(qū)域取消刪除
            oneself() {
                if (this.checkSlide()) {
                    this.restSlide();
                } else {
                    // 點擊商品信息彈出彈框
                    console.log("點擊當前商品觸發(fā)事件...");
                }
            },
            //滑動開始
            touchStart(e) {
                // 記錄初始位置
                this.startX = e.touches[0].clientX;
            },
            //滑動結(jié)束
            touchEnd(e) {
                // 當前滑動的父級元素
                let parentElement = e.currentTarget.parentElement;
                // 記錄結(jié)束位置
                this.endX = e.changedTouches[0].clientX;
                // 左滑大于30距離刪除出現(xiàn)
                if (parentElement.dataset.type == 0 && this.startX - this.endX > 30) {
                    this.restSlide();
                    parentElement.dataset.type = 1;
                }
                // 右滑
                if (parentElement.dataset.type == 1 && this.startX - this.endX < -30) {
                    this.restSlide();
                    parentElement.dataset.type = 0;
                }
                this.startX = 0;
                this.endX = 0;
            },
            //判斷當前是否有滑塊處于滑動狀態(tài)
            checkSlide() {
                let listItems = document.querySelectorAll(".li_vessel");
                for (let i = 0; i < listItems.length; i++) {
                    if (listItems[i].dataset.type == 1) {
                        return true;
                    }
                }
                return false;
            },
            //復位滑動狀態(tài)
            restSlide() {
                let listItems = document.querySelectorAll(".li_vessel");
                // 復位
                for (let i = 0; i < listItems.length; i++) {
                    listItems[i].dataset.type = 0;
                }
            },
            //刪除數(shù)據(jù)信息
            remove(e) {
                // 當前索引值
                let index = e.currentTarget.dataset.index;
                // 復位
                this.restSlide();
                // 刪除數(shù)組lists中一個數(shù)據(jù)
                this.lists.splice(index, 1);
            },
        },
    };
</script>

<style scoped>
    .biggestBox {
        overflow: hidden;
        /*超出部分隱藏*/
    }

    .li_vessel {
        /* 全部樣式 0.2秒 緩動*/
        transition: all 0.2s;
    }

    /* =0隱藏 */
    .li_vessel[data-type="0"] {
        transform: translate3d(0, 0, 0);
    }

    /* =1顯示 */
    .li_vessel[data-type="1"] {
        /* -64px 設(shè)置的越大可以左滑的距離越遠，最好與下面刪除按鈕的寬度以及定位的距離設(shè)置一樣的值*/
        transform: translate3d(-64px, 0, 0);
    }

    /* 刪除按鈕 */
    .removeBtn {
        width: 1.28rem;
        height: 2.06rem;
        background: #FF7373;
        font-size: .3rem;
        color: #fff;
        text-align: center;
        line-height: .44rem;
        position: absolute;
        top: 0px;
        right: -1.28rem;
        line-height: 2.06rem;
        text-align: center;
        border-radius: 2px;
    }

    /* 左邊的圖片樣式 */
    .contant {
        overflow: hidden;
        /*消除圖片帶來的浮動*/
        padding: .2rem .3rem;
        background: #ffffff;
    }

    .imgico {
        width: 1.6rem;
        height: 1.6rem;
        float: left;
        position: relative;
    }

    .label {
        position: absolute;
        top: -0.07rem;
        right: -0.05rem;
        width: .68rem;
        height: .28rem;
        background: linear-gradient(135deg, #FF5858 0%, #FF736B 100%);
        border-radius: 0px .16rem 0px .08rem;
        font-size: .18rem;
        color: #fff;
        text-align: center;
        line-height: .28rem;
    }

    .image {
        width: 1.6rem;
        height: 1.6rem;
        border-radius: .16rem;
    }

    /* 右邊的文字信息樣式 */
    .rightBox {
        overflow: hidden;
        padding-left: 8px;
        position: relative;
    }
    .look{
        width: 1.08rem;
        height: .44rem;
        background: #FFFFFF;
        border-radius: .22rem;
        border: 1px solid #489EFF;
        color: #489EFF;
        text-align: center;
        line-height: .44rem;
        font-size: .24rem;
        position: absolute;
        bottom: .1rem;
        right: 0rem;
    }

    .title {
        color: #333333;
        font-weight: bold;
        font-size: .3rem;
    }

    .Sold {
        font-size: .2rem;
        color: #999999;
    }

    .money {
        margin-top: .3rem;
    }

    .money>span:nth-child(1) {
        font-size: .3rem;
        font-weight: bold;
        color: #333333;
    }

    .money>span:nth-child(2) {
        font-size: .38rem;
        font-weight: bold;
        color: #333333;
    }

    .money>span:nth-child(3) {
        font-size: .2rem;
        font-weight: normal;
        color: #999999;
    }
</style>