<template>
  <div class="MyPostList">
    <div class="userinfo">
      <div class="top">
        <div class="left">
          <image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-fangwuchuzu.png" />
          <h2>李在天</h2>
        </div>
        <div class="add-btn" hover-class="text-hover" @click="$linkTo('./Add')">发贴</div>
      </div>
      <div class="bottom">
        <div class="bottom-item" @click="currIndex = 0" :class="[currIndex === 0 ? 'active' : '']">
          <span>发贴</span>
          <h2>23</h2>
        </div>
        <div class="bottom-item" @click="currIndex = 1" :class="[currIndex === 1 ? 'active' : '']">
          <span>点赞</span>
          <h2>23</h2>
        </div>
        <div class="bottom-item" @click="currIndex = 2" :class="[currIndex === 2 ? 'active' : '']">
          <span>评论</span>
          <h2>23</h2>
        </div>
      </div>
    </div>
    <div class="body">
      <div class="body-list" v-if="currIndex === 0">
        <div class="item" v-for="(item, index) in 10" :key="index">
          <div class="item-top">
            <image class="avatar" src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-fangwuchuzu.png" />
            <div class="right">
              <h3>李在地</h3>
              <span>清风街道</span>
            </div>
            <image class="remove" src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-delete.png" />
          </div>
          <div class="item-content">
            <span @click="$linkTo('./TopicDetail')">#【闲置物品交易】</span>
            <text>社家用闲置柜子自用，原价212，现价80要的联系</text>
          </div>
          <div class="item-imgs">
            <image src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/home-bg.png" />
            <image src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/home-bg.png" />
            <image src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/home-bg.png" />
          </div>
          <p>2020-12-11 10:10</p>
          <div class="item-bottom">
            <div>
              <image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-zhuanfa.png" />
              <i>10</i>
            </div>
            <div>
              <image src="https://cdn.cunwuyun.cn/wxmp/fengdu/zan.png" />
              <i>10</i>
            </div>
            <div>
              <image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-pinglun.png" />
              <i>10</i>
            </div>
          </div>
        </div>
      </div>
      <div class="body-list" v-if="currIndex === 1">
        <div class="item" v-for="(item, index) in 10" :key="index">
          <div class="item-top">
            <image class="avatar" src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-fangwuchuzu.png" />
            <div class="right">
              <h3>李在地</h3>
              <span>清风街道</span>
            </div>
          </div>
          <div class="item-content">
            <span @click="$linkTo('./TopicDetail')">#【闲置物品交易】</span>
            <text>社家用闲置柜子自用，原价212，现价80要的联系</text>
          </div>
          <div class="item-imgs">
            <image src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/home-bg.png" />
            <image src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/home-bg.png" />
            <image src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/home-bg.png" />
          </div>
          <p>2020-12-11 10:10</p>
          <div class="item-bottom">
            <div>
              <image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-zhuanfa.png" />
              <i>10</i>
            </div>
            <div>
              <image src="https://cdn.cunwuyun.cn/wxmp/fengdu/zan.png" />
              <i>10</i>
            </div>
            <div>
              <image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-pinglun.png" />
              <i>10</i>
            </div>
          </div>
        </div>
      </div>
      <div class="comment" v-if="currIndex === 2">
        <div class="comment-item" v-for="(item, index) in 10" :key="index">
          <div class="comment-top">
            <span>2020-12-11 10:10</span>
            <image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-delete.png" />
          </div>
          <p>联系方式</p>
          <div class="bottom">
            <div class="item-top">
              <image class="avatar" src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-fangwuchuzu.png" />
              <div class="right">
                <h3>李在地</h3>
                <span>清风街道</span>
              </div>
            </div>
            <div class="item-content">
              <span @click="$linkTo('./TopicDetail')">#【闲置物品交易】</span>
              <text>社家用闲置柜子自用，原价212，现价80要的联系</text>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {mapState} from "vuex";

  export default {
    name: 'MyPostList',
    appName: '我的帖子',

    data () {
      return {
        currIndex: 2
      }
    },

    computed: {
      ...mapState(['user', 'token']),
    },

    methods: {

    },
    onShow() {

    },
  }
</script>

<style scoped lang="scss">
  .MyPostList {
    padding-bottom: 40px;

    .userinfo {
      margin: 24px 0;
      background: #fff;

      .top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 32px 56px;
        border-bottom: 1px solid #eee;

        .left {
          display: flex;
          align-items: center;

          image {
            width: 96px;
            height: 96px;
            margin-right: 16px;
            border-radius: 50%;
          }

          h2 {
            color: #333333;
            font-size: 34px;
            font-weight: 600;
          }
        }

        .add-btn {
          width: 132px;
          height: 56px;
          line-height: 56px;
          text-align: center;
          font-size: 30px;
          color: #fff;
          border-radius: 26px;
          background: #2D7DFF;
        }
      }

      .bottom {
        display: flex;
        height: 120px;
        align-items: center;
        box-sizing: border-box;

        .bottom-item {
          display: flex;
          position: relative;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          flex: 1;
          text-align: center;
          height: 100%;

          &.active:after {
            position: absolute;
            bottom: 0;
            left: 50%;
            z-index: 1;
            width: 40px;
            height: 6px;
            border-radius: 3px;
            background: #2D7DFF;
            transform: translateX(-50%);
            content: ' ';
          }

          span {
            font-size: 24px;
            color: #999;
          }

          h2 {
            line-height: 48px;
            font-size: 34px;
            color: #333;
          }
        }
      }
    }

    .comment {
      padding: 0 32px;

      .comment-item {
        margin-bottom: 24px;
        padding: 28px 24px;
        border-radius: 18px;
        background: #fff;

        .comment-top {
          display: flex;
          align-items: center;
          justify-content: space-between;

          span {
            font-size: 28px;
            color: #333;
          }

          image {
            width: 40px;
            height: 40px;
          }
        }

        & > p {
          line-height: 1.3;
          margin: 26px 0 20px;
          font-size: 28px;
          color: #666666;
        }

        .bottom {
          padding: 24px;
          background: #f6f6f6;
        }

        .item-top {
          display: flex;
          align-items: center;

          .avatar {
            width: 96px;
            height: 96px;
            margin-right: 16px;
            border-radius: 50%;
          }

          .right {
            flex: 1;
          }

          .remove {
            width: 40px;
            height: 40px;
          }

          h3 {
            margin-bottom: 12px;
            color: #333333;
            text-align: left;
            font-size: 34px;
            font-weight: 500;
          }

          span {
            color: #999999;
            font-size: 28px;
          }
        }

        .item-content {
          margin-top: 16px;
          line-height: 1.3;
          // text-align: justify;

          span {
            font-size: 28px;
            color: #4181FF;
          }

          text {
            font-size: 28px;
            color: #333333;
          }
        }
      }
    }

    .body-list {
      .item {
        margin: 0 32px 24px;
        padding: 24px 24px 0;
        background: #ffffff;
        border-radius: 16px;
        box-shadow: inset 0 -1px 0 0 #eeeeee;

        .item-top {
          display: flex;
          align-items: center;

          .avatar {
            width: 96px;
            height: 96px;
            margin-right: 16px;
            border-radius: 50%;
          }

          .right {
            flex: 1;
          }

          .remove {
            width: 40px;
            height: 40px;
          }

          h3 {
            margin-bottom: 12px;
            color: #333333;
            text-align: left;
            font-size: 34px;
            font-weight: 500;
          }

          span {
            color: #999999;
            font-size: 28px;
          }
        }

        .item-imgs {
          display: flex;
          align-items: center;

          image {
            flex: 1;
            height: 202px;
            margin-right: 12px;

            &:nth-of-type(3n) {
              margin-right: 0;
            }
          }
        }

        & > p {
          margin: 24px 0;
          font-size: 28px;
          color: #333333;
        }

        .item-bottom {
          display: flex;
          align-items: center;
          height: 88px;
          border-top: 1px solid #eeeeee;

          div {
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 1;

            image {
              width: 40px;
              height: 40px;
              margin: 16px;
            }

            i {
              color: #687DA6;
              font-size: 28px;
            }
          }
        }

        .item-content {
          margin: 16px;
          line-height: 1.3;
          // text-align: justify;

          span {
            font-size: 28px;
            color: #4181FF;
          }

          text {
            font-size: 28px;
            color: #333333;
          }
        }
      }
    }
  }
</style>
