<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 class="praise-border"></div>
          <div class="praise-div">
            <div class="praise-icon"></div>
            <div class="praise-num">1829</div>
          </div>
        </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
  },
  props: {
    articleId: {
      required: true
    }
  },
  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草'
    };
  },
  asyncData({store, router}) {
    const articleId = router.params.articleId;

    store.dispatch('/article/')
  },
};
</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;
  width: 100%;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.praise-border {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 2px solid #EEEEEE;
  position: absolute;
  top: 0;
  left: calc((100%-160px)/2);
}

.praise-div {
  display: flex;
  flex-direction: column;
  align-items: center;

  .praise-icon {
    width: 64px;
    height: 64px;
    background: url(~statics/image/order/alipay@3x.png) no-repeat;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .praise-num {
    margin-top: 8px;
    font-size: 22px;
    color: #002B47;
    letter-spacing: 0.21px;
  }
}

.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>