<template>
  <div class="footer">
    <TextEllipsis :text="text" class="desc" :isLimitHeight="isLimitHeight" :height="75">
      <template slot="more"><span>...</span><span class="link" @click="onClick">展开</span></template>
      <span slot="after" v-if="!isLimitHeight" @click="isLimitHeight=true"></span>
    </TextEllipsis>

    <div class="product-wrapper">
      <div class="products">
        <Products></Products>
      </div>
      <div class="share">
        <WidgetIconBtn class="item" type="msg" text="100" :option="option" @click="onCommentClick"></WidgetIconBtn>
        <WidgetIconBtn class="item" type="fav" text="100" :option="option" @click="onFavClick"></WidgetIconBtn>
      </div>
    </div>
  </div>
</template>

<script>

import Products from './products';

export default {
  name: 'DescFooter',
  components: {
    Products,
  },
  data() {
    return {
      text: '很好，能抢到真的不容易！整体感觉很舒服，庆幸下手一定要快准狠！如果能够再抢到一双就更好了，下次加买很多双,很好，能抢到真的不容易！整体感觉很舒服，庆幸下手一定要快准狠！如果能够再抢到一双就更好了，下次加买很多双',
      isLimitHeight: true,
      option: {
        emitName: 'click',
        color: 'white'
      }
    };
  },
  methods: {
    onClick() {
      console.log('展开');
      this.isLimitHeight = false;
    },
    onCommentClick() {
      this.$emit('on-comment-click', {});
    },
    onFavClick() {
      this.$emit('on-favorite-click', {});
    }
  },
};
</script>

<style lang="scss" scoped>

.footer {
  position: relative;
  min-height: 280px;
  background: rgba(0, 0, 0, 0.5);
}

.desc {
  min-height: 134px;
  font-size: 26px;
  color: white;
  letter-spacing: 0.01PX;
  padding: 30px 28px 0 28px;
}

.product-wrapper {
  display: flex;
  justify-content: space-between;
  height: 166px;
  padding: 0 28px;
}

.products {
  display: inline-block;
  width: 290px;
  height: 100px;
  margin-top: 36px;
}

.link {
  color: #4a90e2;
}

.share {
  height: 100px;
  margin-top: 86px;
}

.item {
  margin-left: 50px;
}
</style>