<template>
	<view v-if="featureEnabled" class="wx-bind-entry" @click="handleTap">
		<view class="wx-bind-left">
			<u-icon name="weixin-fill" color="#07C160" size="36"></u-icon>
			<text class="wx-bind-label">{{ bound ? '已绑定微信' : '绑定微信' }}</text>
		</view>
		<view class="wx-bind-right">
			<text v-if="bound && openidMasked" class="wx-bind-mask">{{ openidMasked }}</text>
			<u-icon name="arrow-right" color="#C9CDD4" size="28"></u-icon>
		</view>
	</view>
</template>

<script>
import { getDoctorWxAuthConfig, getDoctorWxBindStatus } from '@/api/doctorAuth.js';
import { getCurrentLoginContext } from '@/utils/loginSession.js';
import { ensureDoctorWxBound } from '@/common/js/wx-bind-helper.js';

export default {
	name: 'WxBindEntry',
	data() {
		return {
			featureEnabled: false,
			bound: false,
			openidMasked: '',
			loading: false,
		};
	},
	mounted() {
		uni.$on('login-account-switched', this.refresh);
	},
	beforeDestroy() {
		uni.$off('login-account-switched', this.refresh);
	},
	methods: {
		refresh() {
			this.bound = false;
			this.openidMasked = '';
			const ctx = getCurrentLoginContext();
			if (!ctx.phone || !ctx.account_id) {
				this.featureEnabled = false;
				return Promise.resolve();
			}
			return getDoctorWxAuthConfig()
				.then((res) => {
					const result = (res && res.code === 0 && res.result) ? res.result : {};
					if (!result.wx_login_btn) {
						this.featureEnabled = false;
						return;
					}
					this.featureEnabled = true;
					return getDoctorWxBindStatus({
						phone: ctx.phone,
						account_type: ctx.account_type,
						account_id: ctx.account_id,
					})
						.then(({ data, ok }) => {
							if (ok && data) {
								this.bound = !!data.bound;
								this.openidMasked = data.openid_masked || '';
							} else {
								this.bound = false;
								this.openidMasked = '';
							}
						});
				})
				.catch(() => {
					this.bound = false;
					this.openidMasked = '';
				});
		},
		handleTap() {
			if (this.bound || this.loading) {
				return;
			}
			// #ifdef MP-WEIXIN
			this.loading = true;
			uni.showLoading({ title: '绑定中...', mask: true });
			ensureDoctorWxBound({ showLoading: false })
				.then(() => this.refresh())
				.then(() => {
					this.$toast && this.$toast('绑定成功');
				})
				.catch((err) => {
					this.$toast && this.$toast((err && err.msg) || '绑定失败');
				})
				.finally(() => {
					uni.hideLoading();
					this.loading = false;
				});
			// #endif
			// #ifndef MP-WEIXIN
			this.$toast && this.$toast('请在微信小程序中使用');
			// #endif
		},
	},
};
</script>

<style lang="scss" scoped>
.wx-bind-entry {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding: 32rpx 0;
	border-bottom: 1rpx solid #f0f1f3;
}

.wx-bind-left {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.wx-bind-label {
	margin-left: 16rpx;
	font-size: 28rpx;
	color: #31353d;
}

.wx-bind-right {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.wx-bind-mask {
	font-size: 24rpx;
	color: #6c7380;
	margin-right: 8rpx;
}
</style>
