<template>
  <LayoutApp :show-back="true" title="社区详情">
    <div class="detail-container">

      <div class="author-container">
        <ArticleAuthor :userHeadIco="userHeadIco" :userName="userName"></ArticleAuthor>
      </div>

      <div class="source-container">
        <ArticleVideo v-if="showVideo" :videoUrl="videoUrl" :coverUrl="coverUrl"></ArticleVideo>
        <ArticleImage v-else :imageList="imageList"></ArticleImage>
      </div>

      <div class="slide-container">
        <HorizontalSlide :value="imageList"></HorizontalSlide>
      </div>

      <div class="note-container">
        <div class="note-header">Nike 旗下大热鞋款 Air Max 95</div>
        <div class="note-content">Nike 旗下大热鞋款 Air Max 95 一直以来在街头造型当中的能见度都算高，凭藉其舒适脚感与百搭外型 @NIKE官方 Max 95 也轻松成为许多鞋迷的心头好紧接「Triple White」之后，备受期待的 Nike 全新鞋款 SF-AF1 Mid 又有一双鞋的「Tiger Camo」配色率先现身网络。</div>
        <div class="note-date">2019-01-02</div>
        <div class="praise-wrapper" ></div>
      </div>

      <div class="recommend-container">
        <div class="recommend-text">推荐阅读</div>
        <div class="recommend-list">list</div>
      </div>

    </div>
  </LayoutApp>
</template>

<script>
import ArticleAuthor from './components/article-author';
import ArticleVideo from './components/article-video';
import ArticleImage from './components/article-image';
import HorizontalSlide from './components/horizontalSlide';

export default {
  name: 'articleDetail',
  components: {
    ArticleAuthor,
    ArticleVideo,
    ArticleImage,
    HorizontalSlide
  },
  data() {
    return {
      imageList: [
        {image_url: 'http://img11.static.yhbimg.com/goodsimg/2019/07/02/16/0191aa70fd1f46d75e5ff974dfe0cdac1c.jpg?imageMogr2/thumbnail/{width}x{height}/background/d2hpdGU=/position/center/quality/80'},
        {image_url: 'http://img11.static.yhbimg.com/goodsimg/2018/11/06/14/01bbabe3eb9597d5a36f51a0a29c23e441.jpg?imageMogr2/thumbnail/{width}x{height}/background/d2hpdGU=/position/center/quality/80'},
        {image_url: 'http://img11.static.yhbimg.com/goodsimg/2018/11/06/14/016c59b642d25a92049003c318ea7b97ff.jpg?imageMogr2/thumbnail/{width}x{height}/background/d2hpdGU=/position/center/quality/80'},
        {image_url: 'http://img11.static.yhbimg.com/goodsimg/2018/11/06/14/012df38fe6117ea9467a01919a4b4c2f3c.jpg?imageMogr2/thumbnail/{width}x{height}/background/d2hpdGU=/position/center/quality/80'}
      ],
      showVideo: false,
      videoUrl: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4',
      coverUrl: 'http://file02.16sucai.com/d/file/2015/0408/779334da99e40adb587d0ba715eca102.jpg',
      userHeadIco: 'https://img12.static.yhbimg.com/article/2019/02/26/16/02456ade977d8dfdbc4ca548b196c1d62b.png?imageView/2/w/{width}/h/{height}',
      userName: 'MOMO草'
    };
  },
};
</script>

<style lang="scss" scoped>
.detail-container {
  background: #fff;
}

.author-container {
  width: 100%;
  height: 100px;
}

.source-container {
  width: 100%;
  height: 750px;
}

.slide-container {
  padding: 40px 0 36px 24px;
}

.note-container {
  padding: 0 24px 100px;
  background: #fff;
}

.note-header {
  font-size: 36px;
  color: #222;
  letter-spacing: 0.34px;
  line-height: 56px;
  font-weight: bold;
}

.note-content {
  font-size: 30px;
  color: #000;
  letter-spacing: 0.28px;
  line-height: 50px;
}

.note-date {
  margin-top: 20px;
  font-size: 30px;
  color: #999;
  letter-spacing: 0.28px;
}

.praise-wrapper {
  margin-top: 60px;
  margin-left: calc((100%-160px)/2);
  height: 160px;
  width: 160px;
  background: url("~statics/image/coupon/used@3x.png");
  background-size: contain;
  background-repeat: no-repeat;
}

.recommend-container {
  background: #F2F2F2;
  padding: 36px 24px 0;
}

.recommend-text {
  font-size: 32px;
  color: #222222;
  font-weight: bold;
  text-align: left;
}

.recommend-list {
  margin-top: 30px;
}

</style>