<template>
	<el-layout>
		<el-navbar :placeholder="true" :fixed="true" :autoBack="true" :border="true" title="编辑发票"></el-navbar>
		
		<form @submit="formSubmit">
			<view class="wrapper">
				
				<view class="content">
					
					<view class="form-item">
						<view class="form-item-body form-item-border">
							<view class="form-item-icon">
								<text style="padding-right: 10rpx;">抬头类型</text>
							</view>
							<view class="form-item-input">
								<view style="font-size: 28rpx;"><radio @click="onEventRadio(1)" name="header_type" value="1" :checked="currentRadio === 1" style="transform:scale(0.7)" />个人</view>
								<view style="font-size: 28rpx;"><radio @click="onEventRadio(2)" name="header_type" value="2" :checked="currentRadio === 2" style="transform:scale(0.7)" />企业</view>
							</view>
						</view>
					</view>
					
					<view class="form-item">
						<view class="form-item-body form-item-border">
							<view class="form-item-icon">
								<text style="padding-right: 10rpx;">发票抬头</text>
							</view>
							<view class="form-item-input">
								<input type="text" name="name" :value="data.name" placeholder="请输入发票抬头" placeholder-class="form-item-placeholder" />
							</view>
						</view>
					</view>
					
					<view class="form-item" v-if="currentRadio == 2">
						<view class="form-item-body form-item-border">
							<view class="form-item-icon">
								<text style="padding-right: 10rpx;">企业税号</text>
							</view>
							<view class="form-item-input">
								<input type="text" name="duty_number" :value="data.duty_number" placeholder="请输入税号" placeholder-class="form-item-placeholder" />
							</view>
						</view>
					</view>
					
					<view class="form-item">
						<view class="form-item-body form-item-border">
							<view class="form-item-icon">
								<text style="padding-right: 10rpx;">手机号码</text>
							</view>
							<view class="form-item-input">
								<input type="text" name="drawer_phone" :value="data.drawer_phone" placeholder="请输入手机" placeholder-class="form-item-placeholder" />
							</view>
						</view>
					</view>
					
					<view class="form-item">
						<view class="form-item-body form-item-border">
							<view class="form-item-icon">
								<text style="padding-right: 10rpx;">接收邮箱</text>
							</view>
							<view class="form-item-input">
								<input type="text" name="email" :value="data.email" placeholder="请输入邮箱" placeholder-class="form-item-placeholder" />
							</view>
						</view>
					</view>
						
				</view>
				
				<view class="form-submit">
					<view>
						<button :class="{ 'active': isFormActive == true }" form-type="submit">确 定</button>
					</view>
				</view>
				
			</view>
		</form>
		
	</el-layout>
</template>

<script setup>
	import { onLoad } from "@dcloudio/uni-app";
	import { nextTick, ref } from "vue";
	import { isEmpty,isMobile,isEmail } from "@/el-ui/libs/check.js";
	import { redirectTo } from "@/el-ui/libs/navigate.js";
	
	let isFormActive = ref(false);
	let data   		 = ref({
		name: "",
		duty_number: "",
		drawer_phone: "",
		email: "",
		id: 0
	});
	
	const pages = getCurrentPages();
	const page  = pages.length >= 2 ? pages[pages.length - 2] : pages[pages.length - 1];
	onLoad((option)=>{
		uni.$http.get("ucenter.invoice/detail",{ id: option.id }).then(res=>{
			if(res.code && !isEmpty(res.data)){
				data.value = res.data;
				currentRadio.value = res.data.header_type;
			}
		})
	});
	
	const currentRadio = ref(1);
	const onEventRadio = (value)=>{
		currentRadio.value = value;
	}
	
	const formSubmit = (event)=>{
		let form = event.detail.value;
		if(isFormActive.value) return ;
		if(isEmpty(form.name)){
			uni.$layer.showToast("请填写发票抬头");
			return false;
		}else if(isEmpty(form.drawer_phone)){
			uni.$layer.showToast("请填写手机");
			return false;
		}else if(!isMobile(form.drawer_phone)){
			uni.$layer.showToast("您填写的手机号码不合法");
			return false;
		}else if(isEmpty(form.email)){
			uni.$layer.showToast("请填写邮箱");
			return false;
		}else if(!isEmail(form.email)){
			uni.$layer.showToast("您填写的邮箱不正确");
			return false;
		}
		
		if(currentRadio.value == 2 && isEmpty(form.duty_number)){
			uni.$layer.showToast("请填写税号");
			return false;
		}
		
		if(data.value.id > 0){
			form.id = data.value.id;
		}
		
		form.header_type = currentRadio.value;
		isFormActive.value = true;
		uni.$http.post("ucenter.invoice/editor",form).then(res=>{
			isFormActive.value = false;
			if(res.code){
				if(page.$page.fullPath.includes("cart/confirm")){
					redirectTo(page.$page.fullPath);
				}else{
					redirectTo("pages/ucenter/invoice/index");
				}
				uni.$layer.showToast(data.id > 0 ? "编辑成功" : "添加成功");
			}else{
				uni.$layer.showToast(res.msg);
			}
		});
	}
	
</script>

<style lang="scss">
	.wrapper {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.content {
			width: 93%;
			background-color: #fff;
			margin-top: 40rpx;
			border-radius: 10rpx;
			.form-item {
				width: 90%;
				margin: 0 auto;
				display: flex;
				flex-direction: column;
				.form-item-body{
					display: flex;
					flex-direction: row;
					padding: 35rpx 0;
					color: #555;
					box-sizing: border-box;
					position: relative;
					&.form-item-border::after {
						content: " ";
						position: absolute;
						left: 0;
						top: 0;
						pointer-events: none;
						box-sizing: border-box;
						transform-origin: 0 0;
						width: 199.8%;
						height: 199.7%;
						transform: scale(0.5, 0.5);
						border-bottom: 1px solid #e5e5e5;
						z-index: 2;
					}
					
					.form-item-icon {
						margin-right: 15rpx;
						display: inline-flex;
						flex-direction: row;
						align-items: center;
						font-size: 28rpx;
					}
					
					.form-item-placeholder {
						color: #9fa3ab;
						font-size: 30rpx;
					}
					
					.form-item-input {
						position: relative;
						flex: 1;
						display: flex;
						flex-direction: row;
						padding: 0px;
						border-color: rgb(220, 223, 230);
						width: 90%;
						input {
							color: #333;
							font-size: 30rpx;
							width: 100%;
						}
					}
				}
			}
		}
		.form-submit {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 40rpx;
			view {
				width: 93%;
				button {
					width: 100%;
					color: #ffffff;
					border-color: linear-gradient(90deg, var(--ui-bg-color-light), var(--ui-bg-color));
					background: linear-gradient(90deg, var(--ui-bg-color-light), var(--ui-bg-color));
					height: 40px;
					line-height: 40px;
					border-radius: 35rpx;
					font-size: 32rpx;
					&.active {
						background-color: #ccc;
						color: #fff;
						border-color: #ccc;
					}
				}
			}
		}
	}
</style>