<template>
  <view class="page">
    <view class="fixBox">
      <view class="navBox">
        <view v-for="(item, index) in navList" :key="index">
          <view
            class="nav"
            :style="{
              'background-color': activeNav == index ? mainColor : '#fff',
              color: activeNav == index ? '#fff' : '#888888',
            }"
            @click="changNav(index)"
          >
            {{ item.name }}
          </view>
        </view>
      </view>
      <view class="visitBox">
        <view class="visit">
          <view class="num">
            {{ allVisit }}
          </view>
          <view class="name"> 总浏览量 </view>
        </view>
        <view class="visit">
          <view class="num">
            {{ todayVisit }}
          </view>
          <view class="name"> 今日访客 </view>
        </view>
        <view class="visit">
          <view class="num">
            {{ PeopleNum }}
          </view>
          <view class="name"> 今日浏览量 </view>
        </view>
      </view>
    </view>
    <u-empty
      v-if="visitorData.length == 0"
      text="暂无访问记录"
      mode="list"
      class="noBox"
    ></u-empty>
    <view v-if="visitorData.length > 0" class="viewBox">
      <scroll-view
        :scroll-y="true"
        :enable-back-to-top="true"
        :enable-flex="true"
        @scrolltolower="lower"
        :style="{ height: '100%' }"
      >
        <view v-for="(item, index) in visitorData" :key="index">
          <view class="itemBox">
            <view class="date">
              {{ item.date.slice(0, 10) }}
            </view>
            <view
              v-if="item.list"
              v-for="(subItem, subIndex) in item.list"
              :key="subIndex"
            >
              <view class="subItemBox" @click="goUserinfo(subItem)">
                <view class="avaBox">
                  <image class="avatar" :src="subItem.Photo"></image>
                  <image
                    class="sex"
                    v-if="subItem.Sex == 1"
                    src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/basic-nan2.png"
                  ></image>
                  <image
                    class="sex"
                    v-if="subItem.Sex == 2"
                    src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/basic-nv2.png"
                  ></image>
                </view>

                <view class="rightBox">
                  <view class="infoBox">
                    <view class="name">
                      {{ subItem.RealName || subItem.UserName }}
                    </view>
                    <view class="time">
                      {{ subItem.CreateDate.slice(-5)
                      }}<text
                        style="margin-left: 5rpx"
                        v-if="msg.VsisitorType == 1"
                        >&nbsp;&nbsp;访问了你</text
                      ><text
                        style="margin-left: 5rpx"
                        v-if="msg.VsisitorType == 2"
                        >&nbsp;&nbsp;访问了ta</text
                      >
                    </view>
                  </view>
                  <!-- <view class="icon"> </view> -->
                </view>
              </view>
            </view>
          </view>
        </view>
        <u-loadmore
          :status="status"
          :load-text="loadText"
          :font-size="24"
          :margin-top="20"
          :margin-bottom="20"
          bg-color="#FFF"
        />
      </scroll-view>
    </view>
    <!-- 加载中 -->
    <view class="loading" v-if="loading">
      <u-loading mode="flower" size="48"></u-loading>
      <Text style="color: #fff; margin-top: 10rpx">加载中...</Text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      pageTitle: "访客",
      msg: {
        pageIndex: 1,
        pageSize: 10,
        VsisitorType: 1,
        Status: -1,
      },
      pageCount: 0,
      mainColor: "",
      secondary: "",
      pricecolor: "",
      navList: [
        {
          name: "谁看过我",
        },
        {
          name: "我看过谁",
        },
      ],
      activeNav: 0,
      allVisit: 100, //总浏览量
      todayVisit: 1, //今日总浏览量
      PeopleNum: 0, //今日浏览量人数
      visitorData: [],
      loading: false,
      status: "loadmore",
      loadText: {
        loadmore: "轻轻上拉，加载更多",
        loading: "努力加载中",
        nomore: "没有更多了",
      },
      showone: true,
    };
  },
  methods: {
    changNav(index) {
      this.activeNav = index;
      this.msg.VsisitorType = index + 1;
      this.msg.pageIndex = 1;
      this.visitorData = [];
      this.getMiaiMessageVisitorPageList();
    },
    //获取今日访问量
    getMiaiMessageVisitorStatistics() {
      this.request2(
        {
          url: "/api/AppletMiai/GetMiaiMessageVisitorStatistics",
          data: this.msg,
        },
        (res) => {
          if (res.resultCode == 1) {
            this.todayVisit = res.data.TCount;
            this.PeopleNum = res.data.PeopleNum;
          }
        }
      );
    },
    // 获取访问列表
    getMiaiMessageVisitorPageList() {
      this.request2(
        {
          url: "/api/AppletMiai/GetMiaiMessageVisitorPageList",
          data: this.msg,
        },
        (res) => {
          if (res.resultCode == 1) {
            this.allVisit = res.data.count;
            this.loading = false;
            let data = this.handleDate(res.data.pageData, "CreateDate");
            this.visitorData = this.visitorData.concat(data);
            this.pageCount = res.data.pageCount;
            if (this.pageCount == 1) {
              this.status = "nomore";
            }
            if (this.showone == true && this.visitorData.length > 0) {
              this.setAllMsgSee();
              this.showone = false;
            }
          }
        }
      );
    },
    //合并相同日期
    handleDate(arr, date) {
      let newArr = [];
      arr.map((item, i) => {
        let find = newArr.filter((e) => {
          return e.date.slice(0, 10) == item[date].slice(0, 10);
        });
        if (find.length > 0) {
          find[0].list.push(item);
        } else {
          let obj = {
            date: item[date],
            list: [item],
          };
          newArr.push(obj);
        }
      }, []);
      return newArr;
    },
    //触底事件
    lower(e) {
      if (this.msg.pageIndex < this.pageCount) {
        this.msg.pageIndex++;
        this.status = "loading";
        this.getMiaiMessageVisitorPageList();
      } else {
        this.status = "nomore";
      }
    },
    //设置全部消息为已看
    setAllMsgSee() {
      this.request2(
        {
          url: "/api/AppletMiai/DelMiaiMessageInfoBatch",
          data: {
            TypeIds: "7,10",
          },
        },
        (res) => {
          if (res.resultCode == 1) {
          }
        }
      );
    },
    goUserinfo(x) {
      uni.navigateTo({
        url: "/pages/blindDate/persondetails?UserId=" + x.UserId,
      });
    },
  },
  created() {
    this.mainColor = this.$uiConfig.mainColor;
    this.secondary = this.$uiConfig.secondary;
    this.pricecolor = this.$uiConfig.pricecolor;
  },
  onShow() {
    this.getMiaiMessageVisitorPageList();
  },
  mounted() {
    this.getMiaiMessageVisitorStatistics();
    uni.setNavigationBarTitle({
      title: this.pageTitle,
    });
    if (this.visitorData.length > 0) {
      this.setAllMsgSee();
    }
  },
};
</script>

<style lang="scss" scoped>
.page {
  padding: 0 30rpx;
  position: relative;
}

.fixBox {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
}
.noBox {
  position: fixed;
  top: 270rpx;
  left: 0;
  width: 100%;
  overflow: hidden;
}
.viewBox {
  position: fixed;
  top: 270rpx;
  left: 0;
  width: 100%;
  height: calc(100vh - 270rpx);
  overflow: hidden;
  padding: 0 30rpx;
}

.navBox {
  width: 100%;
  height: 110rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .nav {
    width: 170rpx;
    height: 56rpx;
    line-height: 56rpx;
    border-radius: 28rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #888888;
    text-align: center;
  }
}

.visitBox {
  height: 160rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;

  .visit {
    width: 115rpx;
    height: 72rpx;

    .num {
      text-align: center;
      font-size: 40rpx;
      font-weight: bold;
      color: #111111;
    }

    .name {
      text-align: center;
      font-size: 22rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #888888;
    }
  }
}

.itemBox {
  .date {
    font-size: 26rpx;
    font-weight: 500;
    color: #111111;
    margin-top: 40rpx;
  }

  .subItemBox {
    height: 140rpx;
    display: flex;
    align-items: center;

    .avaBox {
      position: relative;

      .avatar {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        background-color: #00bfff;
        margin-right: 30rpx;
      }

      .sex {
        width: 30rpx;
        height: 30rpx;
        border-radius: 50%;
        position: absolute;
        right: 30rpx;
        bottom: 0;
      }
    }

    .rightBox {
      flex-grow: 5;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100%;
      border-bottom: 1rpx solid #e2e2e2;

      .infoBox {
        .name {
          margin-bottom: 5rpx;
          font-size: 30rpx;
          font-weight: 800;
          color: #000000;
        }

        .time {
          font-size: 24rpx;
          font-weight: 500;
          color: #888888;
        }
      }

      .icon {
        width: 30rpx;
        height: 6rpx;
        background-color: #000000;
      }
    }
  }
}
</style>
