<template>
  <view class="application_list_container">
    <custom-nav-bar :title="getTitle" />

    <u-list class="application_list">
      <u-list-item
        v-for="application in getRenderData"
        :key="getKey(application)"
      >
        <application-item :isRecv="isRecv" :application="application" />
      </u-list-item>
    </u-list>
  </view>
</template>

<script>
import CustomNavBar from "@/components/CustomNavBar/index.vue";
import ApplicationItem from "../applicationList/ApplicationItem.vue";
export default {
  components: {
    CustomNavBar,
    ApplicationItem,
  },
  data() {
    return {
      isGroupApplication: false,
      isRecv: false,
    };
  },
  computed: {
    getRenderData() {
      let getterKey = this.isRecv
        ? "storeRecvFriendApplications"
        : "storeSentFriendApplications";
      if (this.isGroupApplication) {
        getterKey = this.isRecv
          ? "storeRecvGroupApplications"
          : "storeSentGroupApplications";
      }
      return [...this.$store.getters[getterKey]].sort((a, b) =>
        a.handleResult === 0 ? -1 : 1,
      );
    },
    getKey() {
      return (application) => {
        if (this.isGroupApplication) {
          return this.isRecv
            ? application.userID + application.groupID
            : application.groupID;
        }
        return application[this.isRecv ? "fromUserID" : "toUserID"];
      };
    },
    getTitle() {
      if (!this.isRecv) {
        return "我的申请";
      }
      return this.isGroupApplication ? "群通知" : "好友请求";
    },
  },
  onLoad(options) {
    const { isGroupApplication, isRecv } = options;
    this.isGroupApplication = JSON.parse(isGroupApplication);
    this.isRecv = JSON.parse(isRecv);
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.application_list_container {
  @include colBox(false);
  height: 100vh;
  background-color: #f8f8f8;

  .application_list {
    margin-top: 24rpx;
    flex: 1;
  }
}
</style>
