<template>
    <div class="scroll-wrapper">

    <Author v-if="articleDetail && articleDetail.getAuthor" :data="articleDetail.getAuthor"></Author>

    <div class="post-content" v-if="articleDetail && articleDetail.getArticleContent">
      <template v-for="item in articleDetail.getArticleContent">
        <template v-if="item.text">
          <div class="text" v-html="item.text"></div>
        </template>

        <template v-if="item.bigImage">
          <div class="big-img-block">
            <ImageFormat :lazy="false" :src="item.bigImage" width="640" height="640" ></ImageFormat>
          </div>
        </template>

        <template v-if="item.smallImage">
          <div class="small-img-block clearfix">
            <ImageFormat :lazy="false" :src="i.src" width="315" height="420" v-for="(i,index) in item.smallImage" :key="index"></ImageFormat>
          </div>
        </template>

        <template v-if="item.video">
          <video src="item.video.src" controls="controls" :poster="item.video.cover_image" preload="none">
            不好意思，您的浏览器不支持此视频！
          </video>
        </template>

        <template v-if="item.relatedReco">
          <div class="products">
            <ProductGroup v-for="(p,index) in item.relatedReco.goods" :data="[p]" :key="index"></ProductGroup>
          </div>
        </template>
      </template>
    </div>

    <ZanBar class="zanbar" v-if="articleDetail && articleDetail.zanBar" v-bind="articleDetail.zanBar"></ZanBar>
    <TagBar class="tagbar" v-if="articleDetail" :list="articleDetail.tagBar"></TagBar>

    <Recommend v-if="articleDetail && articleDetail.getRecommendProducts && articleDetail.getRecommendProducts.length > 0">
      <RecommendProductList :list="articleDetail.getRecommendProducts"></RecommendProductList>
    </Recommend>
    </div>
</template>

<script>

import RecommendProductList from './recommend-product-list';
import Recommend from './recommend';
import Author from './author';
import ZanBar from './zan-bar';
import TagBar from './tag-bar';
import { createNamespacedHelpers } from 'vuex';

const { mapState } = createNamespacedHelpers('article');

export default {
  name: 'ArticleBody',
  components: {
    RecommendProductList,
    Recommend,
    Author,
    ZanBar,
    TagBar
  },
  data() {
    return {
      scrollOpts: {
        eventPassthrough: 'horizontal',
        bounce: false
      }
    };
  },
  computed: {
    ...mapState(['articleDetail'])
  },
  mounted() {
  },
  methods: {
  }
};
</script>

<style lang="scss" scoped>

@mixin paddingLR {
  padding-left: 30px;
  padding-right: 30px;
}

.scroll-wrapper {
  background-color: white;
}

.post-content {
  @include paddingLR;

  padding-top: 26px;

  /deep/ .normal {
    width: 100% !important;
    margin-top: 30px;
    margin-bottom: 30px;
  }

  /deep/ .large {
    width: 100% !important;
    margin-top: 30px;
    margin-bottom: 30px;
  }

  /deep/ p {
    font-size: 24px;
    color: #444;
    text-align: left;
    line-height: 44px;
  }
}

.zanbar {
  margin-bottom: 40px;
  padding-left: 30px;
  padding-right: 30px;
}

.tagbar {
  margin-bottom: 50px;
  padding-left: 30px;
  padding-right: 30px;
}

.products {
  /deep/ .product-group {
    height: 220px;
    padding-top: 0;
    padding-bottom: 0;
    margin: 40px 0;
    overflow: initial;
  }

  /deep/ .product-item {
    margin-left: 0;
  }

  /deep/ .single {
    width: 670px;
  }
}

.big-img-block {
  background: #fff;
  position: relative;
  padding-bottom: 10px;

  /deep/ img {
    width: 100%;
  }
}

.small-img-block {
  padding-bottom: 16px;
  background: #fff;

  /deep/ img {
    float: right;
    width: 50%;

    &:first-child {
      float: left;
    }
  }
}

</style>