<template>
    <div v-for="confirmData in waitConfirmList" :key="confirmData.id" class="account-card">
        <div class="menu-item-container">
            <a-avatar
            :src="confirmData.user?.photo"
            :size="30"
            class="menu-item-avatar"
        />
        <div class="menu-item-name">
            {{ confirmData.user?.userName }}
        </div>
        <a-button class="confirmBtn" type="text" @click="doConfirm(confirmData.relationId)">同意</a-button>
        <a-button class="rejectBtn" type="text" @click="doReject(confirmData.relationId)">拒绝</a-button>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
import { Button, message } from 'ant-design-vue';

export default {
  props: {
    waitConfirmList: Array
  },
  setup() {
    const doConfirm = async (relationId) => {
        try {
            const response = await axios.post(`/client-service/chat/account-relation/confirmSubscribe/` + relationId, {
                headers: {
                'origin-url': window.location.href
              }
            });
            if (response.data.code === 200) {
                // 审核通过，返回对话列表
                message.info("审核通过");
                // 通知父组件删除当前待审核记录
                emit('update:waitConfirmList', props.waitConfirmList.filter(item => item.relationId !== relationId));
            } else {
                message.error(response.data.message || '审核失败');
            }
        } catch (error) {
            message.error('审核失败', error);
        }
    } 

    const doReject = async (relationId) => {
        try {
            const response = await axios.post(`/client-service/chat/account-relation/rejectSubscribe/` + relationId, {
                headers: {
                'origin-url': window.location.href
              }
            });
            if (response.data.code === 200) {
                // 审核通过，返回对话列表
                message.info("已拒绝");
                // 通知父组件删除当前待审核记录
                emit('update:waitConfirmList', props.waitConfirmList.filter(item => item.relationId !== relationId));
            } else {
                message.error(response.data.message || '审核失败');
            }
        } catch (error) {
            message.error('审核失败');
        }
    } 

    return {
        doConfirm,
        doReject
    }
  },
 
};
</script>

<style scoped>
    .menu-item-container {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        padding: 6px 15px;
    }
    .menu-item-avatar {
        border: 2px solid white;
        border-radius: 50%;
        margin-right: 10px;
    }
    .menu-item-name {
        font-weight: 500;
        font-size: 15px;
        color: black;
    }
    .account-card {
        width: 100%;
    }
    .confirmBtn, .rejectBtn {
        position: relative;
        float: right;
    }
</style>