<template>
  <view class="u-card-wrap">
    <u-card :show-head="false" v-for="post in postList" :key="post.pid">
      <view class="" slot="body" @click="previewPost(post)">
        <view class="u-body-item u-flex u-col-between u-p-t-0">
          <view class="u-body-item-title">
            {{ post.content.title }}
            <view class="post-time">
              {{ post.createTime | formatDateTime }}
            </view>
          </view>
          <image :src="post.icon" mode="aspectFill"></image>
        </view>
      </view>
      <view class="button-icon-wrap" slot="foot">
        <view class="button-section-left">
          <view class="button-icon">
            <u-icon name="thumb-up" size="36"></u-icon>
          </view>
          <view class="button-icon">
            <u-icon name="share" size="36"></u-icon>
          </view>
          <view class="button-icon">
            <u-icon name="star" size="36"></u-icon>
          </view>
        </view>
        <view class="button-section-right" @click.stop="handleEditPost(post)">
          <u-icon name="edit-pen" size="36"></u-icon>
        </view>
      </view>
    </u-card>
  </view>
</template>

<script>
import { queryPostList } from '../../cms/api';
import { Setting } from '../../index';
import { formatDateTime } from '../../filters/index';

export default {
  name: 'post-list',
  filters: { formatDateTime },
  data() {
    return {
      postList: [],
      postListMeta: null,
    };
  },
  mounted() {
    this.getPostList();
  },
  methods: {
    // 获取文章详情
    async getPostList() {
      const params = {
        query: {
          limit: 10,
          page: 0,
        },
      };
      const { data, meta } = await queryPostList(params);
      const imgPath = Setting.getImgPath();
      data.forEach(item => {
        item.icon = imgPath + item.content.gallery[0];
      });
      this.postList = data;
      console.log('%c [this.postList]: ', 'color:#1989fa;', this.postList);
      this.postListMeta = meta;
    },
    // 编辑
    handleEditPost({ pid }) {
      wx.navigateTo({
        url: '/demo/packageEditor/rich-editor?pid=' + pid,
      });
    },
    // 预览
    previewPost({ pid }) {
      wx.navigateTo({
        url: '/demo/packageEditor/preview-post?pid=' + pid,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.u-card-wrap {
  background-color: $u-bg-color;
  padding: 1px;
}

.u-body-item {
  font-size: 32rpx;
  color: #333;
  //padding: 20rpx 10rpx;

  .u-body-item-title {
    flex: 1;
  }
  .post-time {
    color: #999;
    margin-top: 20rpx;
    font-size: 26rpx;
  }

  image {
    width: 120rpx;
    flex: 0 0 120rpx;
    height: 120rpx;
    border-radius: 8rpx;
    margin-left: 12rpx;
  }
}
.button-icon-wrap {
  display: flex;
  .button-section-left {
    flex: 7;
    display: flex;
    //background-color: #1bd1a5;
    .button-icon {
      flex: 1;
    }
  }
  .button-section-right {
    flex: 3;
    //background-color: #f0ad4e;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
