<template>
  <div class="shop-container" ref="shopContainer" @scroll="getMore">
    <div class="shop-body" ref="shopBody">
      <div class="count">全部宝贝 {{ sortList.length }}</div>
      <div class="list">
        <div class="list-item" v-for="(item, index) in sortList" :key="item.id">
          <div class="img-box" v-show="value">
            <div class="no">{{ sortList.length - index }}</div>
            <img v-lazy="`${item.real_img}?x-oss-process=style/commodity_cover`" alt="" />
          </div>
          <div class="content">
            <div class="name">{{ item.name }}</div>
            <div class="type">
              <div class="tag" v-if="item.type == 2">
                {{ item.source == 1 ? '外链' : item.source == 2 ? '口令' : '' }}
              </div>
            </div>
            <div class="price-box">
              <span class="price">￥{{ item.price }}</span>
              <span class="shop_price" v-if="item.shop_price">￥{{ item.shop_price }}</span>
            </div>
            <div class="pay">
              <div class="btn empty" v-if="!item.stock && item.type == 1">
                已售罄
              </div>
              <div class="btn" v-else @click="_showDetails(item)">去看看</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <transition name="move-bottom">
      <div class="shop-details-box" v-transfer-dom v-if="isShow && goodsId">
        <div class="mask" @click="goodsId = false"></div>
        <div class="box">
          <shop-details v-model="isShow" :goodsId="goodsId"></shop-details>
        </div>
      </div>
    </transition>
    <transition name="fade">
      <div class="shop-link-box" v-transfer-dom v-if="isShow && sourceType == 1">
        <source-link v-model="isShow" :content="sourceContent"></source-link>
      </div>
    </transition>
    <transition name="fade">
      <div class="shop-command-box" v-transfer-dom v-if="isShow && sourceType == 2">
        <source-command v-model="isShow" :content="sourceContent"></source-command>
      </div>
    </transition>
  </div>
</template>

<script>
import { goodsList } from '@/plugins/API/apiShop';
import { mapGetters } from 'vuex';
const shopDetails = r => require(['@/components/shop/details/index'], r);
const sourceLink = r => require(['@/components/shop/source/link'], r);
const sourceCommand = r => require(['@/components/shop/source/command'], r);
export default {
  name: 'vertical-menu-shop',
  components: {
    shopDetails,
    sourceLink,
    sourceCommand
  },
  props: {
    value: {}
  },
  data() {
    return {
      isShow: false,
      goodsId: null,
      sourceType: null,
      sourceContent: null,
      isAjax: true,
      count: 0,
      num: 10,
      list: []
    };
  },
  computed: {
    ...mapGetters({
      channelInfo: 'channelInfo'
    }),
    sortList() {
      let list = this.list || [];
      list = list.sort((a, b) => b.sort - a.sort);
      return list;
    },
    page() {
      return Math.floor(this.list.length / this.num) + 1;
    }
  },
  mounted() {
    this.getList();
    this.$Bus.$on('bus-editShop', this.editShop);
    this.$Bus.$on('bus-deleteShop', this.deleteShop);
    this.$Bus.$on('bus-addShopBind', this.addShopBind);
    this.$Bus.$on('bus-cancelShopBind', this.cancelShopBind);
    this.$Bus.$on('bus-changeSort', this.changeSort);
    this.$Bus.$on('bus-buyShop', this._showDetails);
  },
  methods: {
    getMore() {
      const shopContainerTop = this.$refs.shopContainer && this.$refs.shopContainer.scrollTop;
      const shopContainerHeight = this.$refs.shopContainer && this.$refs.shopContainer.clientHeight;
      const shopBodHeight = this.$refs.shopBody && this.$refs.shopBody.clientHeight;
      if (shopContainerTop + shopContainerHeight > shopBodHeight - 100) {
        this.getList();
      }
    },
    async getList() {
      if (!this.isAjax) {
        return false;
      }
      this.isAjax = false;
      const res = await goodsList({
        includeId: this.channelInfo.id,
        uin: this.channelInfo.uin,
        type: 2,
        page: this.page,
        num: this.num
      });
      this.isAjax = true;
      if (res.code === 200 && res.errorCode === 0) {
        const { list, count } = res.data;
        this.addList(list, true);
        this.count = count;
        if (list.length < this.num) {
          this.isAjax = false;
        }
      } else {
        this.$layer.msg(res.errorMessage);
      }
    },
    addList(list, sort) {
      const fList = list.filter(item => !this.list.some(x => x.id === item.id));
      if (sort) {
        this.list = this.list.concat(fList);
      } else {
        this.list = fList.concat(this.list);
      }
    },
    editShop(data) {
      const { type, includeId, goodInfo } = data;
      if (type === 2 && this.channelInfo.id === includeId) {
        this.list = this.list.map(x => {
          if (x.id === goodInfo.id) {
            return { ...x, ...goodInfo };
          }
          return x;
        });
      }
    },
    deleteShop(data) {
      const { type, includeId, goodInfo } = data;
      if (type === 2 && this.channelInfo.id === includeId) {
        this.list = this.list.filter(x => x.id !== goodInfo.id);
      }
    },
    addShopBind(data) {
      const { type, includeId, goodInfo } = data;
      if (type === 2 && this.channelInfo.id === includeId) {
        this.addList(goodInfo);
      }
    },
    cancelShopBind(data) {
      const { type, includeId, goodInfo } = data;
      if (type === 2 && this.channelInfo.id === includeId) {
        this.list = this.list.filter(x => {
          return !goodInfo.id.some(id => id === x.id);
        });
      }
    },
    changeSort(data) {
      const { type, includeId, goodInfo } = data;
      if (type === 2 && this.channelInfo.id === includeId) {
        this.list = this.list.map(x => {
          if (x.id === goodInfo.id) {
            x.sort = goodInfo.sort;
          }
          return x;
        });
      }
    },
    _showDetails(obj) {
      this.goodsId = null;
      this.sourceType = null;
      this.sourceContent = null;
      if (obj.type === 1) {
        this.goodsId = obj.id;
      } else if (obj.type === 2) {
        this.sourceType = obj.source;
        this.sourceContent = obj.sourceContent;
      }
      this.isShow = true;
    }
  },
  beforeDestroy() {
    this.$Bus.$off('bus-editShop', this.editShop);
    this.$Bus.$off('bus-deleteShop', this.deleteShop);
    this.$Bus.$off('bus-addShopBind', this.addShopBind);
    this.$Bus.$off('bus-cancelShopBind', this.cancelShopBind);
    this.$Bus.$off('bus-changeSort', this.changeSort);
    this.$Bus.$off('bus-buyShop', this._showDetails);
  }
};
</script>
<style lang="less" scoped>
.shop-container {
  position: relative;
  height: 100%;
  background: #fff;
  overflow: auto;
  .count {
    padding: 0.06rem 0.1rem 0;
    color: #26242d;
    font-size: 0.12rem;
  }
  .list {
    .list-item {
      position: relative;
      display: flex;
      padding: 0.06rem;
      height: 1rem;
      background-color: #fff;
      border-bottom: 0.01rem solid #ddd;
      .img-box {
        position: relative;
        flex: 0 0 auto;
        margin-right: 0.1rem;
        width: 0.88rem;
        height: 0.88rem;
        border-radius: 0.04rem;
        overflow: hidden;
        .no {
          position: absolute;
          top: 0;
          left: 0;
          width: 0.24rem;
          height: 0.16rem;
          line-height: 0.16rem;
          color: #fff;
          background: #ff4802;
          font-size: 0.12rem;
          text-align: center;
          border-radius: 4px 0px 4px 0px;
        }
        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;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          font-size: 0.12rem;
          color: #26242d;
        }
        .type {
          flex: 1;
          margin: 0.06rem 0;
          .tag {
            display: inline-block;
            width: 0.32rem;
            height: 0.15rem;
            line-height: 0.15rem;
            border-radius: 0.02rem;
            border: 0.01rem solid #ffd9cb;
            text-align: center;
            font-size: 0.1rem;
            color: #ff4802;
          }
        }
        .price-box {
          flex: 0 0 auto;
          height: 0.22rem;
          line-height: 0.22rem;
          font-weight: bold;
          .price {
            color: #ff4802;
            font-size: 0.16rem;
          }
          .shop_price {
            margin-left: 0.05rem;
            text-decoration: line-through;
            color: #999999;
            font-size: 0.16rem;
          }
        }
      }
      .pay {
        position: absolute;
        right: 0.06rem;
        bottom: 0.06rem;
        z-index: 1;
        .btn {
          display: inline-block;
          width: 0.72rem;
          height: 0.28rem;
          line-height: 0.28rem;
          text-align: center;
          background: linear-gradient(90deg, #fc8900, #ff4802);
          color: #fff;
          font-size: 0.12rem;
          border-radius: 0.02rem;
          &.empty {
            background: #666;
          }
        }
      }
    }
  }
}
.shop-details-box {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1100;
  width: 100%;
  height: 100%;
  .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .box {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    height: 60%;
    min-height: 3rem;
    border-radius: 0.1rem 0.1rem 0px 0px;
    overflow: hidden;
  }
}
.shop-link-box {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1100;
  width: 100%;
  height: 100%;
}
.shop-command-box {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1100;
  width: 100%;
  height: 100%;
}
</style>
