<template>
	<view>
		<!--  发票开具 -->
		<view v-if="isEdit">
			<view>
				<view class="billItem" v-for="b in list" :key="b.id">
					<view class="name">
						{{ b.name }}
					</view>

					<view class="pp">
						<label v-if="b.orderType==0" class="blueTag"> 培训订单</label>
						<label v-if="b.orderType==1" class="purpleTag"> 住宿订单</label>
						<label v-if="b.orderType==2" class="orangeTag">餐饮订单</label>
					订单编号：{{ b.id }}
					</view>
					<view class="pp" v-if="b.orderType==1">地点：{{b.address}}次</view>
					<view class="pp" v-if="b.orderType==1">房间号：{{b.roomNum||'--'}}</view>
					<view class="pp" v-if="b.orderType==0">培训时间：{{b.trainStart?.substring(0, 10)}} —
						{{b.trainEnd?.substring(0, 10)}}
					</view>

					<view class="pp" v-if="b.orderType==2">就餐次数：{{b.repastNum}}次</view>

					<view class="poPrice">¥{{b.total}}</view>
				</view>

			</view>
		</view>
		<view class="whiteItem">
			<uni-forms>
				<uni-forms-item label="开票金额">
					<text class="bigprice">¥{{totalMoney}}</text>
				</uni-forms-item>
				<uni-forms-item label="是否开具水单" required>
					<uni-data-checkbox v-model="form.isReceipt" :localdata="typeSD" />
				</uni-forms-item>

				<uni-forms-item label="发票类型" required>
					<uni-data-checkbox v-model="form.invoiceType" :localdata="type2" />
				</uni-forms-item>
				<uni-forms-item label="发票抬头" required>
					<lin-select v-if="form.invoiceType==1" :list="companyList" :loading="companyloading" loading-text="数据加载中" value-key="bilName" max-height="180" 
					placeholder="请输入公司名称" @input="getComanyInfo" v-model="form.invoiceTitle"/>
					<uni-easyinput type="text" v-else v-model="form.invoiceTitle"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item label="税号" required v-if="form.invoiceType=='0'">
					<uni-easyinput type="text" v-model="form.invoiceTfn"></uni-easyinput>
				</uni-forms-item>
				<view>
					<uni-forms-item label="地址">
						<uni-easyinput type="text" v-model="form.invoiceAddress"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item label="电话">
						<uni-easyinput type="text" v-model="form.invoicePhone"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item label="开户行">
						<uni-easyinput type="text" v-model="form.invoiceBank"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item label="账户">
						<uni-easyinput type="text" v-model="form.invoiceAccount"></uni-easyinput>
					</uni-forms-item>
				</view>
				
			</uni-forms>
		</view>

		<view v-if="remarks" class="remarksbox">
			<view class="h3"> 发票开具说明</view>
			{{remarks}}
		</view>
	</view>

	<view>
		<button style="width: 80%;margin: auto;" class="btn btn1" @click="submit"> 提交 </button>
	</view>
</template>

<script setup>
	import {
		reactive,
		toRefs,
		getCurrentInstance
	} from 'vue';
	import _ from 'lodash'

	import * as hotel from '@/common/hotel.js';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	const app = getApp();
	const data = reactive({
		id: null,
		isEdit: false,
		form: {
			invoiceType: '0',
			isReceipt:'0'
		},
		detail: {},
		type: [{
			value: '1',
			text: ' 电子发票'
		}, {
			value: '2',
			text: '纸质普票'
		}, {
			value: '3',
			text: '纸质专票'
		}],
		typeSD: [{
			value: '0',
			text: ' 否'
		}, {
			value: '1',
			text: '是'
		}],
		type2: [{
			value: '0',
			text: ' 企业'
		}, {
			value: '1',
			text: '个人非企业'
		}],
		totalMoney: 0,
		list: [],
		invoiceMsg: {},
		remarks: '',
		regionsList: [],
		regionArr: [],
		email: '',
		companyloading:false,
		companyList:[]
	})
	const {
		id,
		form,
		detail,
		type,
		type2,typeSD,
		totalMoney,
		list,
		isEdit,
		invoiceMsg,
		remarks,
		regionsList,
		regionArr,
		companyList,companyloading,
		email
	} = toRefs(data);
	let orders
	let trainId
	let invoiceId
	onLoad(options => {
		console.log(options)
		if (options.id) {
			id.value = options.id
		}
		trainId = options.trainId
		if (options.orders) {
			orders = JSON.parse(decodeURIComponent(options.orders));
		}
		if (options.totalMoney) {
			totalMoney.value = options.totalMoney
		}
		if (options.remarks) {
			remarks.value = JSON.parse(decodeURIComponent(options.remarks));
		}
		if (options.isEdit) {
			isEdit.value = options.isEdit
			invoiceId = options.invoiceId
			getList()
		}
	})

	function getRegionsList() {
		hotel.regionsList().then(res => {
			regionsList.value = res.data;
		});
	}

	function getList() {
		companyloading.value = true
		uni.showLoading({
			title:'加载中'
		})
		hotel.getInvoiceDetailBills(invoiceId).then(res => {
			// 订单
			list.value = res.data;
		});
		hotel.getInvoiceDetail(invoiceId).then(res => {
			form.value = res.data
			totalMoney.value = form.value.total
			companyloading.value = false
			uni.hideLoading()

		});
	}
	function getComanyInfo(){
		companyloading.value = true
		hotel.getComanyList({bilName:form.value.invoiceTitle}).then(res=>{
			companyList.value = res.rows
			companyloading.value = false
			
			if(companyList.value.length==1&&companyList.value[0].bilName == form.value.invoiceTitle){
				uni.showLoading({
					title:'加载中'
				})
				form.value.invoiceAccount = companyList.value[0].account
				form.value.invoiceAddress = companyList.value[0].address
				form.value.invoiceBank = companyList.value[0].bank
				// form.value.bilCode = companyList.value[0].bilCode
				// form.value.bilId = companyList.value[0].bilId
				form.value.invoiceTfn = companyList.value[0].bilTfn
				form.value.invoicePhone = companyList.value[0].mobile
				uni.hideLoading()
			}
		})
	}

	function submit() {
		form.value.total = totalMoney.value
		form.value.trainId = trainId
		if (!form.value.invoiceTitle) {
			uni.showToast({
				title: '请完善发票抬头 ',
				icon: 'none'
			})
			return
		}
		if (!form.value.invoiceTfn && form.value.invoiceType == '0') {
			uni.showToast({
				title: '请完善税号 ',
				icon: 'none'
			})
			return
		}
		if (isEdit.value) {
			hotel.editInvoice(form.value).then(res => {
				uni.showModal({
					title: '提示',
					content: ' 申请成功 ',
					showCancel: false,
					success: function(res) {
						if (res.confirm) {
							uni.navigateBack()
						}
					}
				})
			})
		} else {
			form.value.trainOrderInfoList = orders
			uni.showLoading({
				title: '提交中'
			});
			hotel.submitInvoice(form.value).then(res => {
				uni.hideLoading();
				uni.showModal({
					title: '提示',
					content: ' 申请成功 ',
					showCancel: false,
					success: function(res) {
						if (res.confirm) {
							uni.navigateBack()
						}
					}
				})
			})
		}


	}

	function onchangeRegionId(e) {
		regionArr.value = e.detail.value
	}

	function onnodeclick(e) {
		// console.log('nodeclick',e)
	}
</script>

<style lang="scss" scoped>
	.billItem {
		margin: 30rpx auto 0;
		position: relative;
		padding: 30rpx 0 1rpx;

		&>label {
			position: absolute;
			top: -10rpx;
			right: 0;
			font-size: 28rpx;
		}

		&>view {
			margin-bottom: 10rpx;
		}
	}

	.blueTag {
		color: #fff;
		background-color: #1EC886;
		padding: 10rpx 10rpx;
	}

	.purpleTag {
		color: #fff;
		background-color: #717bef;
		padding: 10rpx 10rpx;
	}

	.orangeTag {
		color: #fff;
		background-color: #ff8124;
		padding: 10rpx 10rpx;
	}

	.name {
		font-size: 34rpx;
		color: #000;
	}

	.poPrice {
		position: absolute;
		right: 30rpx;
		bottom: 0;
		font-size: 30rpx;
		color: #1EC886;
		padding: 0;
	}

	.whiteItem {
		width: 700rpx;
		box-sizing: border-box;
		margin: 30rpx auto;
		padding: 26rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 27rpx 0rpx #DEDEDE;
		border-radius: 15rpx;

		.tt {
			line-height: 1;
			border-left: 4rpx solid #1EC886;
			color: #1EC886;
			padding-left: 14rpx;
		}

		.m1 {
			width: 314rpx;
			height: 225rpx;
		}

		.m2 {
			width: 315rpx;
			height: 103rpx;
			float: right;
		}

		.m3 {
			width: 315rpx;
			height: 103rpx;
			position: absolute;
			right: 0;
			bottom: 0;
		}
	}

	.qbox {
		height: 225rpx;
		position: relative;
		width: 100%;
	}

	.slot-image {
		width: 60rpx;
		position: relative;
		top: -8rpx;
		height: 60rpx;
		margin-right: 30rpx;
	}

	.bigprice {
		font-size: 40rpx;
		line-height: 2;
	}

	.editbtn {
		color: #1EC886;
	}

	.flexbodyy {}

	.bigSize {
		font-size: 32rpx;
		margin-bottom: 10rpx;
	}

	.smallSize {
		font-size: 26rpx;
		color: #999;
	}

	.flexCenter {
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: space-between;
		background: #f4f4f4;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.remarksbox {
		padding: 30rpx;
		margin: 60rpx 0;
		color: #aaa;

		.h3 {
			font-size: 30rpx;
			margin: 0 0 20rpx;
		}

		font-size: 24rpx;
	}

	.pd20 {
		padding: 20rpx;
	}

	.popBody {
		height: 60vh;
		padding: 30rpx;
		overflow: auto;
	}

	.centerfont {
		text-align: center;
		margin-bottom: 30rpx;
	}
</style>