<template>
  <div  class="car-group">
    <div class="car-item">
      <div class="store-info">
        <div style="display:flex">
          <div class="circle"></div>
          <!-- isMaterial -->
          <div class="store-name" v-if="isMaterial">物料店</div>
          <!-- v-if="storeID!=='666666' && storeMap" -->
          <div class="store-name" v-else >{{storeMap[storeID].name}}</div>
          <!-- <div class="store-name" v-else="storeID!=='666666'">物料店</div> -->
        </div>
        <!-- <div class="waybillSLG">
          <span >购满￥{{ waybillSLG.satisfy }}减￥{{waybillSLG.reduce}}运费</span>
        </div>
        <div style="display:flex">
          <div>去凑单</div>
          <div class="icon-right-aw"></div>
        </div> -->
        <!-- <div class="store-mobile" @click="call(storeMap[storeID].mobile)">{{storeMap[storeID].mobile}}</div> -->
      </div>
      <!-- style="border:1rpx solid red;" -->
      <div 
          v-for="(skuName, index) in skuNamesNew"
          :key="index" 
          class="skuName-item"
          :style="{'transform': 'translateX(' + skuName.offset + 'px)'}"
          @touchmove="touchmove_cart" 
          @touchstart="touchstart_cart($event,index)" 
          @touchend="touchend_cart"
          >
        <div class="skuName-cell">
          <check-item
            v-if="!isMaterial"
            @on-click="checkSkuName(skuName, index)"
            :checked="skuName.checked"
          ></check-item>
          <good-cell
            :titleWidth="isMaterial?'482rpx':'412rpx'"
            ref="goodCell"
            class="flex-auto"
            :index="index"
            :skuName="skuName"
            :noBorder="true"
            :waitShow="false"
            type="cart"
            @handleSkuNamePlus="handleSkuNamePlus"
            @handleSkuNameMinus="handleSkuNameMinus($event, skuName)"
            @handleSkuNameChange="handleSkuNameChange"
          ></good-cell>
        </div>
        <div  class="delButton" @click.stop="del(index)" :style="delBtnHenght">删除</div>
      </div>

    </div>

    
  </div>
</template>

<script>
import GoodCell from "@/components/goodCmp/good-cell/good-cell.vue";
import CheckItem from "@/components/checkItem/check-item.vue";
import { errToast, modal } from "@/utils/uniapi.js";
import { mapGetters } from "vuex";
// import { msgData } from "@/config";
export default {
  components: {
    GoodCell,
    CheckItem,
  },
  provide() {
    return {
      shopCar: true,
    };
  },
  props: {
    storeID: {
      type: String,
    },
    skuNames: {
      type: Array,
    }
  },
  data() {
    return {
      checked: true,
      currentIndex: -1,
      skuNamesNew: [],
      moveX: 0,
      offsetDistance: 50,
      delBtnHenght:'height: 260rpx;'   // 140rpx
    };
  },
  created() {
    // console.log('打印手机系统信息', this.iosOrAndroid, '宽度', this.iosOrAndroid.screenWidth)
    if (this.iosOrAndroid && this.iosOrAndroid.screenWidth) {
      this.offsetDistance = (this.iosOrAndroid.screenWidth * 50) / 375 
      // console.log('查看偏移的宽度',this.offsetDistance)
    }
    // 750 260*2
    // 1080 x
    // x = (this.iosOrAndroid.screenHeight *260*2 )/ (750 * 2)
  },
  watch: {
    skuNames: {
      handler(val) {
        this.skuNamesNew = []
        val.forEach((item,index) => {
          // #ifdef MP-WEIXIN
          if (item.checked === false && item.storeID === 666666 ) {
          this.checkSkuName(item,index)
          }
			    // #endif
          this.skuNamesNew.push({
            ...item,
            offset:0
          })
        });
      },
      immediate: true,
      deep:true
    }
  },
  computed: {
    ...mapGetters({
      storeMap:"indexPage/storeMap",
      isMaterial: "indexPage/isMaterial",
      iosOrAndroid: "iosOrAndroid"
    })
  },
  methods: {
    // 删除商品
    async del(index) {
      this.handleSkuNameChange({index,count:0})
    },
    touchstart_cart(e, index) {
      // console.log('打印移动开始时的信息',e)
      if (this.currentIndex !== -1 && this.currentIndex !== index) {
        if (this.skuNamesNew[this.currentIndex]) {
          this.skuNamesNew[this.currentIndex].offset = 0
        }
      }
      this.moveX = e.changedTouches[0].pageX
      // this.skuNamesNew[index].offset = -50
      this.currentIndex = index
    },
    touchmove_cart(e) {
      let distance = 0

      // 向右滑动
      if (e.changedTouches[0].pageX - this.moveX >= 0) {
        distance = 0
        // if (e.changedTouches[0].pageX - this.moveX >= 50) {
        //   distance = 50
        // } else {
        //   distance = e.changedTouches[0].pageX - this.moveX
        // }
      }

      // 向左滑动
      if (e.changedTouches[0].pageX - this.moveX < 0) {
        if (Math.abs(e.changedTouches[0].pageX - this.moveX) >= this.offsetDistance) {
          // distance = -50
          distance = - this.offsetDistance
        } else {
          distance = 0 - Math.abs(e.changedTouches[0].pageX - this.moveX)
        }
      }

      // 偏移
      this.skuNamesNew[this.currentIndex].offset = distance
    },
    // 手指松开后
    touchend_cart(e) {
      let distance = e.changedTouches[0].pageX - this.moveX
      if (distance >0) {
        // this.skuNamesNew[this.currentIndex].offset = distance >= 50?50: 0
        this.skuNamesNew[this.currentIndex].offset = 0
      }
     if(distance<0) {
        this.skuNamesNew[this.currentIndex].offset = Math.abs(distance) >= this.offsetDistance?0-this.offsetDistance: 0
     }
    },
    // 商品 +
    handleSkuNamePlus(index) {
      this.$emit("handleSkuNamePlus", {
        index,
        key: this.storeID,
      });
    },
    // 商品 -
    handleSkuNameMinus(index, skuName, count = 2) {
      // console.log('商品减少--------')
      this.$emit("handleSkuNameMinus", {
        index,
        key: this.storeID,
        countNew:count
      });
    },
    handleSkuNameChange({ index, count }) {
      this.$emit("handleSkuNameChange", {
        index,
        count,
        key: this.storeID,
      });
    },
    // check商品
    async checkSkuName(skuName, index) {
      try {
        
        // 修改store里面
        await this.$store.dispatch("cartPage/checkSkuName", {
          skuName,
          checkStatus: !skuName.checked,
        });
        // 通知父级修改
        this.$emit("handleSkuNameCheck", {
          index,
          key: this.storeID,
          checkStatus: !skuName.checked,
        });
      } catch (e) {
        console.error(e);
        errToast(e);
      }
    },
    // 打电话
    async call(phoneNumber) {
      if (phoneNumber) {
        let confirm = await modal("拨打电话", "是否拨打门店电话");
        if (confirm) uni.makePhoneCall({ phoneNumber });
      }
    },
  },
};
</script>

<style lang="scss">
@import "./car-group.scss";
</style>