<template>
  <view @click="xz">
     <view
      class="shoppingCartshop"
      @touchmove="handletouchmove"
      @touchstart="handletouchstart"
      @touchend="handletouchend"
     v-if="ifdel"
    >
    <!-- ../../static/img/selected.png -->
      <view class="shopdetail">
        <img :src="shoppic" alt class="cartshop" />
        <view class="shopinfo">
          <view class="shopname">{{shopname}}</view>
          <view class="shopinfodown">
            <text class="price">
              <text>￥</text>
              <text class="money">{{zhengshu}}</text>
              <text>.{{xiaoshu}}</text>
            </text>
            <!-- <text class="btn">活动商品</text>
            <text class="btn1">限购五件</text> -->
          </view>
        </view>
      </view>
      <view class="num">x{{num}}</view>
       <view class="del" @click.stop="del">删除</view>
    </view>
    <view
      class="shoppingCartshop"
      @touchmove="handletouchmove"
      @touchstart="handletouchstart"
      @touchend="handletouchend"
      v-else
    >
    <!-- ../../static/img/selected.png -->
      <img :src="ifselect?'../../static/img/selected.png':'../../static/img/cartselect.png'" alt class="xz" />
      <view class="shopdetail">
        <img :src="shoppic" alt class="cartshop" />
        <view class="shopinfo">
          <view class="shopname">{{shopname}}</view>
          <view class="shopinfodown">
            <text class="price">
              <text>￥</text>
              <text class="money">{{zhengshu}}</text>
              <text>.{{xiaoshu}}</text>
            </text>
            <!-- <text class="btn">活动商品</text>
            <text class="btn1">限购五件</text> -->
          </view>
        </view>
      </view>
      <view class="num">x{{num}}</view>
    </view>
  </view>
</template>

<script>
export default {
  name: "shoppingCartshop",
  data() {
    return {
      flag: 0,
      text: "",
      lastX: 0,
      lastY: 0,
      ifdel: false,
      zhengshu: 0,
      xiaoshu: "00",
      ifselect:false
    };
  },
  props: {
    shoppic: {
      type: String
    },
    shopname: {
      type: String
    },
    money: {
      type: Number
    },
    num: {
      type: Number
    },
    ifxz:{
      type:Boolean
    },
    no:{
      type:Number
    },
    goodsid:{
      type:Number
    }
  },
  watch:{
    ifxz(){
      this.ifselect = this.ifxz
    }
  },
  mounted() {
    var money = this.money.toString().split(".");
    this.zhengshu = money[0];
    this.xiaoshu = money[1];
    //  console.log(this.zhengshu,100)
    //  console.log(this.xiaoshu,100)
  },
  methods: {
    del(){
      this.$emit("del",this.no)
    },
    handletouchmove: function(event) {
      // console.log(event)
      if (this.flag !== 0) {
        return;
      }
      let currentX = event.touches[0].pageX;
      let currentY = event.touches[0].pageY;
      let tx = currentX - this.lastX;
      let ty = currentY - this.lastY;
      let text = "";
      this.mindex = -1;
      //左右方向滑动
      if (Math.abs(tx) > Math.abs(ty)) {
        if (tx < 0) {
          text = "向左滑动";
          this.flag = 1;
          console.log("左");
          this.ifdel = true;
          //  this.getList();  //调用列表的方法
        } else if (tx > 0) {
          text = "向右滑动";
          this.flag = 2;
          console.log("右");
          this.ifdel = false;
        }
      }
      //上下方向滑动
      else {
        if (ty < 0) {
          text = "向上滑动";
          this.flag = 3;
          //  this.getList();  //调用列表的方法
        } else if (ty > 0) {
          text = "向下滑动";
          this.flag = 4;
        }
      }

      //将当前坐标进行保存以进行下一次计算
      this.lastX = currentX;
      this.lastY = currentY;
      this.text = text;
    },
    handletouchstart: function(event) {
      // console.log(event)
      this.lastX = event.touches[0].pageX;
      this.lastY = event.touches[0].pageY;
    },
    handletouchend: function(event) {
      this.flag = 0;
      this.text = "没有滑动";
    },
    xz(){
      this.ifselect=this.ifselect==false?true:false
      this.$emit('selected',[this.ifselect,this.no]);
      this.$emit('dianji',true)
      // this.$emit("order",this.no)
      // console.log(this.no)
      // console.log(this.ifxz)
    }
  }
};
</script>

<style lang="scss">
.shoppingCartshop {
  height: 197upx;
  background-color: white;
  display: flex;
  justify-content: space-between;
  .xz {
    width: 27upx;
    height: 27upx;
    margin: auto 0;
    margin-left: 21upx;
  }
  .shopdetail {
    // width: 476upx;
    height: 154upx;
    margin: auto 0;
    display: flex;
    .cartshop {
      width: 149upx;
      height: 154upx;
    }
    .pic1 {
      margin-left: -89upx;
    }
    .shopinfo {
      width: 490upx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      color: #151515;
      font-size: 26upx;
      .shopname {
        margin-left: 15upx;
      }
      .price {
        color: #e13249;
        font-size: 26upx;
        margin-left: 14upx;
        margin-right: 10upx;
        .money {
          font-size: 34upx;
        }
      }
      .btn {
        padding: 7upx 5upx;
        background-color: #e0314b;
        border: 2upx solid #e0314b;

        color: white;
        font-size: 20upx;
      }
      .btn1 {
        padding: 7upx 5upx;
        background-color: white;
        color: #e0314b;
        font-size: 20upx;
        margin-left: 3upx;
        border: 2upx solid #e0314b;
        // box-sizing: border-box;
      }
    }
  }
  .num {
    position: relative;
    top: 152upx;
    right: 44upx;
    color: #000000;
    font-size: 18upx;
    height: 22rpx;
    // margin-left: 151upx;
  }
  .del {
    width: 133upx;
    background-color: #df3347;
    font-size: 30upx;
    color: white;
    text-align: center;
    line-height: 197upx;
  }
}
</style>