<template>
	<view class="binding">
		<view class="binding-item" v-for="(item, index) in bangdingList" :key="index">
			<view class="title">{{ item.title }}</view>
			<view class="btn unbundling-btn" @click="unbinding(item.type)" v-if="userInfo[item.name]">
				<image src="/static/image/mine/44.png"></image>
				<text>解绑</text>
			</view>
			<view class="btn bundling-btn" @click="binding(item.provider, item.type)" v-else>
				<image src="/static/image/mine/43.png"></image>
				<text>绑定</text>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			userInfo: '',
			bangdingList: [
				{
					title: 'QQ',
					provider: 'qq', // uni 登录 provider
					type: 'qq', // 后台需要解绑的参数名 type
					name: 'member_qqopenid', // 后台返回是否绑定的字段名
				},
				{
					title: '微信',
					provider: 'weixin',
					type: 'wechat',
					name: 'member_wxopenid',
				}
			]
		}
	},
	onLoad() {
		this.getMemberInfo();
	},
	methods: {
		getMemberInfo() {
			this.$u.api.getMemberInfo().then(res => {
				if (res.errCode == 0) {
					this.userInfo = res.data.MemberArray;
				}
			})
		},
		binding(provider, type) {
			uni.login({
				provider: provider,
				success: (loginRes) => {
					console.log(loginRes);
					uni.getUserInfo({
						provider: provider,
						success: (res) => {
							console.log(res.userInfo.openId);
							this.$u.api.bindingThird({
								openid: res.userInfo.openId,
								type: type
							}).then(res => {
								this.$u.toast(res.message);
								if(res.errCode == 0) {
									this.getMemberInfo();
								}
							})
						}
					})
				},
				fail: (e) => {
					console.log(e);
				}
			});
		},
		unbinding(type) {
			this.$u.api.unbindingThird({ type: type }).then(res => {
				this.$u.toast(res.message);
				if(res.errCode == 0) {
					this.getMemberInfo();
				}
			})
		}
	}
};
</script>
<style lang="scss" scoped>
.binding {
	min-height: calc(100vh - var(--window-top));
	background-color: #ECECEC;
	padding-top: 1rpx;
	.binding-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 35rpx 30rpx;
		height: 98rpx;
		background-color: #FFFFFF;
		&:not(:last-child) {
			margin-bottom: 2rpx;
		}
		.title {
			font-size: 30rpx;
			color: rgba(52,52,52,1);
		}
		.btn {
			// width: 112rpx;
			height: 48rpx;
			border-radius: 10rpx;
			font-size: 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 12rpx 16rpx;
			> image {
				width: 26rpx;
				height: 26rpx;
				margin-right: 10rpx;
			}
		}
		.unbundling-btn {
			border: 1rpx solid rgba(102,102,102,1);
			color: rgba(102,102,102,1);
		}
		.bundling-btn {
			border: 1rpx solid rgba(255,120,16,1);
			color: #FF7810;
		}
	}
}
</style>