<template>
	<view>
		<view class="from-box amount">
			<view class="">开票状态</view>
			<view class="price">
				<!-- <view class="invoice-state">开票成功</view> -->
				<view :class="{'invoice-state':true, 'content-state-orange':progressVal==0,'content-state-blue':progressVal==2,'content-state-red':progressVal==1,'content-state-green':progressVal==3}">
					{{['未审核','审核失败','审核成功','重开待审核'][progressVal==null?'':progressVal]}}
				</view>
			</view>
		</view>
		<view class="from-box">
			<u--form labelPosition="left">
				<view class="line line-icon ">
					<u-form-item label="发票抬头" prop="userInfo.invoiceHeader" borderBottom ref="item1"
						@click="goinvoiceTitle">
						<u--input disabled v-model="model1.userInfo.invoiceHeader" border="none" inputAlign='right'
							placeholder=""></u--input>
					</u-form-item>
				</view>
				<view v-if="checked==1">
				<view class="line">
					<u-form-item label="税号" prop="userInfo.taxId" borderBottom ref="item1">
						<u--input disabled v-model="model1.userInfo.taxId" border="none" inputAlign='right'
							placeholder=""></u--input>
					</u-form-item>
				</view>
				<view class="line">
					<u-form-item label="注册地址" prop="userInfo.address" borderBottom ref="item1">
						<u--input disabled v-model="model1.userInfo.address" border="none" inputAlign='right'
							placeholder=""></u--input>
					</u-form-item>
				</view>
				<view class="line">
					<u-form-item label="公司开户行" prop="userInfo.bank" borderBottom ref="item1">
						<u--input disabled v-model="model1.userInfo.bank" border="none" inputAlign='right' placeholder="">
						</u--input>
					</u-form-item>
				</view>
				<view class="line">
					<u-form-item label="开户行账户" prop="userInfo.cardNo" borderBottom ref="item1">
						<u--input disabled v-model="model1.userInfo.cardNo" border="none" inputAlign='right'
							placeholder=""></u--input>
					</u-form-item>
				</view>
				</view>
				<view class="line ">
					<u-form-item label="发票金额" prop="userInfo.money" borderBottom ref="item1">
						<u--input disabled v-model="model1.userInfo.money" border="none" inputAlign='right' placeholder=""
							color="#4C91FF"></u--input>
					</u-form-item>
				</view>
				<view class="">
					<u-form-item label="申请时间" prop="userInfo.time" borderBottom ref="item1">
						<u--input disabled v-model="model1.userInfo.time" border="none" inputAlign='right'
							placeholder=""></u--input>
					</u-form-item>
				</view>
			</u--form>
		</view>
		<!-- 邮寄信息 -->
		<view class="content-title">
			<view class="content-name">
				<view class="orders-line"></view>
				<view>邮寄信息</view>
			</view>
		</view>
		<view class="from-box">
			<u--form labelPosition="left">
				<view class="line-last">
					<u-form-item label="邮寄地址" prop="userInfo.address" borderBottom ref="item1">
						<u--input disabled v-model="model2.userInfo2.address" border="none" inputAlign='right'
							placeholder=""></u--input>
					</u-form-item>
				</view>
				<view class="line-last">
					<u-form-item label="邮寄联系人" prop="userInfo.contacts" borderBottom ref="item1">
						<u--input disabled v-model="model2.userInfo2.contacts" border="none" inputAlign='right'
							placeholder=""></u--input>
					</u-form-item>
				</view>
				<view class="line-last">
					<u-form-item label="联系人电话" prop="userInfo.phone" borderBottom ref="item1">
						<u--input disabled v-model="model2.userInfo2.phone" border="none" inputAlign='right'
							placeholder=""></u--input>
					</u-form-item>
				</view>

			</u--form>
		</view>
		<view class="from-box amount">
			<view class="">电子邮箱</view>
			<view class="">
				<u--input disabled v-model="model2.userInfo2.email" border="none" inputAlign='right'></u--input>
			</view>
		</view>
		<!-- position bottom -->
		<view class="footer-box">
			<view class="check">
				<u-button color="#4C91FF" :plain="true" shape='circle' @click="goBillingOrder">查看开票订单</u-button>
			</view>
			<!-- <view>
				<u-button color="#4C91FF" shape='circle' @click="www">重开发票</u-button>
			</view> -->
		</view>
	</view>
</template>

<script setup>
	import config from '@/common/config/config.js';
	import {
		reactive,
		ref,
	} from "vue";
	import {
		onLoad,
		onShow,
		onReachBottom
	} from "@dcloudio/uni-app";
	// 
	const model1 = reactive({
		userInfo: {
			invoiceHeader: '',
			taxId: '',
			address: '',
			bank: '',
			cardNo: '',
		}
	})
	const model2 = reactive({
		userInfo2: {
			address: '',
			phone: '',
			contacts: '',
			email: '',
		}
	})
	const progressVal=ref()
	const inId=ref()
	const checked=ref()
	// 
	onLoad((option) => {
		let detail = JSON.parse(option.detail)
		inId.value=detail.id
		progressVal.value=detail.progress
		model1.userInfo.invoiceHeader = detail.invoiceHeader
		model1.userInfo.taxId = detail.taxId
		model1.userInfo.address = detail.address
		model1.userInfo.bank = detail.bank
		model1.userInfo.cardNo = detail.cardNo
		model1.userInfo.money = detail.invoiceAmount + '元'
		model1.userInfo.time = detail.createTime
		model2.userInfo2.address = detail.shippingAddress
		model2.userInfo2.phone = detail.contactPhone
		model2.userInfo2.contacts = detail.recipient
		model2.userInfo2.email = detail.email
		checked.value=detail.type
		console.log(option, 'option', detail);
	})
	// 
	const goBillingOrder = () => {
		uni.navigateTo({
			url: '../billingOrder/billingOrder?id='+inId.value
		})
	}
</script>

<style lang="less" scoped>
	.from-box {
		background: #fff;
		margin-top: 16rpx;
		padding: 0 32rpx;
	}

	.price {
		color: #4C91FF;
		font-size: 28rpx;
		font-weight: 400;
		text-align: right;
	}

	.line {
		border-bottom: 1px solid #eee;
	}

	/deep/.u-form-item__body {
		padding: 24rpx 0 !important;
	}

	/deep/.u-form-item__body__left {
		width: 250rpx !important;
	}

	/deep/.u-form-item__body__left__content__label {
		color: #585858 !important;
		font-size: 28rpx !important;
		font-weight: 400 !important;
		text-align: left !important;
	}

	/deep/.u-form-item__body__right {
		// width: 50% !important;
	}

	/deep/.u-line:last-child {
		border: 0 !important;
	}

	.amount {
		display: flex;
		padding: 24rpx 32rpx;
		justify-content: space-between;
		align-items: center;
		color: #585858;
		font-size: 28rpx;
		font-weight: 400;
		text-align: left;
	}

	/deep/.u-input__content__field-wrapper__field {
		height: 40rpx !important;
		line-height: 40rpx !important;
	}

	.content-title {
		display: flex;
		justify-content: space-between;
		margin: 16rpx 32rpx;
	}

	.content-name {
		font-size: 32rpx;
		font-weight: 400;
		text-align: left;
		color: #171717;
		display: flex;
		align-items: center;
	}

	.orders-line {
		width: 4rpx;
		height: 28rpx;
		margin-right: 8rpx;
		border-left: 4rpx solid #4C91FF;
		border-radius: 4rpx;
	}

	.footer-box {
		width: 100%;
		position: fixed;
		bottom: 0;
		padding: 16rpx 32rpx;
		background-color: #fff;
		border-top: 1px solid #eee;
		// display: flex;

		/deep/.u-button {
			// width: 331rpx !important;
			height: 72rpx !important;
		}
	}

	/deep/.u-input--square {
		background-color: #fff !important;
	}

	.line-icon {
		/deep/.u-icon__icon {
			color: #808080 !important;
			margin-left: 8rpx;
		}
	}
.line-last {
		border-bottom: 1px solid #eee;
	}
	.line-last:last-child {
		border: 0;
	}

	.invoice-state {
		border: 1px solid #4C91FF;
		font-size: 20rpx;
		font-weight: 400;
		color: #4C91FF;
		padding: 8rpx 16rpx;
		border-radius: 8rpx;
	}

	.check {
		margin-right: 24rpx;
	}
	.content-state-orange {
			border: 1px solid #FF7B0E;
			color: #FF7B0E;
		}
		.content-state-blue {
			border: 1px solid #4C91FF;
			color: #4C91FF;
		}
		.content-state-red {
			border: 1px solid #F2634F;
			color: #F2634F;
		}
		.content-state-green {
			border: 1px solid #26C3C0;
			color: #26C3C0;
		}
</style>
<style lang="less">
	page {
		background-color: #F2F6F7;
		padding-bottom: 120rpx;
	}
</style>