<template>
	<view>
		<cu-custom bgColor="bg-main-bar" :isBack="true">
			<template #backText></template>
			<template #content>黑名单列表</template>
			<!-- <template #right>
				<view class="f-20 ml-10 mr-10" @tap="search()">
					<text class="cuIcon-search"></text>
				</view>
			</template> -->
		</cu-custom>
		<view class="cu-list menu-avatar no-padding">
			<view class="flex List-item" v-for="(items,sub) in groupList" :key="sub">
				<view class="flex align-center" style="padding: 10px;">
					<view class='cu-avatar lg radius mr-10' :style="[{backgroundImage:'url('+items.avatar+')'}]">
					</view>
					<view>
						<view class="c-333">{{items.displayName}}</view>
					</view>
				</view>
				
				<view class="flex">
					<view class="fc-danger mr-10" @tap="setis_blacklist(items)">移除黑名单</view>
					<view class="action fc-primary mr-10" @tap='openDetails(items)'>
						<view>发送信息</view>
					</view>
				</view>
			</view>
			<Empty v-if="!groupList.length" noDatatext="暂无数据" textcolor="#999" ></Empty>
		</view>

	</view>
</template>

<script>
	import { storeToRefs } from 'pinia';
	import { useMsgStore } from '@/store/message';
	import { useloginStore } from '@/store/login'
	import pinia from '@/store/index'
	const userStore = useloginStore(pinia);
	const msgStore = useMsgStore(pinia)
	const {contacts} = storeToRefs(msgStore);
	/**
	 * 初始的引导页
	 */
	export default {
		name  : "group",
		data() {
			return {
				groupList:[],
				userInfo:userStore.userInfo
			};
		},
		created() {
		},
		mounted(){
			this.initContacts();
		},
		methods: {
			initContacts(arr){
				this.$api.msgApi.initContacts().then(res => {
					this.groupList = res.data.filter(item=>item.is_blacklist==1)
				})
			},
			setis_blacklist(items){
				this.$api.msgApi.isBlacklist({friend_user_id:items.user_id}).then(res => {
					if (res.code == 0) {
					  uni.showToast({
					  	title: '移除成功!'
					  })
					  this.initContacts();
					}
				})
			},
			// 打开聊天
			openDetails(items){
				uni.navigateTo({
					url:"/pages/message/chat?id="+items.id
				})
			},
			search(){
				uni.navigateTo({
					url:"/pages/index/search?type=4"
				})
			}
		}
	}
</script>

<style scoped>
.fc-primary{
	color: #409eff;
}
.fc-danger{
	color: #f56c6c;
}
.List-item{
	justify-content: space-between;
	align-items: center;
}
</style>