<template>
	<view class="wechat-contact-page">
		<!-- 顶部导航栏 -->
		<uni-nav-bar
			left-icon="left"
			title="微信关联"
			@clickLeft="goBack"
			fixed
			color="#8B2316"
			height="180rpx"
			:border="false"
			backgroundColor="#eeeeee"
		></uni-nav-bar>

		<!-- 微信卡片 -->
		<view class="card" v-if="isBoundWechat">
			<view class="wx-left">
				<up-image :src="wxIcon" width="120rpx" height="120rpx" mode="aspectFill"></up-image>
			</view>
			<view class="wx-center">
				<view class="wx-title">微信</view>
				<view class="wx-sub">{{ nickname }}</view>
			</view>
			<view class="wx-right">
				<button class="bind-btn" @click="onUnBind">解绑</button>
			</view>
		</view>
		<view class="card" v-else>
			<view class="wx-left">
				<up-image :src="wxIcon" width="120rpx" height="120rpx" mode="aspectFill"></up-image>
			</view>
			<view class="wx-center">
				<view class="wx-title">微信</view>
				<view class="wx-sub">未绑定微信</view>
			</view>
			<view class="wx-right">
				<button class="bind-btn" @click="onBind">绑定</button>
			</view>
		</view>

		<!-- 操作说明 -->
		<view class="tips">
			<view class="tips-title">操作说明:</view>
			<view class="tips-line">1. 肝胆相照注册账号与微信绑定，肝胆相照相关直播、视频无忧随心看</view>
			<view class="tips-line">2. 仅需操作一次，后续通过微信观看直播、视频无需额外操作，立即进入</view>
			<view class="tips-line">
				若您有任何疑问或需要我们协助，请与您的小助手联系或直接微信联系
				<text class="highlight">igandan1000</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import {onShow} from "@dcloudio/uni-app";
import wxIcon from '@/static/wechat.png';
import my_api from '@/api/my_api.js'
const isBoundWechat = ref(false)
const unionid = ref('')
const openid = ref('')
const nickname = ref('')
const goBack = () => {
	uni.navigateBack();
};

const onBind = () => {
	uni.login({
		provider: 'weixin',
		success: function (loginRes) {
			// 登录成功
			uni.getUserInfo({
				provider: 'weixin',
				success: function(info) {
					// 获取用户信息成功, info.authResult保存用户信息
					console.log(info.userInfo)
					my_api.bindWechat({openid:info.userInfo.openId,unionid:info.userInfo.unionId,nickname:info.userInfo.nickName}).then(res=>{
						console.log("111: ",res)
						if (res.code === 200 || res.code === '200') {
							uni.showToast({
								title: '绑定成功',
								icon: 'success'
							})
							isBoundWechat.value = true
							unionid.value = info.userInfo.unionId
							openid.value = info.userInfo.openId
							nickname.value = info.userInfo.nickName
						}else{
							uni.showToast({
								title: res.msg || '绑定失败',
								icon: 'none'
							})
						}
					}).catch(err=>{
						console.log(err)
						uni.showToast({
							title: '绑定失败',
							icon: 'none'
						})
					})
				}
			})
		},
		fail: function (err) {
			// 登录授权失败
			// err.code是错误码
			console.log(err)
		}
	});
}

const getIsBoundWechat = async () => {
	const res = await my_api.isBoundWechat()
	console.log(res)
	if (res.code === 200 || res.code === '200') {
		isBoundWechat.value = res.isBound == 1
		unionid.value = res.unionid
		openid.value = res.openid
		nickname.value = res.nickname
	}
}

const onUnBind = async () => {

	uni.showModal({
		title: '解绑微信',
		content: '确定要解绑微信吗？',
		success: (res) => {
			if (res.confirm) {
				my_api.unBindWechat({"unionid":unionid.value}).then(res=>{
					console.log(res)
					if (res.code === 200 || res.code === '200') {
						uni.showToast({
							title: '解绑成功',
							icon: 'success'
						})
						isBoundWechat.value = false
					}
					else{
						uni.showToast({
							title: res.msg || '解绑失败',
							icon: 'none'
						})
					}
					getIsBoundWechat()
				})
			}
		}
	});
}


onShow(() => {
	getIsBoundWechat()
})
</script>

<style lang="scss" scoped>
.wechat-contact-page {
	min-height: 100vh;
	background: #f7f7f7;

}

.card {
	display: flex;
	align-items: center;
	background: #ffffff;
	
	padding: 30rpx;
	border-bottom: 2rpx solid #f0f0f0;
	.wx-left { margin-right: 24rpx; }
	.wx-center {
		flex: 1;
		.wx-title { font-size: 34rpx; color: #222222; }
		.wx-sub { margin-top: 10rpx; font-size: 26rpx; color: #9e9e9e; }
	}
	.wx-right {
		.bind-btn {
			min-width: 140rpx;
			height: 64rpx;
			background: #2ecc71;
			color: #ffffff;
			border: none;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 12rpx;
			font-size: 28rpx;
			padding: 0 24rpx;
		}
	}
}

.tips {
	padding: 30rpx;
	background: #f7f7f7;
	.tips-title { font-size: 30rpx; color: #222222; margin-bottom: 16rpx; }
	.tips-line { font-size: 28rpx; color: #666666; line-height: 1.8; margin-bottom: 10rpx; }
	.highlight { color: #e53935; }
}
</style>
