<template>
  <transition name="scale" mode="out-in">
    <div class="shop-hot" v-if="info.id" :key="info.id">
      <div class="top">
        宝贝上架了，快来抢～
        <div class="close" @click="close"></div>
      </div>
      <div class="body">
        <div class="img-box">
          <img :src="`${info.real_img}?x-oss-process=style/commodity_cover`" alt="" />
        </div>
        <div class="content">
          <div class="name">{{ info.name }}</div>
          <div class="price-box">￥{{ info.price }}</div>
          <div class="pay">
            <div class="type">
              <div class="tag" v-if="info.type == 2">
                {{ info.source == 1 ? '外链' : info.source == 2 ? '口令' : '' }}
              </div>
            </div>
            <div class="btn" @click="buyShop(info)">去看看</div>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import { getRecommendGoods } from '@/plugins/API/apiShop';
import { mapGetters } from 'vuex';
export default {
  name: 'vertical-shop-hot',
  data() {
    return {
      info: {}
    };
  },
  computed: {
    ...mapGetters({
      channelInfo: 'channelInfo'
    })
  },
  mounted() {
    this.getRecommendGoods();
    this.$Bus.$on('bus-editShop', this.editShop);
    this.$Bus.$on('bus-deleteShop', this.deleteShop);
    this.$Bus.$on('bus-cancelShopBind', this.cancelShopBind);
    this.$Bus.$on('bus-setTopShop', this.setTopShop);
    this.$Bus.$on('bus-cancelTopShop', this.cancelTopShop);
  },
  methods: {
    async getRecommendGoods() {
      const res = await getRecommendGoods({
        includeId: this.channelInfo.id,
        uin: this.channelInfo.uin,
        type: 2
      });
      if (res.code === 200 && res.errorCode === 0) {
        this.info = res.data;
      } else {
        this.$layer.msg(res.errorMessage);
      }
    },
    editShop(data) {
      const { type, includeId, goodInfo } = data;
      if (type === 2 && this.channelInfo.id === includeId) {
        if (this.info.id === goodInfo.id) {
          this.info = goodInfo;
        }
      }
    },
    deleteShop(data) {
      const { type, includeId, goodInfo } = data;
      if (type === 2 && this.channelInfo.id === includeId) {
        if (this.info.id === goodInfo.id) {
          this.info = {};
        }
      }
    },
    cancelShopBind(data) {
      const { type, includeId, goodInfo } = data;
      if (type === 2 && this.channelInfo.id === includeId) {
        if (goodInfo.id.some(id => id === this.info.id)) {
          this.info = {};
        }
      }
    },
    setTopShop(data) {
      const { type, includeId, goodInfo } = data;
      if (type === 2 && this.channelInfo.id === includeId) {
        this.info = goodInfo;
      }
    },
    cancelTopShop(data) {
      const { type, includeId, goodInfo } = data;
      if (type === 2 && this.channelInfo.id === includeId) {
        if (this.info.id === goodInfo.id) {
          this.info = {};
        }
      }
    },
    buyShop() {
      this.$Bus.$emit('bus-buyShop', this.info);
    },
    close() {
      this.info = {};
    }
  },
  beforeDestroy() {
    this.$Bus.$off('bus-editShop', this.editShop);
    this.$Bus.$off('bus-deleteShop', this.deleteShop);
    this.$Bus.$off('bus-cancelShopBind', this.cancelShopBind);
    this.$Bus.$off('bus-setTopShop', this.setTopShop);
    this.$Bus.$off('bus-cancelTopShop', this.cancelTopShop);
  }
};
</script>
<style lang="less" scoped>
.shop-hot {
  position: relative;
  margin-bottom: 0.08rem;
  width: 2.35rem;
  height: 0.96rem;
  background-color: #fff;
  border-radius: 0.04rem;
  transform-origin: calc(100% - 0.18rem) 100%;
  transform: scale(1);
  &::after {
    content: '';
    display: block;
    position: absolute;
    right: 0.12rem;
    bottom: -0.12rem;
    border-width: 0.06rem;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
  }
  .top {
    position: relative;
    padding: 0 0.08rem;
    height: 0.18rem;
    line-height: 0.18rem;
    background-color: #ffefd5;
    border-radius: 0.04rem 0.04rem 0 0;
    font-size: 0.1rem;
    color: #ff9918;
    .close {
      position: absolute;
      right: 0;
      top: 0;
      width: 0.18rem;
      height: 0.18rem;
      background: url(./img/icon-close.png) no-repeat center center;
      background-size: 0.14rem auto;
    }
  }
  .body {
    height: 0.78rem;
    display: flex;
    align-items: center;
    .img-box {
      margin-left: 0.08rem;
      margin-right: 0.04rem;
      width: 0.6rem;
      height: 0.6rem;
      border-radius: 0.04rem;
      img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
    .content {
      padding: 0.06rem 0.04rem;
      flex: 1;
      width: 0;
      height: 100%;
      display: flex;
      flex-direction: column;
      .name {
        flex: 0 0 auto;
        height: 0.2rem;
        line-height: 0.2rem;
        font-size: 0.12rem;
        color: #26242d;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .price-box {
        flex: 1;
        height: 0.2rem;
        line-height: 0.2rem;
        color: #e9355f;
        font-size: 0.14rem;
      }
      .pay {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .type {
          .tag {
            display: inline-block;
            padding: 0 0.06rem;
            line-height: 0.18rem;
            border-radius: 0.02rem;
            border: 0.01rem solid #feebf1;
            font-size: 0.12rem;
            color: #e9355f;
          }
        }
        .btn {
          display: inline-block;
          width: 0.72rem;
          height: 0.26rem;
          line-height: 0.26rem;
          text-align: center;
          background: linear-gradient(#ff7a9b, #ff366a);
          color: #fff;
          font-size: 0.12rem;
          border-radius: 0.15rem;
        }
      }
    }
  }
}
</style>
