<template>
	<div class="wrapper bg_page">
		<!-- <NavBar :title="t('FriendPageText')" /> -->
		<UserCard :account="userInfo && userInfo.accountId" :nick="userInfo && userInfo.name"></UserCard>
		<template v-if="relation === 'stranger'">
			<div class="userInfo-item-wrapper">
				<div class="userInfo-item">
					<div class="item-left">{{ t("addBlacklist") }}</div>
					<switch :checked="isInBlacklist" @change="(checked) => handleSwitchChange(checked)" />
				</div>
				<div class="userInfo-item">
					<div class="item-left">{{ "手机号" }}</div>
					<div class="g_flex_row_end" @click="takeTel">
						<div class="">{{ tel || "-" }}</div>
					</div>
				</div>
			</div>

			<!-- <div class="button" :style="{ marginTop: '10px' }" @click="addFriend">
				{{ t("addFriendText") }}
			</div> -->
		</template>
		<template v-else>
			<div class="userInfo-item-wrapper">
				<div class="userInfo-item" @tap="handleAliasClick">
					<div class="item-left">{{ t("remarkText") }}</div>
					<div class="item-right">
						<Icon iconClassName="more-icon" color="#999" type="icon-jiantou" />
					</div>
				</div>
				<div class="userInfo-item">
					<div class="item-left">{{ t("genderText") }}</div>
					<div class="item-right">
						{{ userInfo && userInfo.gender === 0 ? t("unknow") : userInfo && userInfo.gender === 1 ? t("man") : t("woman") }}
					</div>
				</div>
				<div class="box-shadow"></div>
				<div class="userInfo-item">
					<div class="item-left">{{ t("birthText") }}</div>
					<div class="item-right">
						{{ (userInfo && userInfo.birthday) || t("unknow") }}
					</div>
				</div>
				<div class="box-shadow"></div>
				<div class="userInfo-item">
					<div class="item-left">{{ t("mobile") }}</div>
					<div class="item-right">
						{{ (userInfo && userInfo.mobile) || t("unknow") }}
					</div>
				</div>
				<div class="box-shadow"></div>
				<div class="userInfo-item">
					<div class="item-left">{{ t("email") }}</div>
					<div class="item-right">
						{{ (userInfo && userInfo.email) || t("unknow") }}
					</div>
				</div>
				<div class="userInfo-item">
					<div class="item-left">{{ t("sign") }}</div>
					<div class="item-right">
						{{ (userInfo && userInfo.sign) || t("unknow") }}
					</div>
				</div>
			</div>
			<div class="userInfo-item-wrapper">
				<div class="userInfo-item">
					<div class="item-left">{{ t("addBlacklist") }}</div>
					<switch :checked="isInBlacklist" @change="handleSwitchChange" />
				</div>
			</div>
			<div class="button" @click="gotoChat">{{ t("chatWithFriendText") }}</div>
			<div class="box-shadow"></div>
			<div class="button button-red" @click="deleteFriend">
				{{ t("deleteFriendText") }}
			</div>
		</template>
	</div>
</template>

<script lang="ts" setup>
import { onLoad } from "@dcloudio/uni-app";
import UserCard from "../../../components/UserCard.vue";
import { onUnmounted, ref } from "../../../utils/transformVue";
import { t } from "../../../utils/i18n";
import NavBar from "../../../components/NavBar.vue";
import { autorun } from "mobx";
import { customRedirectTo, customNavigateTo } from "../../../utils/customNavigate";
import { deepClone } from "../../../utils";
import type { Relation } from "@xkit-yx/im-store-v2";
import { V2NIMUser } from "nim-web-sdk-ng/dist/v2/NIM_UNIAPP_SDK/V2NIMUserService";
import { V2NIMConst } from "nim-web-sdk-ng/dist/v2/NIM_UNIAPP_SDK";
import Icon from "../../../components/Icon.vue";
import G from "../../../../../utils/ajax.js";

const userInfo = ref<V2NIMUser>();
const tel = ref();
const relation = ref<Relation>("stranger");
const isInBlacklist = ref(false);

let account = "";

const handleAliasClick = () => {
	customNavigateTo({
		url: `/pages/Friend/friend-info-edit?id=${account}`,
	});
};
let uninstallFriendWatch = () => {};
let uninstallRelationWatch = () => {};

onLoad((props) => {
	account = props ? props.account : "";
	uni.$UIKitStore.userStore.getUserForceActive(account);
	uninstallFriendWatch = autorun(() => {
		userInfo.value = deepClone(uni.$UIKitStore.uiStore.getFriendWithUserNameCard(account));
	});

	uninstallRelationWatch = autorun(() => {
		const { relation: _relation, isInBlacklist: _isInBlacklist } = uni.$UIKitStore.uiStore.getRelation(account);
		relation.value = _relation;
		isInBlacklist.value = _isInBlacklist;
	});
	console.log("userInfo.valueuserInfo.valueuserInfo.valueuserInfo.value", userInfo.value);
	console.log(G, "123131231231232");
	G.Post("/wyyx/user/findUser", { accid: userInfo.value.accountId }, (res) => {
		console.log("resresresresresres", res);
		tel.value = res.data.tel;
	});
});
function takeTel() {
	uni.makePhoneCall({
		phoneNumber: tel,
	});
}
const handleSwitchChange = async (e: any) => {
	const isAdd = e.detail.value;
	try {
		if (isAdd) {
			await uni.$UIKitStore.relationStore.addUserToBlockListActive(account);
		} else {
			await uni.$UIKitStore.relationStore.removeUserFromBlockListActive(account);
		}
	} catch (error) {
		uni.showToast({
			title: isAdd ? t("setBlackFailText") : t("removeBlackFailText"),
			icon: "error",
		});
	}
};

const deleteFriend = () => {
	uni.showModal({
		title: t("deleteFriendText"),
		content: t("deleteFriendConfirmText") + "“" + uni.$UIKitStore.uiStore.getAppellation({ account }) + "”?",
		success: (res) => {
			if (res.confirm) {
				uni.$UIKitStore.friendStore
					.deleteFriendActive(account)
					.then(() => {
						uni.showToast({
							title: t("deleteFriendSuccessText"),
							icon: "success",
						});
					})
					.then(() => {
						const conversationId = uni.$UIKitNIM.V2NIMConversationIdUtil.p2pConversationId(account);
						return uni.$UIKitStore.conversationStore.deleteConversationActive(conversationId);
					})
					.catch(() => {
						uni.showToast({
							title: t("deleteFriendFailText"),
							icon: "error",
						});
					});
			} else if (res.cancel) {
				console.log("用户点击取消");
			}
		},
	});
};

const addFriend = async () => {
	try {
		await uni.$UIKitStore.friendStore.addFriendActive(account, {
			addMode: V2NIMConst.V2NIMFriendAddMode.V2NIM_FRIEND_MODE_TYPE_APPLY,
			postscript: "",
		});

		// 发送申请成功后解除黑名单
		await uni.$UIKitStore.relationStore.removeUserFromBlockListActive(account);
		uni.showToast({
			title: t("applyFriendSuccessText"),
			icon: "success",
		});
	} catch (error) {
		uni.showToast({
			title: t("applyFriendFailText"),
			icon: "error",
		});
	}
};

const gotoChat = async () => {
	const conversationId = uni.$UIKitNIM.V2NIMConversationIdUtil.p2pConversationId(userInfo.value?.accountId || "");
	await uni.$UIKitStore.uiStore.selectConversation(conversationId);
	customRedirectTo({
		url: "/pages/Chat/index",
	});
};

onUnmounted(() => {
	uninstallFriendWatch();
	uninstallRelationWatch();
});
</script>

<style lang="scss" scoped>
.bg_page {
	background-color: #ededed;
	min-height: 100vh;
}
page {
	padding-top: var(--status-bar-height);
	height: 100vh;
	overflow: hidden;
}

.wrapper {
	// background-color: rgb(245, 246, 247);
	height: 100vh;
	box-sizing: border-box;
	padding-bottom: 50px;

	.userInfo-item-wrapper {
		background-color: #fff;
		margin: 10px 0;

		.userInfo-item {
			display: flex;
			height: 50px;
			align-items: center;
			justify-content: space-between;
			padding: 0 16px;

			.item-left {
				font-size: 16px;
			}

			.item-right {
				font-size: 15px;
				width: 200px;
				text-align: right;
				color: #a6adb6;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}

	.button {
		// margin-top: 150px;
		display: block;
		width: 100%;
		background-color: #fff;
		color: #1890ff;
		text-align: center;
		height: 50px;
		font-size: 16px;
		line-height: 50px;
	}

	.button-red {
		color: #e6605c;
	}

	.box-shadow {
		height: 1px;
		background: none;
		padding: 0 25px;
		box-shadow: 0 0.5px 0 rgb(247, 244, 244);
	}
}
</style>
