<template>
  <view>
    <view
      class="flex-col Information"
      style="position: relative; height: 100%"
      @tap="btnShow = false"
    >
      <view class="flex-col">
        <template v-if="list.length <= 0">
          <view
            v-if="type != 2 && type != 3 && !noShowEmpty"
            style="height: 1rem"
          ></view>
          <!-- <u-empty v-if="type != 2 && type != 3" text="暂无数据" mode="list"></u-empty> -->
          <no-data v-if="type != 2 && type != 3" text="暂无数据"></no-data>
        </template>
        <template v-else v-for="(item, index) in list">
          <view
            class="flex-col list-item"
            :class="{
              'border-radius': borderRadius,
              'border-noPadding': borderNoPadding,
            }"
            :key="index"
          >
            <view style="height: 0.1rem" v-if="item.isState"></view>
            <text class="shield" v-if="item.isState">
              <u-icon size="30" name="error-circle-fill"></u-icon
              >该信息已被管理员屏蔽
            </text>
            <view class="flex-row group_8 view">
              <u-avatar
                @click="toDetil(item.userId)"
                size="0.3rem"
                :src="$u.http.config.imgUrl + item.userHead"
                class="image_3"
              ></u-avatar>
              <text class="text_8 text_43">{{ item.userName }}</text>
              <text class="text_9">{{ item.creationTime }}</text>
              <text class="text_11">{{ item.schoolName }}</text>
              <u-icon
                v-if="isDel"
                name="more-dot-fill"
                color="#ccc"
                size="40"
                style="position: absolute; right: 0"
                @click="showDelFn(item)"
              ></u-icon>
            </view>
            <view class="flex-col group_9" @click="onDetails(item)">
              <text class="text_14" v-if="type != 2">{{
                item.title.length > 15
                  ? item.title.slice(0, 15) + "..."
                  : item.title
              }}</text>
              <text class="text_14" v-else>{{ item.title }}</text>
              <template v-if="!item.isForward">
                <view v-if="!item.isDelete">
                  <text class="text_15" v-if="type != 2">
                    {{
                      item.content.length > 50
                        ? item.content.slice(0, 50) + "..."
                        : item.content
                    }}
                  </text>
                  <text class="text_15" v-else>
                    {{ item.content }}
                  </text>
                  <view
                    class="imgList flex-col"
                    v-if="item.imageUrl.indexOf('.') > 0"
                  >
                    <view class="flex-row">
                      <image
                        @click.stop="clickImg(v)"
                        v-for="(v, i) in item.imageUrl.split(',')"
                        :key="i"
                        :src="v ? $u.http.config.imgUrl + v : ''"
                        class="image_10"
                      />
                    </view>
                  </view>
                  <view class="flex-row" v-if="item.sysSignStr">
                    <text
                      class="text_16"
                      v-for="(v, i) in item.sysSignStr.split(',')"
                      @click.stop="onSign(v)"
                      :key="i"
                      >{{ v ? "#" + v : "" }}</text
                    >
                  </view>
                </view>
                <view
                  v-else
                  class="flex-row justify-between items-center delete-item"
                >
                  <text class="item-text">哎呀，此页面已被发布者删除。</text>
                  <u-icon
                    class="icon-1"
                    name="trash"
                    color="black"
                    size="50"
                    @click="onDelCollet(item)"
                  ></u-icon>
                </view>
              </template>
              <template v-else>
                <view
                  style="
                    background: #f8f8f8;
                    padding: 0.1rem;
                    margin-top: 0.1rem;
                  "
                  class="flex-col group_9"
                >
                  <text class="text_14" v-if="type != 2">{{
                    item.forwardModel.forwardTitle.length > 15
                      ? item.forwardModel.forwardTitle.slice(0, 15) + "..."
                      : item.forwardModel.forwardTitle
                  }}</text>
                  <text class="text_14" v-else>{{
                    item.forwardModel.forwardTitle
                  }}</text>
                  <text class="text_15" v-if="type != 2">
                    {{
                      item.content.length > 50
                        ? item.content.slice(0, 50) + "..."
                        : item.content
                    }}
                  </text>
                  <text class="text_15" v-else>
                    {{ item.content }}
                  </text>
                  <view
                    class="imgList flex-col"
                    v-if="item.forwardModel.forwardImageUrl.indexOf('.') > 0"
                  >
                    <view class="flex-row">
                      <image
                        style="width: 32%; height: 0auto"
                        @click.stop="clickImg(v)"
                        v-for="(
                          v, i
                        ) in item.forwardModel.forwardImageUrl.split(',')"
                        v-if="i < 9"
                        :key="i"
                        :src="v ? $u.http.config.imgUrl + v : ''"
                        class="image_10"
                      />
                    </view>
                  </view>
                  <view class="flex-row" v-if="item.sysSignStr">
                    <text
                      @click.stop="onSign(v)"
                      class="text_16"
                      v-for="(v, i) in item.sysSignStr.split(',')"
                      :key="i"
                      >{{ v ? "#" + v : "" }}</text
                    >
                  </view>
                </view>
              </template>
            </view>
            <view class="flex-row">
              <view class="flex-row group_21" v-if="type != 2 && type != 3">
                <view
                  class="flex-row equal-division-item_1"
                  @click="onForward(item)"
                  v-if="!item.isForward && type != 0"
                >
                  <image
                    src="/static/common/img/homepage/reply.png"
                    class="image_8"
                  />
                  <text class="text_19">{{ item.forwardCount }}</text>
                </view>
                <view class="flex-row group_10" @click="onDetails(item)">
                  <image
                    src="/static/common/img/homepage/comment.png"
                    class="image_7"
                  />
                  <text class="text_18">{{ item.commentCount }}</text>
                </view>

                <view class="flex-row group_20">
                  <!-- <u-icon style="font-size:0.22rem;color:#b4b6bd" v-if="item.isCllect == false"
										name="star" @click="onStar(item)"></u-icon> -->
                  <image
                    style="width: 42rpx; height: 42rpx"
                    src="/static/common/img/homepage/star.png"
                    v-if="item.isCllect == false"
                    name="star"
                    @click="onStar(item)"
                  ></image>
                  <u-icon
                    style="font-size: 40rpx; color: #ffc300"
                    v-else
                    name="star-fill"
                    @click="onStar(item)"
                  ></u-icon>
                  <text class="text_17">{{ item.collectCount }}</text>
                </view>
             <!--
				<view
				class="flex-row group_20"
				v-if="isDel"
				@tap="onDelete(item)"
                >
				<image
				src="/static/common/img/homepage/trash.png"
				style="width: 42rpx; height: 42rpx"
				/>
                </view>
				-->
              </view>
            </view>
          </view>
        </template>
      </view>
      <template v-if="bottom && list.length > 0">
        <view style="height: 0.46rem"></view>
        <u-divider
          style="bottom: 0.2rem; position: absolute; background: transparent"
          color="#6d6d6d"
          half-width="200"
          border-color="#6d6d6d"
        >
          {{ text ? text : "已经到底了" }}
        </u-divider>
      </template>
      <u-popup v-model="showDel" mode="bottom" :border-radius="40">
        <view class="popup-box">
          <view class="popup-btn" @click="delItem">删除</view>
          <view class="popup-line"></view>
          <view class="popup-btn" @click="showDel = false">取消</view>
        </view>
      </u-popup>
      <u-toast ref="uToast" />
      <u-top-tips ref="uTips" :navbar-height="0"></u-top-tips>
    </view>
  </view>
</template>

<script>
import NoData from "components/NoData.vue";
export default {
  name: "information",
  components: {
    NoData,
  },
  // list（array） 数据集 type（number）数据类型  bottom 是否显示 nolink控制是否进行转挑
  props: [
    "list",
    "type",
    "bottom",
    "text",
    "schoolId",
    "nolink",
    "route",
    "flag",
    "id",
    "isEllipsis",
    "isDel",
    "borderRadius",
    "borderNoPadding",
    "noShowEmpty",
  ],
  data() {
    return {
      isindex: -1,
      btnShow: false,
      state: false,
      currentRow: {},
      showDel: false,
      delRow: {},
    };
  },
  mounted() {},
  onLoad() {
    this.state = true;
  },
  methods: {
    showDelFn(item) {
      this.delRow = item;
      this.showDel = true;
    },
    delItem() {
	  this.showDel = false;
      this.$emit("onDelete", {
        type: this.delRow.type,
        id: this.delRow.id,
      });
    },
    //详情
    onDetails(item) {
      console.log(JSON.parse(JSON.stringify(item)), "item-JSON-");
      this.currentRow = item;
      uni.$off("echoList");
      uni.$on("echoList", (result) => {
        // console.log('echoList----')
        // 收藏
        if (result.type === "star") {
          console.log("%c%s", "color:red", "收藏回显");
          console.log(result, "result");
          this.currentRow.isCllect = result.data.isCllect;
          console.log(result.isCllect, "result.isCllect");
          if (result.data.isCllect === true) {
            this.currentRow.collectCount++;
          }
          if (result.data.isCllect === false) {
            this.currentRow.collectCount && this.currentRow.collectCount--;
          }
        }
        // 评价
        if (result.type === "evaluate") {
          console.log("%c%s", "color:red", "评价回显");
          console.log(result, "result");
          this.currentRow.commentCount = result.data.commentCount;
        }
      });
      // return
      if (this.nolink) {
        return;
      }
      if (item.isDelete) {
        return;
      }
      item.flag = this.flag;
      item.route = this.route;
      item.mytype = this.type;
      item.myschoolId = this.id;
      if (this.type == 3) {
        item.mytype = item.type;
      }
      // return
      this.$u.route({
        url: "pages/AlumniCircle/ArticleDetails/ArticleDetails",
        params: {
          data: JSON.stringify(item),
          isDel:this.isDel
        },
      });
    },
    toDetil(id) {
      this.$u.route({
        url: "/pages/AlumniCircle/userDetail/userDetail?id=" + id + "&type=4",
      });
    },
    //收藏
    onStar(item) {
      item.type = this.type;
      this.$emit("onStar", item);
    },
    //转发
    async onForward(item) {
      console.log(JSON.parse(JSON.stringify(item)), "item-JSON-");
      // return
      this.currentRow = item;
      uni.$off("echoList");
      uni.$on("echoList", (result) => {
        console.log("%c%s", "color:red", "echoList----");
        // 转发
        if (result.type === "forward") {
          console.log("%c%s", "color:red", "转发回显");
          console.log(result, "result");
          this.currentRow.forwardCount++;
        }
      });
      // 判断当前学校是否认证，未认证不可转发
      const req = {
        userId: this.vuex_user.id,
      };
      const res = await this.$u.apiList.MyPage(req);
      console.log(JSON.parse(JSON.stringify(res)), "res");
      const edcationList = res.edcationList;
      if (!edcationList.length) {
        return this.$refs.uToast.show({
          title: "认证后可进行转发操作",
          type: "none",
        });
      }
      const findRow = edcationList.find((x) => x.isSelected === true);
      if ([0, 2].includes(findRow.certifyStatus)) {
        return this.$refs.uToast.show({
          title: "认证后可进行转发操作",
          type: "none",
        });
      }
      if (this.schoolId) {
        item.schoolId = this.schoolId;
      }
      item.route = this.route;
      if (item.isForward) return;
      this.$u.route({
        url: "pages/AlumniCircle/forward/forward",
        params: {
          data: JSON.stringify(item),
        },
      });
    },
    //图片预览
    clickImg(item) {
      if (this.route == 3 || this.nolink) {
        item = this.$u.http.config.imgUrl + item;
        var images = [];
        images.push(item);
        uni.previewImage({
          // 图片路径必须是一个数组 => ['']
          current: 0,
          urls: images,
        });
      }
      this.$emit("clickImg", item);
    },
    onSign(v) {
      this.$emit("onSign", v);
    },
    //删除
    onDelete(item) {
      this.$emit("onDelete", {
        type: item.type,
        id: item.id,
      });
    },
    //删除收藏
    onDelCollet(item) {
      this.$emit("onDelCollet", item.collectId);
    },
  },
};
</script>

<style lang="scss">
.btns {
  background-color: #fff;
  box-shadow: 0 0 0.05rem #ccc;
  border-radius: 0.05rem;
  position: absolute;
  bottom: 100%;
  white-space: nowrap;

  .item {
    line-height: 2;
    padding: 0 0.1rem;
  }
}

::v-deep .u-divider-text {
  line-height: 2;
}

.Information {
  background-color: rgb(246, 247, 250);
  // margin-top: 0.1rem;

  .list-item {
    padding: 0.18rem 0.2rem;
    background-color: rgb(255, 255, 255);
    margin-bottom: 0.1rem;
    position: relative;
    width: 100%;
    // width: calc(100% - 50rpx);
    // margin: 0.1rem auto 0;
    // border-radius: 24rpx 24rpx 24rpx 24rpx;
    // border: 2rpx solid #F7F6F9;
    overflow: hidden;

    .shield {
      position: absolute;
      top: 0.05rem;
      width: 100%;
      color: #ff9b00;
      left: 0.1rem;
    }

    .view {
      margin-right: 0.051rem;
    }

    .group_9 {
      // margin-right: 0.13rem;
      margin-top: 0.1rem;
      width: 100%;

      .text_14 {
        align-self: flex-start;
        color: rgb(2, 2, 2);
        font-size: 0.16rem;
        font-family: Adobe Heiti Std;
        line-height: 2;
        width: 100%;
        word-wrap: break-word;
      }

      .text_15 {
        // margin-top: 0.11rem;
        color: rgb(73, 76, 87);
        font-size: 0.14rem;
        font-family: Adobe Heiti Std;
        line-height: 0.24rem;
        text-indent: 0.2rem;
        word-wrap: break-word;
      }

      .text_16 {
        margin-left: 0.04rem;
        margin-top: 0.12rem;
        align-self: flex-start;
        // color: rgb(44, 109, 255);
        color: #298bc3;
        font-size: 0.14rem;
        font-family: PingFang;
        line-height: 0.13rem;
      }
    }

    .group_21 {
      margin-top: 0.1rem;
      justify-content: space-between;
      width: 90%;
      margin: 0.1rem auto 0;

      .group_20 {
        justify-content: center;
        flex: 1;
        // margin: 0.025rem 0;

        .image_6 {
          flex-shrink: 0;
          width: 42rpx;
          height: 42rpx;
        }

        .text_17 {
          margin-left: 5rpx;
          margin-top: 8rpx;
          color: rgb(180, 182, 189);
          font-size: 0.14rem;
          font-family: PingFang;
          line-height: 0.11rem;
        }
      }

      .group_10 {
        justify-content: center;
        flex: 1;
        align-self: center;

        .image_7 {
          flex-shrink: 0;
          width: 42rpx;
          height: 42rpx;
        }

        .text_18 {
          margin-left: 5rpx;
          margin-top: 8rpx;
          color: rgb(180, 182, 189);
          font-size: 0.14rem;
          font-family: PingFang;
          line-height: 0.11rem;
        }
      }

      .equal-division-item_1 {
        flex: 1;
        justify-content: center;
        align-self: center;

        .image_8 {
          width: 42rpx;
          height: 42rpx;
        }

        .text_19 {
          margin-left: 5rpx;
          margin-top: 8rpx;
          color: rgb(180, 182, 189);
          font-size: 0.14rem;
          font-family: PingFang;
          line-height: 0.11rem;
        }
      }
    }
  }

  .border-radius {
    border-radius: 24rpx;
    width: calc(100% - 48rpx);
    margin: 0.1rem auto 0;
  }

  .border-noPadding {
    border-radius: 24rpx;
    margin: 0.1rem auto 0;
  }

  .list-item:last-child {
    margin-bottom: 0;
  }

  .imgList {
    padding-top: 0.1rem;

    .flex-row {
      flex-wrap: wrap;
    }

    image {
      width: 33%;
      height: 1rem;
      margin: 0 0.5% 0.5% 0;
    }

    image:nth-child(3n) {
      margin-right: 0;
    }
  }

  .delete-item {
    box-sizing: border-box;

    .item-text {
      padding-top: 0.05rem;
      color: #000000;
    }

    .icon-1 {
    }
  }

  .group_8 {
    height: 0.32rem;
    position: relative;

    .image_3 {
      width: 0.3rem !important;
      height: 0.3rem !important;
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      border-radius: 50%;
    }

    .text_8 {
      color: rgb(2, 2, 2);
      font-size: 0.14rem;
      font-family: PingFang;
      line-height: 0.13rem;
    }

    .text_43 {
      position: absolute;
      left: 0.37rem;
      top: 0.02rem;
    }

    .text_9 {
      color: rgb(184, 184, 184);
      font-size: 0.12rem;
      font-family: PingFang;
      line-height: 0.12rem;
      position: absolute;
      left: 0.37rem;
      bottom: 0;
    }

    .text_11 {
      color: rgb(184, 184, 184);
      font-size: 0.12rem;
      font-family: PingFang;
      line-height: 0.12rem;
      position: absolute;
      left: 0.97rem;
      bottom: 0;
    }

    .text_20 {
      position: absolute;
      left: 0.36rem;
      top: 0.02rem;
    }
  }
}
.popup-box {
  padding: 10rpx 0;
  .popup-btn {
    font-size: 34rpx;
    text-align: center;
    padding: 30rpx;
  }
  .popup-line {
    height: 20rpx;
    background: #f7f7f8;
  }
}
</style>
