<template>
  <Layout class="user-page">
    <LayoutHeader slot='header'></LayoutHeader>
    <cube-sticky :pos="scrollY">
        <cube-scroll
          class="main-container"
          :scroll-events="scrollEvents"
          @scroll="scrollHandler">
          <div class="author-profile">
            <span class="avatar-box">
              <img src="https://tvax3.sinaimg.cn/crop.0.0.996.996.180/b2226be7ly8fwi9zpop35j20ro0roq45.jpg">
            </span>
            <div class="author-section">
              <ul class="author-fans">
                <li>
                  <span class="num">56</span>
                  <p class="name">
                    <span>关注</span>
                  </p>
                </li>
                <li>
                  <span class="num">56</span>
                  <p class="name">
                    <span>粉丝</span>
                  </p>
                </li>
                <li>
                  <span class="num">56</span>
                  <p class="name">
                    <span>获赞与收藏</span>
                  </p>
                </li>
              </ul>
              <div class="operate-wrap">
                <label class="fill">编辑个人资料</label>
              </div>
            </div>
          </div>
          <p class="author-desc">炒价70倍，这个潮流艺术品的升值空间比KAWS还大！</p>
          <cube-sticky-ele ele-key="11">
            <FavTabBlock :tabs-num="tabsNum" :active-index="activeIndex" @change="changeTab"></FavTabBlock>
          </cube-sticky-ele>
          <div class="contant-list">
            <WaterFall class="pannel-wrap" :list="list" :pos="scrollY"></WaterFall>
          </div>
        </cube-scroll>
        <template slot="fixed" slot-scope="props">
          <FavTabBlock :tabs-num="tabsNum" :active-index="activeIndex" @change="changeTab"></FavTabBlock>
        </template>
    </cube-sticky>
  </Layout>
</template>


<script>
  import {Scroll, Sticky} from 'cube-ui';
  import CubeStickyEle from 'cube-ui/src/components/sticky/sticky-ele.vue';
  import FavTabBlock from './components/fav-tab-block';
  import WaterFall from './components/water-fall';

  export default {
    name: 'userpage',
    data() {
      return {
        scrollEvents: ['scroll'],
        scrollY: 0,
        tabsNum: [10, 0],
        activeIndex: 0,
        list: []
      }
    },
    created() {
      let list = [];

      for (let i = 0; i < 1000; i++) {
        let _h = Math.floor(Math.random() * 888);

        list.push({
          articleId: i,
          articleType: 1,
          coverImage: '//fakeimg.pl/320x' + _h,
          content: '海报' + i,
          authorName: '干脆面' + i,
          authorHeadIco: '//img.xiaohongshu.com/avatar/5c5c0790d9e25f0001905596.jpg@80w_80h_90q_1e_1c_1x.jpg',
          imageHeight: _h,
          imageWidth: 320
        });
      }

      this.list = list;
    },
    methods: {
      scrollHandler({ y }) {
        this.scrollY = -y;
      },
      changeTab(index) {
        if (this.activeIndex !== index) {
          this.activeIndex = index;
        }
      }
    },
    components: {
      CubeScroll: Scroll,
      CubeSticky: Sticky,
      CubeStickyEle,
      FavTabBlock,
      WaterFall
    }
  };
</script>


<style lang="scss">
  .user-page {
    box-sizing: border-box;
    color: #4a4a4a;
  }

  .author-profile {
    padding: 24px 30px;
    display: flex;
    justify-content: space-between;

    .avatar-box {
      width: 150px;
      height: 150px;
      overflow: hidden;
      border-radius: 50%;

      > img {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
  }

  .author-section {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .author-fans {
    display: flex;
    justify-content: flex-end;
    padding-top: 4px;
    padding-right: 54px;

    li {
      margin-left: 140px;
      position: relative;

      &:first-child {
        margin-left: 0;
      }

      .num {
        font-size: 28px;
        font-weight: 500;
        padding-bottom: 6px;
        display: block;
      }

      .name {
        position: absolute;
        word-break: keep-all;
        font-size: 20px;
        font-weight: 300;
        color: #9b9b9b;
        margin-left: 50%;

        > * {
          position: relative;
          left: -50%;
        }
      }
    }
  }

  .operate-wrap {
    label {
      display: block;
      margin-left: 30px;
      font-size: 23px;
      line-height: 48px;
      color: #222;
      border: 1px solid #4a4a4a;
      border-radius: 8px;
      text-align: center;
    }

    .fill {
      background-color: #4a4a4a;
      color: #fff;
      font-weight: 300;
    }
  }

  .author-desc {
    margin: 20px 30px;
    font-size: 24px;
    font-weight: 300;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .contant-list {
    height: 100000px;
  }
</style>