<template>
    <div class="scroll-wrapper">
      <Author :data="articleDetail.getAuthor" :pos-id="sceneId"></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 :src="item.bigImage" width="640" height="640" ></ImageFormat>
            </div>
          </template>
          <template v-if="item.smallImage">
            <div class="small-img-block clearfix">
              <ImageFormat :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 name="ArticleDetail" :pos-id="sceneId" :article-id="articleId" 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 && articleDetail.tagBar" :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 './article-author';
import ZanBar from './zan-bar';
import TagBar from './tag-bar';
import { createNamespacedHelpers } from 'vuex';
import YAS from 'utils/yas-constants';

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

export default {
  name: 'ArticleBody',
  props: ['articleId'],
  components: {
    RecommendProductList,
    Recommend,
    Author,
    ZanBar,
    TagBar
  },
  data() {
    return {
      scrollOpts: {
        eventPassthrough: 'horizontal',
        bounce: false
      },
      sceneId: YAS.scene.newsDetail
    };
  },
  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-top: 40px;
  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>