<template>
  <div>
    <cr-popup
      :value="showPopup"
      class="good__popup"
      closeable
      position="bottom"
      round
      @close="setPopupState(false)"
      @click-overlay="setPopupState(false)"
    >
      <div v-if="popupControl.title" class="popup__head">{{ popupControl.title }}</div>
      <div class="popup__body">
        <pop-promotion v-if="popupControl.type === 'discountBar'" />
        <activity-rule v-if="popupControl.type === 'rule'" />
        <template v-if="showSku">
          <selected-sku :info="selectedSku" />
          <sku-attr-info
            :spec-list="skuAttrInfos"
            :spec-child-list="specChildList"
            @select="skuSelect"
          />
          <limit-count />
          <div class="sku-button">
            <cr-button
              v-for="(item, index) in btnGroup"
              :key="index"
              :type="item.type"
              :plain="item.plain"
              shape="circle"
              :disabled="goodsStatus !== 3 && goodsStatus !== 31"
              block
              @click="onClickRight({ index })"
            >
              {{ item.text }}
            </cr-button>
          </div>
        </template>
        <address-select v-if="popupControl.type === 'addr'" />
      </div>
    </cr-popup>
    <cr-image
      v-if="selectedSku.imageUrl"
      v-imogr="{ w: 150, h: 150 }"
      class="add-cart-img"
      :class="{ animate: startAnimate }"
      round
      :src="selectedSku.imageUrl"
      width="4rem"
      height="4rem"
    />
  </div>
</template>
<script>
import { mapState, mapActions, mapGetters } from '../store';
import toOrderMixin from '../mixins/toOrder.mixin';
import popPromotion from './popPromotion.vue';
import activityRule from './activityRule.vue';
import skuAttrInfo from './skuAttrInfo.vue';
import selectedSku from './selectedSku.vue';
import limitCount from './limitCount.vue';
import addressSelect from './addressSelect.vue';
import { getArrEqual } from '../utils/sku';

export default {
  name: 'CommonPopup',
  components: {
    popPromotion,
    activityRule,
    skuAttrInfo,
    selectedSku,
    limitCount,
    addressSelect
  },
  mixins: [toOrderMixin],
  computed: {
    ...mapState(['showPopup', 'popupControl']),
    ...mapGetters(['skuAttrInfos', 'specChildList', 'selectedSku', 'specSelected']),
    showSku() {
      return ['sku', 'cart', 'buy'].includes(this.popupControl.type);
    }
  },

  methods: {
    ...mapActions(['setPopupState', 'getGoodDetail']),
    skuSelect() {
      const { specSelected } = this;
      let skuNo = '';
      if (!specSelected || !specSelected.length) {
        skuNo = this.detailInfo.skuNo;
      } else {
        if (specSelected.length === 1) {
          skuNo = specSelected[0].skuNos[0];
        } else {
          skuNo = getArrEqual(specSelected[0].skuNos, specSelected[1].skuNos)[0] || '';
        }
      }
      if (!skuNo) return;
      this.getGoodDetail({ skuNo, noReset: true });
    },
    skuSelectConfirm() {
      const index = parseInt(this.popupControl.type);
      this.onClickRight({ index });
    }
  }
};
</script>
<style lang="less" scoped>
@{deep} .cr-popup--close-top-right {
  z-index: 99;
}
.popup {
  &__head {
    .text-size(16);
    font-weight: 500;
    color: @black;
    padding: @padding-sm 0;
    text-align: center;
    border-bottom: 1px solid #f2f3f5;
  }
  &__body {
    overflow: auto;
    height: 65vh;
    position: relative;
  }
}
.sku-button {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: auto;
  display: flex;
  padding: @padding-sm @padding-lg;
  .cr-button {
    &:last-child {
      margin-left: 8px;
    }
    &:first-child {
      margin-left: 0;
    }
  }
}
@keyframes addCart {
  0% {
    transform: scale(1.7);
    opacity: 0.5;
  }
  35% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
  60% {
    transform: translate(-20%, 30%) scale(0.8);
  }
  100% {
    transform: translate(-50%, 250%) scale(0.3);
  }
}

.add-cart-img {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  display: none;
  &.animate {
    display: block;
    animation: addCart 0.7s linear 0s;
  }
}
</style>
