<template>
  <transition name="move-right-left" mode="out-in">
    <div class="shop-hot" v-if="info.id" :key="info.id">
      <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="type" v-if="info.type == 2">
          <div class="tag">
            {{ info.source == 1 ? '外链' : info.source == 2 ? '口令' : '' }}
          </div>
        </div>
        <div class="price-box">
          <span class="price">￥{{ info.price }}</span>
          <span class="shop_price" v-if="info.shop_price">￥{{ info.shop_price }}</span>
        </div>
      </div>
      <div class="pay">
        <div class="btn" @click="buyShop(info)">去看看</div>
      </div>
      <div class="close" @click="close"></div>
    </div>
  </transition>
</template>
<script>
import { getRecommendGoods } from '@/plugins/API/apiShop';
import { mapGetters } from 'vuex';
export default {
  name: 'shop-hot',
  props: {
    menuId: {}
  },
  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.menuId,
        uin: this.channelInfo.uin,
        type: 1
      });
      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 === 1 && this.menuId === includeId) {
        if (this.info.id === goodInfo.id) {
          this.info = goodInfo;
        }
      }
    },
    deleteShop(data) {
      const { type, includeId, goodInfo } = data;
      if (type === 1 && this.menuId === includeId) {
        if (this.info.id === goodInfo.id) {
          this.info = {};
        }
      }
    },
    cancelShopBind(data) {
      const { type, includeId, goodInfo } = data;
      if (type === 1 && this.menuId === includeId) {
        if (goodInfo.id.some(id => id === this.info.id)) {
          this.info = {};
        }
      }
    },
    setTopShop(data) {
      const { type, includeId, goodInfo } = data;
      if (type === 1 && this.menuId === includeId) {
        this.info = goodInfo;
      }
    },
    cancelTopShop(data) {
      const { type, includeId, goodInfo } = data;
      if (type === 1 && this.menuId === 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;
  padding: 0.04rem 0.12rem;
  display: flex;
  align-items: center;
  height: 0.7rem;
  background: #fff;
  .img-box {
    margin-right: 0.12rem;
    width: 0.52rem;
    height: 0.52rem;
    border-radius: 0.04rem;
    img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }
  .content {
    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;
    }
    .type {
      flex: 1;
      .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;
      }
    }
    .price-box {
      flex: 0 0 auto;
      height: 0.2rem;
      line-height: 0.2rem;
      .price {
        color: #e9355f;
        font-size: 0.14rem;
      }
      .shop_price {
        text-decoration: line-through;
        color: #999999;
        font-size: 0.11rem;
      }
    }
  }
  .pay {
    position: absolute;
    bottom: 0.04rem;
    right: 0.04rem;
    .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;
    }
  }
  .close {
    position: absolute;
    top: 0;
    right: 0;
    width: 0.18rem;
    height: 0.18rem;
    background: url(./img/icon-close.png) no-repeat center center;
    background-size: 0.14rem auto;
  }
}
</style>
