<template>
  <view class="dynamic" @click="clickDynamic()">
    <view class="user__container">
      <view class="user__header-warp">
        <!-- 头像组 -->
        <view class="user__header" @click.stop="clickUser()">
          <image
            v-if="avatar"
            :src="avatar"
            mode="aspectFill"
            class="user__header-image"
          ></image>
          <image v-else
            src="/static/icon/noIcon.png"
            mode="aspectFill"
            class="user__header-image"
          ></image>
        </view>
      </view>
      <view class="user__content">
        <view class="user__content-main">
          <text
            class="user__content-title uni-ellipsis"
            @click.stop="clickUser()"
            >{{ name }}</text
          >
          <view style="display: flex; align-items: center"
            ><text class="user__content-note uni-ellipsis">{{
              createTime
            }}</text>
            <view style="display: flex; align-items: center; color: #808080"
              ><uni-icons
                type="eye"
                size="22"
                style="color: #808080; margin: 0 10rpx 0 30rpx"
              ></uni-icons
              >{{ readCount }}</view
            >
          </view>
        </view>
        <view class="user__content-extra">
          <!-- <slot>
						<text :class="isFocusOn?'user__focus-on':'user__focus-off'"  @click.stop="clickFocus()">{{isFocusOn?'关注':'已关注' }}</text>
					</slot> -->
        </view>
      </view>
    </view>
    <view style="padding: 0rpx 30rpx"
      >
	 
      <u-read-more showHeight="284" :toggle="true" color="#5a6988"> 
		<view class="title" style="text-indent: 0 !important;">{{ title }}</view>
        <rich-text
          :nodes="content"
          style="
            height: auto;
            color: #4b4b4b;
            margin-bottom: 40rpx;
          " /></u-read-more
    ></view>

    <view class="allImage">
      <view class="imgList">
        <view
          class="images"
          :class="`${imgList.length > 4 ? 'images3' : ''}`"
          v-for="(item, index) in imgList"
          :key="index"
        >
          <image
            @click.stop="previewImg(index)"
            class="oneimg"
            :src="item"
            mode="aspectFill"
            :style="{ width: imgWidth + 'px', 'max-height': imgHeight + 'px' }"
          ></image>
        </view>
      </view>
    </view>
	<view class="likeList" v-if="likeList.length > 0" style="color: #5188e5" @click.stop="clickThumbsup('likeList')">

		<uni-icons
          type="heart"
          size="20"
          style="color: #5188e5; margin-right: 10rpx"
        ></uni-icons
        >
		<view class="hidden2">{{ likeList.map(item => item.user.nickname?item.user.nickname:'普通用户').join(' , ') }}</view>

		
	</view>
    <view class="operate" style="width: 100%">
      <view
        @click.stop="clickThumbsup('like')"
        style="display: flex; align-items: center; color: #9a9a9a"
      >
        <uni-icons
          type="hand-up-filled"
          size="24"
          style="color: #9a9a9a; margin-right: 10rpx"
          :style="{ color: thumbsupColor }"
        ></uni-icons
        >{{ likeCount ? likeCount : "0" }}
      </view>
      <view
        style="display: flex; align-items: center; color: #9a9a9a"
        @click.stop="clickThumbsup('pinglun')"
        ><uni-icons
          type="chat-filled"
          size="24"
          style="color: #9a9a9a; margin-right: 10rpx"
        ></uni-icons
        >{{ commentCount ? commentCount : "0" }}</view
      >

      <view
        @click.stop="clickThumbsup()"
        style="display: flex; align-items: center; color: #5188e5"
      >
        <uni-icons
          type="redo-filled"
          size="24"
          style="color: #5188e5; margin-right: 10rpx"
        ></uni-icons
        >分享
      </view>
    </view>
    <view class="bottom-line"></view>
	

  </view>
  
</template>

<script>



export default {
  props: {
    avatar: {
      type: String,
    },
    name: {
      type: String,
    },
    createTime: {
      type: String,
    },
    isFocusOn: {
      type: Boolean,
    },
    title: {
      type: String,
    },
    content: {
      type: String,
    },
    imgList: {
      type: Array,
    },
    isLike: {
      type: Number,
    },
    isGiveReward: {
      type: Boolean,
    },
    likeCount: {
      type: Number,
    },
    readCount: {
      type: Number,
    },
    giveRewardNumber: {
      type: Number,
    },
    commentCount: {
      type: Number,
    },
    userNoShow: {
      type: Boolean,
    },
    operateNoShow: {
      type: Boolean,
    },
    likeList: {
      type: Array,
    },
  },
  watch: {
    isLike(newVal, oldVal) {
      console.log("newVal at line 163:", newVal);
      this.initOperate();
    },
  },
 
  data() {
    return {
      emptyAvatar: "/static/icon/noIcon.png",
      windowWidth: 0, //屏幕可用宽度
      windowHeight: 0, //屏幕可用高度
      imgWidth: 0, //图片宽度
      imgHeight: 0, //图片高度
      thumbsupColor: "#9a9a9a",
      heartColor: "#9a9a9a",
      userDisplay: "block",
      operateDisplay: "block",
      shadowStyle: {
        // #ifndef APP-NVUE
        backgroundImage:
          "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)",
        // #endif
        // #ifdef APP-NVUE
        // nvue上不支持设置复杂的backgroundImage属性
        backgroundImage:
          "linear-gradient(to top, #fff, rgba(255, 255, 255, 0.5))",
        // #endif
        paddingTop: "100px",
        marginTop: "-100px",
      },
    };
  },
  mounted() {
    const res = uni.getSystemInfoSync();
    this.windowHeight = res.windowHeight;
    this.windowWidth = res.windowWidth;

    if (this.userNoShow) {
      this.userDisplay = "none";
    }
    console.log(this.operateNoShow);
    if (this.operateNoShow) {
      this.operateDisplay = "none";
    }

    this.judgeImg();
    this.initOperate();
  },
  methods: {
    // 预览图片
    previewImg(index) {
      uni.previewImage({
        urls: this.imgList,
        // longPressActions: {
        //   itemList: ["保存图片"],
        // },
        current: index, // 设置当前预览的图片索引
      });
    },
    initOperate() {
      this.thumbsupColor = this.isLike ? "#fd514f" : "#9a9a9a";
      if (this.isGiveReward) this.heartColor = "#fd514f";
    },
    // 自适应判断
    judgeImg() {
      if (this.imgList.length == 1) {
        this.imgWidth = (this.windowWidth * 2) / 3;
        this.imgHeight = (this.windowHeight * 3) / 5;
      } else if (this.imgList.length == 4) {
        this.imgWidth = this.windowWidth / 3.3;
        this.imgHeight = this.imgWidth;
      } else {
        this.imgWidth = this.windowWidth / 3.4;
        this.imgHeight = this.imgWidth;
      }
    },
    timestampFormat(timestamp) {
      if (!timestamp) return "";
      function zeroize(num) {
        return (String(num).length == 1 ? "0" : "") + num;
      }

      var curTimestamp = parseInt(new Date().getTime() / 1000); //当前时间戳
      var timestampDiff = curTimestamp - timestamp; // 参数时间戳与当前时间戳相差秒数

      var curDate = new Date(curTimestamp * 1000); // 当前时间日期对象
      var tmDate = new Date(timestamp * 1000); // 参数时间戳转换成的日期对象

      var Y = tmDate.getFullYear(),
        m = tmDate.getMonth() + 1,
        d = tmDate.getDate();
      var H = tmDate.getHours(),
        i = tmDate.getMinutes(),
        s = tmDate.getSeconds();

      if (timestampDiff < 60) {
        // 一分钟以内
        return "刚刚";
      } else if (timestampDiff < 3600) {
        // 一小时前之内
        return Math.floor(timestampDiff / 60) + "分钟前";
      } else if (
        curDate.getFullYear() == Y &&
        curDate.getMonth() + 1 == m &&
        curDate.getDate() == d
      ) {
        return "今天" + zeroize(H) + ":" + zeroize(i);
      } else {
        var newDate = new Date((curTimestamp - 86400) * 1000); // 参数中的时间戳加一天转换成的日期对象
        if (
          newDate.getFullYear() == Y &&
          newDate.getMonth() + 1 == m &&
          newDate.getDate() == d
        ) {
          return "昨天" + zeroize(H) + ":" + zeroize(i);
        } else if (curDate.getFullYear() == Y) {
          return (
            zeroize(m) +
            "月" +
            zeroize(d) +
            "日 " +
            zeroize(H) +
            ":" +
            zeroize(i)
          );
        } else {
          return (
            Y +
            "年" +
            zeroize(m) +
            "月" +
            zeroize(d) +
            "日 " +
            zeroize(H) +
            ":" +
            zeroize(i)
          );
        }
      }
    },

    /** 触发父级事件 */
    // 点击动态
    clickDynamic() {
      this.$emit("clickDynamic");
    },
    // 点击用户信息
    clickUser() {
      this.$emit("clickUser");
    },
    // 点击关注
    clickFocus() {
      this.$emit("clickFocus");
    },
    // 点赞
    clickThumbsup(type) {
      this.$emit("clickThumbsup", type);
    },
    // 点击打赏
    clickGiveReward() {
      this.$emit("clickGiveReward");
    },
    // 点击聊天
    clickChat() {
      this.$emit("clickChat");
    },
  },
};
</script>

<style lang="scss" scoped>
/* 想法图片排列样式 */
.uni-list-chat__content-extra-text {
  color: #007aff;
}
.dynamic {
  width: 100%;
}
.allImage {
  display: flex;
  margin-top: 10rpx;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.imgList {
  margin: 20rpx 30rpx;
}
.images:not(:nth-child(3n)) {
  /* margin-right: 10rpx; */
}
.text {
  margin: 1% 3% 2%;
}
.images {
  margin-right: 10rpx;
  display: inline-block;
}
.images3:nth-child(3n) {
  margin-right: 0rpx;
}
.operate {
  width: 94%;
  padding: 10rpx 0;
  margin-top: 10rpx;
  font-size: 14px;
  display: flex;
  align-items: center;
  background-color: #e9f0ff73;
  justify-content: space-around;
}
.chat-custom-right {
  flex: 1;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}

.chat-custom-text {
  font-size: 12px;
  color: #999;
}
.bottom-line {
  border-bottom: 4px solid #efefef;
}

.user__container {
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  /* -webkit-flex-direction: row; */
  flex-direction: row;
  -webkit-box-flex: 1;
  /* -webkit-flex: 1; */
  flex: 1;
  padding: 10px 15px;
  position: relative;
  overflow: hidden;
}
.user__header {
  display: flex;
  width: 100rpx;
  height: 100rpx;

  overflow: hidden;
  border-radius: 120rpx;
}
.user__header-image {
  display: flex;
  align-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  flex-wrap: wrap-reverse;
  width: 100rpx;
  height: 100rpx;
  border-radius: 100rpx;

  overflow: hidden;
}
.user__content {
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  -webkit-box-flex: 1;
  flex: 1;
  overflow: hidden;
  padding: 2px 0;
}
.user__content-main {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  padding-left: 20rpx;
  padding-top: 6rpx;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  overflow: hidden;
}
.user__content-note {
  margin-top: 3px;
  color: #aaacab;
  font-size: 26rpx;
  letter-spacing: 1rpx;
  font-weight: normal;
  overflow: hidden;
}
.user__focus-on {
  padding: 3px 10px;
  border: 1px solid #fb5f5f;
  color: #fb5f5f;
  display: flex;
  font-size: 14px;
  border-radius: 3px;
}
.user__focus-off {
  padding: 3px;
  color: gray;
  font-size: 14px;
}
.title {
  text-align: justify;
  color: #292929;
  font-weight: 600;
  font-size: 32rpx;
  margin-bottom: 20rpx;
}
.user__content-title {
  color: #5a6988;
  font-weight: 600;
  font-size: 34rpx;
}
::v-deep rich-text {
  text-align: justify;
  white-space: pre-wrap;
  word-wrap: break-word;
}
::v-deep rich-text p {
  text-indent: 0 !important;
}
.likeList{
	background: #f7f7f7;
	border-radius: 4rpx;
	padding: 8rpx 20rpx;
	box-sizing: border-box;
	margin: 20rpx 32rpx;
	display: flex;
	align-items: center;
}
.hidden2{
		line-height: 24px;
		max-height: 120px;
		-webkit-line-clamp: 5;
		height: auto;
	}
</style>
