<template>
  <div class="ruleMaskDiv" v-if="show">
    <div class="basicMaskDiv" @click="closeClick()">
      <div class="basicPopDiv" @click="stopClickEmpty">
        <div class="header">
          购物车
          <img
            src="//img10.360buyimg.com/imgzone/jfs/t1/230712/18/16222/3571/660cb4a7Fe2c42972/aaee4cb08a57d13f.png"
            alt=""
            @click="closeClick"
          />
        </div>
        <div class="content">
          <div
            v-for="(group, taskType, index) in groupedData"
            class="group"
            :key="timer"
          >
            <div class="content-head">
              <div class="label">{{ group[0].quota }}选{{ group[0].rate }}</div>
              <div class="clear" @click="emptyCar" v-if="index == 0">
                <img
                  src="//img10.360buyimg.com/imgzone/jfs/t1/249504/14/6806/541/660cb9a3F1cef8b79/7de6171a64329088.png"
                  alt=""
                />
                清空购物车
              </div>
            </div>
            <div v-for="(item, index) in group" :key="index" class="item">
              <img :src="item.skuImg" alt="" />
              <div>
                <div
                  style="line-height: 0.27rem;height: 0.52rem;"
                  class="text-hide2"
                >
                  {{ item.skuName }}
                </div>
                <div class="label" style="margin: 0.08rem 0;">
                  {{ group[0].quota }}选{{ group[0].rate }}
                </div>
                <div class="flex-box">
                  <div class="price">￥{{ item.skuPrice }}</div>
                  <van-stepper
                    @change="changeNum($event, item.skuId)"
                    v-model="item.num"
                    :min="0"
                    integer
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: [],

  data() {
    return {
      timer: Date.now(),
      groupedData: [],
      updatedData: []
      // show:true
    };
  },
  created() {
    this.updatedData = this.datas;
    document
      .querySelector("body")
      .setAttribute(
        "style",
        "position:#fixed;top:0;height:100%;overflow:hidden"
      );

    this.initData();
  },
  methods: {
    initData() {
      console.log("updatedData", this.updatedData);
      const groupedData = this.updatedData.reduce((acc, currentValue) => {
        const { taskType } = currentValue;

        // 如果已经存在该 taskType 的数组，则将当前对象添加到对应的数组中
        if (acc[taskType]) {
          acc[taskType].push(currentValue);
        } else {
          // 否则，创建一个新的数组，并将当前对象添加到新数组中
          acc[taskType] = [currentValue];
        }

        return acc;
      }, {});
      this.groupedData = groupedData;
      this.timer = new Date().getTime();
      console.log(groupedData);
    },
    changeNum(val, skuId) {
      if (!val) {
        let del = "";
        this.updatedData.forEach((e, index) => {
          if (e.skuId == skuId) {
            del = index;
          }
        });
        this.updatedData.splice(del, 1);
      }
      this.initData();
      this.submit(1);
    },
    emptyCar() {
      this.submit(2);
    },
    closeClick() {
      document.querySelector("body").removeAttribute("style");
      this.submit(3);
    },
    //阻止冒泡
    stopClickEmpty(event) {
      event.stopPropagation();
    }
  }
};
</script>

<style lang="scss">
.basicMaskDiv {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba($color: #000000, $alpha: 0.7);
  top: 0;
  bottom: 0;
  z-index: 200;
  .basicPopDiv {
    position: fixed;
    bottom: 0;
    // max-height: 10.57rem;
    background: #f2f2f2;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    width: 100%;
    z-index: 201;
    .header {
      font-size: 0.36rem;
      background-color: #fff0d9;
      color: #111;
      height: 0.92rem;
      line-height: 0.92rem;
      text-align: center;
      position: relative;
      img {
        position: absolute;
        top: 0.23rem;
        right: 0.3rem;
        width: 0.49rem;
      }
    }
    .content {
      height: 7.5rem;
      overflow-y: scroll;
      padding: 0 0.3rem;
      word-break: break-all;
      line-height: 0.4rem;
      font-size: 0.23rem;
      background-color: #fff;
      padding-bottom: 1.48rem;
      .clear {
        height: 0.33rem;
        display: flex;
        align-items: center;
        img {
          width: 0.3rem;
          margin-right: 0.12rem;
        }
      }
      .group {
        padding-top: 0.32rem;
        margin-bottom: 0.2rem;
      }
      .label {
        max-width: 1.5rem;
        height: 0.47rem;
        border-radius: 0.24rem;
        border: 1px solid #fe792e;
        color: #ff772d;
        text-align: center;
        line-height: 0.47rem;
        padding: 0 0.16rem;
        word-break: keep-all;
      }
      .content-head {
        width: 100%;
        border-bottom: 1px solid #e2e2e2;
        padding-bottom: 0.33rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .item {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #e2e2e2;
        padding: 0.24rem 0;
        font-size: 0.24rem;
        img {
          width: 1.5rem;
          height: 1.5rem;
          margin-right: 0.2rem;
        }
        .flex-box {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        .price {
          font-size: 0.3rem;
          color: #ff772d;
        }
      }
    }
  }
}
</style>
