<template>
	<view class="w-screen h-screen flex flex-col" :style="themeColor()">
		<!-- #ifdef MP-WEIXIN -->
		<view :style="{'height':headerHeight}">
			<top-tabbar :data="param" :scrollBool="topTabarObj.getScrollBool()" class="top-header" />
		</view>
		<!-- #endif -->
		<view class="mx-[60rpx]">
			<view class="pt-[140rpx] text-[50rpx] text-[#333]">{{t('bindAdminAccount')}}</view>
			<view class="text-[26rpx] leading-[39rpx] text-[var(--text-color-light6)] mt-[16rpx] mb-[80rpx]">
				{{t('bindAdminTip')}}</view>
			<u-form labelPosition="left" :model="formData" errorType='toast' :rules="rules" ref="formRef">
				<view
					class="h-[90rpx] flex w-full items-center px-[30rpx] rounded-[var(--goods-rounded-mid)] box-border bg-[#F6F6F6]">
					<u-form-item label="" prop="username" :border-bottom="false">
						<u-input v-model="formData.username" border="none" :placeholder="t('usernamePlaceholder')"
							class="!bg-transparent" fontSize="26rpx"
							placeholderClass="!text-[var(--text-color-light9)] text-[26rpx]" />
					</u-form-item>
				</view>
				<view
					class="h-[90rpx] flex w-full items-center px-[30rpx] rounded-[var(--goods-rounded-mid)] box-border bg-[#F6F6F6] mt-[40rpx]">
					<u-form-item label="" prop="password" :border-bottom="false">
						<u-input v-model="formData.password" type="password" border="none"
							:placeholder="t('passwordPlaceholder')" class="!bg-transparent" fontSize="26rpx"
							placeholderClass="!text-[var(--text-color-light9)]">

						</u-input>
					</u-form-item>
				</view>
			</u-form>
			<view class="mt-[100rpx]">
				<button
					class="w-full h-[80rpx] !bg-[var(--primary-color)] text-[26rpx] rounded-[40rpx] leading-[80rpx] font-500 !text-[#fff]"
					@click="handleBind">{{t('bind')}}</button>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive, computed, nextTick } from 'vue'
	import { t } from '@/locale'
	import { bindAdminAccout } from '@/addon/erp/api/member'
	import useMemberStore from '@/stores/member'
	import useConfigStore from '@/stores/config'
	import { useLogin } from '@/hooks/useLogin'
	import { redirect, pxToRpx } from '@/utils/common'
	import { onLoad } from '@dcloudio/uni-app'
	import { topTabar } from '@/utils/topTabbar'

	let menuButtonInfo : any = {};
	// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
	// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
	menuButtonInfo = uni.getMenuButtonBoundingClientRect();
	// #endif
	/********* 自定义头部 - start ***********/
	const topTabarObj = topTabar()
	let param = topTabarObj.setTopTabbarParam({ title: '', topStatusBar: { bgColor: '#fff', textColor: '#333' } })
	/********* 自定义头部 - end ***********/
	const headerHeight = computed(() => {
		return Object.keys(menuButtonInfo).length ? pxToRpx(Number(menuButtonInfo.height)) + pxToRpx(menuButtonInfo.top) + pxToRpx(8) + 'rpx' : 'auto'
	})

	const memberStore = useMemberStore()
	const info = computed(() => memberStore.info)

	const config = computed(() => {
		return useConfigStore().login
	})

	const loading = ref(false)
	const isAgree = ref(false)

	const formData : any = reactive({
		username: '',
		password: '',
	})


	const wxPrivacyPopupRef : any = ref(null)

	onLoad(() => {
		// #ifdef MP
		nextTick(() => {
			if (wxPrivacyPopupRef.value) wxPrivacyPopupRef.value.proactive();
		})
		// #endif

		uni.getStorageSync('openid') && (Object.assign(formData, { openid: uni.getStorageSync('openid') }))
		uni.getStorageSync('pid') && (Object.assign(formData, { pid: uni.getStorageSync('pid') }))
		uni.getStorageSync('unionid') && (Object.assign(formData, { unionid: uni.getStorageSync('unionid') }))
	});

	const rules = {
		'username': [
			{
				type: 'string',
				required: true,
				message: t('usernamePlaceholder'),
				trigger: ['blur', 'change'],
			}
		],
		'password': {
			type: 'string',
			required: true,
			message: t('passwordPlaceholder'),
			trigger: ['blur', 'change']
		}
	}


	const formRef : any = ref(null)

	const handleBind = () => {
		formRef.value.validate().then(() => {
			if (loading.value) return
			loading.value = true

			bindAdminAccout(formData).then((res : any) => {
				if (info.value) {
					memberStore.getMemberInfo()
					memberStore.getUserBtnRole()
					redirect({ url: '/addon/erp/pages/member/index', mode: 'redirectTo' })
				} else {
					memberStore.setToken(res.data.token)
					useLogin().handleLoginBack()
				}
			}).catch(() => {
				loading.value = false
			})
		})
	}
</script>

<style lang="scss" scoped>
	:deep(.u-input) {
		background-color: transparent !important;
	}

	:deep(.u-form-item) {
		flex: 1;

		.u-line {
			display: none;
		}
	}
</style>