<template>
  <view class="container">
    <u-sticky bgColor="#F8F8F8">
      <view class="top"> </view>
      <u-tabs
        :list="list1"
        lineWidth="30"
        lineColor="#f56c6c"
        @change="tabChange"
        :activeStyle="{
          color: '#303133',
          fontWeight: 'bold',
          transform: 'scale(1.05)',
          fontSize: '40rpx',
          fontStyle: 'italic',
        }"
        :inactiveStyle="{
          color: '#606266',
          transform: 'scale(1)',
        }"
        itemStyle=" padding-left: 15px; padding-right: 15px; height: 34px;"
      >
      </u-tabs>
      <view class="top-bottom"> </view>
    </u-sticky>

    <view class="center-box">
      <view class="item-box" v-for="(item, index) of initList" :key="index">
        <view class="item-top">
          <view class="top-left">
            <u-avatar :src="item.userDTO.avatar" size="45" />
          </view>
          <view class="top-right">
            <view class="right-title">{{ item.userDTO.nickname }}</view>
            <view class="right-address">
              <view class="marRight-20"> {{ item.distanceTime }} </view>
              <view class=""> {{ item.location }} </view>
            </view>
          </view>
        </view>
        <!-- <u-line margin='10rpx 0'></u-line> -->
        <view class="item-center">
          <view class="center-text"> {{ item.textContent }} </view>
          <view class="center-img-box">
            <image
              v-for="itm of item.resourceVos"
              :key="itm"
              class="center-img"
              :src="itm.resourceKey"
              @click="reviewImg(itm)"
            >
            </image>
          </view>
        </view>
        <view class="item-bottom">
          <view class="bottom-item">
            <u-icon
              :name="item.clickStatus == 0 ? 'heart' : 'heart-fill'"
              :size="iconSize"
              @click="handlerPraise(item)"
            ></u-icon>
            <view class="iconNUm">{{ item.goodNum }}</view>
          </view>
          <view class="bottom-item" @click="handlerRequireComment(item)">
            <u-icon name="more-circle" :size="iconSize"></u-icon>
            <view class="iconNUm">{{ item.commentNum }}</view>
          </view>
        </view>
        <u-line margin="-20rpx 0" v-if="index != initList.length - 1"></u-line>
      </view>
    </view>

    <view class="flex-box">
      <view class="flex" @click="handlerToPublish">
        <view class="flex-icon">
          <u-icon name="edit-pen" color="#fff" size="26"></u-icon>
        </view>
        <view class=""> 发布 </view>
      </view>
    </view>

    <u-popup
      :show="communityShow"
      @close="communityShow = false"
      mode="bottom"
      overlayOpacity="0.1"
      round="20"
    >
      <view class="pop-box">
        <!-- <communityPop :dynamicId='dynamicId' :dynamicUserId='dynamicUserId' @uploadComment='uploadComment' /> -->
      </view>
    </u-popup>
  </view>
</template>

<script>
import { clientContentList, addEvaulateRecords } from '@/api/client/community.js';
import communityPop from './components/communityPop.vue';
import { GetDateToNewData } from '@/utils/tools.js';
export default {
  components: { communityPop },
  data() {
    return {
      communityShow: false,
      list1: [
        {
          name: '最新',
          type: 'LATEST',
        },
        {
          name: '关注',
          type: 'ATTENTION',
        },
        {
          name: '最热',
          type: 'HOTTEST',
        },
      ],
      iconSize: 24,
      duration: 700,
      params: {
        pageNum: 1,
        pageSize: 10,
        type: 'LATEST',
        keyWord: '',
      },
      initList: [], // 初始化列表
      userId: '',
      dynamicId: 0,
      dynamicUserId: 0,
      total: 0,
    };
  },
  // 下拉刷新
  onPullDownRefresh() {
    this.params.pageNum = 1;
    this.initList = [];
    this.handlerInitList();
    setTimeout(function () {
      uni.stopPullDownRefresh();
      this.uToast('刷新成功');
    }, 1000);
  },
  // 触底刷新
  onReachBottom() {
    let { pageNum, pageSize } = this.params;
    if (pageNum * pageSize > this.total) return this.uToast('没有更多啦');
    this.params.pageNum++;
    this.handlerInitList();
  },
  onShow() {
    this.handlerInitList();
  },
  watch: {
    communityShow(newValue) {
      if (!newValue) {
        this.dynamicId = null;
        this.dynamicUserId = null;
      }
    },
  },
  mounted() {
    this.userId = this.$store.state.user.userId;
  },
  methods: {
    handlerInitList() {
      clientContentList(this.params).then(res => {
        res.data.records.map(rs => {
          let time = GetDateToNewData(rs.createTime);
          this.$set(rs, 'distanceTime', time);
        });
        this.total = res.data.total;
        this.initList = [...this.initList, ...res.data.records];
      });
    },
    // 切换顶部tabbar
    tabChange(e) {
      this.params.type = e.type;
      this.params.pageNum = 1;
      this.initList = [];
      this.handlerInitList();
    },
    // 点击发布按钮
    handlerToPublish() {
      uni.navigateTo({
        url: '/pagesCustomer/communityPostReview',
      });
    },
    // 点赞按钮
    handlerPraise(item) {
      let params = {
        dynamicStatusType: 'GOOD', // 操作类型：1-点赞；2-踩 允许值: GOOD, BAD
        recordType: 'DYNAMIC', // 内容类型：1-动态；2-评论/回复 允许值: DYNAMIC, COMMENT, USER
        actionType: item.clickStatus == 0 ? 'ADD' : 'CANCEL', // 点击类型：1-点赞/踩；2-取消赞/取消踩   允许值: ADD, CANCEL
        contentId: item.id,
        targetUserId: item.userId,
      };
      addEvaulateRecords(params).then(res => {
        if (res.code === 'OK') {
          uni.showToast({
            title: '关注成功',
            icon: 'none',
          });
          this.handlerInitList();
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none',
          });
          return;
        }
      });
    },
    // 查询动态评论
    handlerRequireComment(item) {
      this.dynamicId = item.id;
      this.dynamicUserId = item.userId;
      this.communityShow = true;
    },
    // 动态发布评论后 更新list
    uploadComment() {
      this.handlerInitList();
    },
    // 预览图片
    reviewImg(itm) {
      uni.previewImage({
        urls: [itm.resourceKey],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #f8f8f8;
  min-height: calc(100vh);
  .top {
    height: 100rpx;
  }

  .top-bottom {
    height: 20rpx;
  }

  .center-box {
    font-size: 28rpx;
    .item-box {
      padding: 20rpx 20rpx 30rpx 20rpx;
      background-color: #fff;

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

        .top-left {
          .img {
            width: 90rpx;
            height: 90rpx;
            border-radius: 50%;
          }
        }

        .top-right {
          margin-left: 20rpx;

          .right-title {
            font-weight: bold;
            font-size: 34rpx;
          }

          .right-address {
            display: flex;

            .marRight-20 {
              margin-right: 20rpx;
            }

            color: #959595;
            // font-style: italic;
            // font-weight: bold;
            font-size: 24rpx;
          }
        }
      }

      .item-center {
        margin-left: 100rpx;
        margin-top: 20rpx;

        .center-text {
          font-size: 32rpx;
        }

        .center-img-box {
          margin-top: 20rpx;
          display: grid;
          grid-template-columns: 32% 32% 32%;
          gap: 4% 1%;
          margin-bottom: 10rpx;

          .center-img {
            width: 186rpx;
            height: 186rpx;
            border-radius: 6rpx;
          }
        }
      }

      .item-bottom {
        display: flex;
        // margin-top: 10rpx;
        margin-bottom: 56rpx;
        margin-right: 8rpx;
        justify-content: flex-end;

        .bottom-item {
          display: flex;
          align-items: center;
          min-width: 100rpx;

          .iconNUm {
            margin-left: 7rpx;
          }
        }
      }
    }
  }

  .flex-box {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    background-color: #000;
    position: fixed;
    bottom: 15%;
    right: 5%;
    box-shadow: 0 5rpx 15rpx 0 rgba(0, 0, 0, 0.5);
    padding: 10rpx;
    box-sizing: border-box;
    text-align: center;

    .flex {
      color: #fff;
      font-size: 26rpx;
      font-weight: bold;

      .flex-icon {
        display: flex;
        justify-content: center;
      }
    }
  }
}
</style>
