<template>
  <div class="goodCard" :style="{ 'margin-bottom': info.activityInfo ? '12px' : '0' }">
    <good-activity v-if="info.activityInfo" :info="info.activityInfo" />
    <div class="skuList">
      <div
        v-for="(item, index) in info.skus"
        :key="index"
        class="good"
        :class="{ noActivity: !info.activityInfo }"
      >
        <cr-swipe-cell ref="swipeCell" @touchstart.native="handleSwiperCellClose(index)">
          <template #default>
            <Good
              :id="`${idx}_${index}`"
              ref="good"
              :key="index"
              :value="item"
              :idx="idx"
              :index="index"
              :position="position"
              @getPosition="getPosition"
              @openEditNumDialog="openEditNumDialog"
              @change="changeGoodSelectStatus"
            />
          </template>
          <template #right>
            <!-- <cr-button
              square
              color="#f5a623"
              icon="https://appsync.lkbang.net/Fuiarw-wKkGrQQVu9BTn71-WRrXa"
              @click="delGood([item])"
            >
              找相似</cr-button
            > -->
            <div class="rightBtn">
              <cr-button
                square
                type="danger"
                icon="https://appsync.lkbang.net/FiF_WYbRmzPrrLZuQb1Sl5uFlUpx"
                @click="delGood([item])"
              >
                删除</cr-button
              >
            </div>
          </template>
        </cr-swipe-cell>
      </div>
    </div>
  </div>
</template>
<script>
import Good from './goodItem.vue';
import { mapActions } from '../shopCartModules';
import GoodActivity from './goodActivity.vue';
export default {
  inject: ['cart'],
  components: {
    Good,
    GoodActivity
  },
  props: {
    info: {
      type: Object,
      default: () => {}
    },
    idx: Number
  },
  data() {
    return {
      position: ''
    };
  },
  methods: {
    ...mapActions({
      delGood: 'del_cart_good'
    }),
    getPosition(idx, index) {
      const ele = document.getElementById(`${idx}_${index}`);
      const pos = ele.getBoundingClientRect();
      this.position = pos.bottom > document.body.clientHeight / 2 ? 'top' : 'bottom';
      this.cart.priceChange();
    },
    closeModal() {
      this.$refs.good.forEach(item => {
        item.closeModal();
      });
    },
    handleSwiperCellClose(goodsIdx) {
      this.$refs.swipeCell?.forEach((item, idx) => {
        if (goodsIdx !== idx) {
          item.close();
        }
      });
      goodsIdx > -1 && this.$emit('handleSwiperCellClose', this.idx);
    },
    changeGoodSelectStatus() {
      //
      // this.$set(this.goodInfo, index, obj);
    },
    toRecommend(url) {
      window.location.href = url;
    },
    openEditNumDialog(idx, index, goodInfo) {
      this.$emit('openEditNumDialog', { idx, index, goodInfo });
    }
  }
};
</script>
<style lang="less" scoped>
.goodCard {
  border-radius: 8px;
  // background: #ffffff;
}
.right {
  display: flex;
}
.noActivity {
  margin-bottom: 12px;
  .good {
    border-radius: 8px;
  }
}
::v-deep .cr-button--normal {
  padding: 0;
  width: 70px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  // border-radius: 0 8px 8px 0;
}
::v-deep .rightBtn .cr-button--normal {
  border-radius: 0 8px 8px 0;
}
::v-deep .cr-button__text {
  margin-top: -14px;
}
::v-deep .cr-swipe-cell__right {
  display: flex;
}
</style>
