<template>
  <cu-custom bgImage="/static/bg.png" :isBack="true">
    <template v-slot:content>
      好友验证
    </template>
  </cu-custom>
  <view class="cu-list menu-avatar tab-bar-mar">
    <view class="cu-item bg-white" v-for="(friend) in friendStore.waitValidateList" :key="friend.id" >
      <user-avatar-tag :id="friend.userId"/>
      <view class="content">
        <view class="text-grey">
          <user-name-tag :id="friend.userId"/>
        </view>
        <view class="text-gray text-sm text-cut">
          <text>{{ friend.message }}</text>
        </view>
      </view>
      <view class="action padding-right" style="width:8rem">
        <button class="cu-btn bg-cyan sm margin-right" @tap="agree(friend.userId)">同意</button>
        <button class="cu-btn bg-red sm" @tap="refuse(friend.userId)">拒绝</button>
      </view>
    </view>
  </view>
  <no-data v-if="friendStore.waitValidateList.length === 0"/>
</template>
<script lang="ts" setup>
import CuCustom from '@/colorui/components/cu-custom.vue'
import FriendApi from "@/api/FriendApi";
import {useFriendStore} from "@/store/friendStore";
import {ref} from "vue";
import UserNameTag from "@/components/UserNameTag.vue";
import UserAvatarTag from "@/components/UserAvatarTag.vue";
import NoData from "@/components/NoData.vue";

const list = ref();
const friendStore = useFriendStore();
friendStore.loadValidateList()
/**
 * 同意邀请
 * @param userId userId
 */
const agree = (userId: string|undefined) => {
  if(userId){
    FriendApi.agree(userId).then(() => {
      friendStore.loadValidateList();
    });
  }
};

/**
 * 拒绝邀请
 * @param userId userId
 */
const refuse = (userId: string|undefined) => {
  if(userId) {
    FriendApi.delete(userId).then(() => {
      friendStore.loadValidateList();
    });
  }
};
</script>
<style scoped>

</style>