<template>
	<view class="container">
		<view v-if="isBind" class="card flex-col-g20">
			<view class="flex-row-g20">
				<label for="">手机号:</label>
				<up-input placeholder="请输入绑定的手机号" border="surround" v-model="bind.mobile" />
			</view>

			<view class="flex-row-g20">
				<label for="">验证码:</label>
				<up-input placeholder="验证码" v-model="bind.code">
					<template #suffix>
						<up-button @tap="getCode" text="获取验证码" type="success"></up-button>
					</template>
				</up-input>
			</view>

			<view class="btn">
				<up-button type="primary" @tap="bindPhone">绑定手机号</up-button>
			</view>
		</view>

		<view class="card" v-else>
			<up-cell-group>
				<up-cell title="绑定手机号" :value="bindInfo.phone"></up-cell>
				<up-cell title="绑定时间" :value="bindInfo.bindTime"></up-cell>
				<up-cell title="ICCID" :value="bindInfo.iccid"></up-cell>
				<up-cell title="状态" :value="bindInfo.status"></up-cell>
			</up-cell-group>

			<view class="btn mt-30 flex-col-g20">
				<up-button type="primary" @tap="changeBind">更换绑定</up-button>
				<up-button type="success" @tap="logout">退出</up-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		reactive
	} from 'vue'

	import {
		userStore
	} from '@/store/index.js';

	let isBind = ref(false)

	let bind = reactive({
		mobile: "",
		code: ""
	})

	let bindInfo = reactive({
		phone: "",
		iccid: "",
		bindTime: "",
		status: 0
	})

	const changeBind = () => {
		isBind.value = true
	}

	// 获取绑定信息
	const getBindInfo = async () => {
		const result = await userStore.actions.getDeviceBindPhone()
		if (result.myBindRecord.bindPhone) {
			isBind.value = false
			bindInfo.phone = result.myBindRecord.bindPhone
			bindInfo.iccid = result.myBindRecord.iccidMark
			bindInfo.bindTime = result.myBindRecord.createDateStr
			bindInfo.status = result.myBindRecord.status === 1 ? "已绑定" : "未绑定"
		} else {
			isBind.value = true
		}
	}

	// 获取验证码
	const getCode = async () => {
		if (!bind.mobile) {
			uni.showToast({
				title: "请输入手机号",
				icon: "none"
			})
			return
		}
		const data = await userStore.actions.getSmsNumber(bind.mobile)
		if (data.isSuccess && data?.errorMsg) {
			uni.showToast({
				title: data.errorMsg,
				icon: "none"
			})
		} else {
			uni.showToast({
				title: "验证码已发送",
				icon: "none"
			})
		}
	}
	// 绑定手机号
	const bindPhone = async () => {
		if (!bind.mobile && !bind.code) {
			uni.showToast({
				title: "手机号和验证码都不能为空",
				icon: "none"
			})
			return
		}
		const data = await userStore.actions.bindCardPhone(bind.mobile, bind.code)
		if (data.isSuccess && data?.errorMsg) {
			uni.showToast({
				title: data.errorMsg,
				icon: "none"
			})
			return
		} else {
			uni.showToast({
				title: "绑定成功",
				icon: "none"
			})
		}

		setTimeout(() => {
			isBind.value = false
			getBindInfo()
		})
	}
	// 退出
	const logout = async() => {
		await userStore.actions.logout()
		uni.navigateTo({
			url: "/pages/login/login"
		})
	}


	onMounted(() => {
		getBindInfo()
	})
</script>

<style>

</style>