<template>
  <view class="collect-btn justify-center" :style="customStyle" @tap="toggleCollect">
    <image :src="isCollected ? $img1('index/sc1.png') : $img1('index/sc2.png')"></image>
    <text>收藏</text>
  </view>
</template>

<script>
export default {
  name: 'CollectBtn',
  props: {
    goodsId: {
      type: [Number, String],
      required: true
    },
    goodsNum: {
      type: [Number, String],
      required: true
    },
    isCollected: {
      type: Boolean,
      default: false
    },
    customStyle: {
      type: String,
      default: 'position: absolute; right: 0; top: 56rpx; margin-right: 48rpx;'
    }
  },
  data() {
    return {
      collecting: false
    }
  },
  methods: {
    toggleCollect() {
      if (this.collecting) return;
      this.collecting = true;
      this.req({
        url: 'addCollect',
        data: {
          goods_id: this.goodsId,
          goods_num: this.goodsNum
        },
        success: res => {
          if (res.status == 1) {
            this.$emit('collection-changed', !this.isCollected);
          }
        },
        complete: () => {
          this.collecting = false;
        }
      })
    }
  }
}
</script>

<style lang="scss">
.collect-btn {
  width: 65rpx;
  height: 95rpx;
  box-sizing: border-box;
  flex-direction: column;

  
  > image {
    width: 64rpx;
    height: 64rpx;
  }
  
  > text {
    width: 100%;
    text-align: center;
    font-weight: 400;
    font-size: 20rpx;
    color: #FFFFFF;
    margin-top: 4rpx;
    text-shadow: #000 1px 0 0, #000 0 1px 0, #000 -1px 0 0, #000 0 -1px 0;
  }
}
</style> 