<template>
	<view class="">
		<cu-custom class="main-totextbar bg-main-oil" :isBack="true" bgColor="bg-main-oil">
			<block slot="backText">返回</block>
			<block slot="content">发票信息</block>
		</cu-custom>
		<view class="padding-top-sm">
			<view
				class="shadow-warp radius move-top bg-gray margin margin-top-0 margin-bottom-sm  bg-white  text-bold text-xl padding-lg ">
				<view class="Invoicing-header">
					<view class="Invoicing-header-text text-lg">开票信息</view>
				</view>
				<view class="Invoicing-box " :class="[showBoxsing ? 'showBox':'hidenBox']">
					<view class="Invoicing-box-list solid-top padding-top-sm padding-bottom-sm">
						<view class="Invoicing-box-list-title   text-df">
							发票抬头:
						</view>
						<view class="Invoicing-box-list-text    text-sm  ">
							{{InvoiceDetails.invoicName}}
						</view>
					</view>
					<view class="Invoicing-box-list solid-top padding-top-sm padding-bottom-sm">
						<view class="Invoicing-box-list-title  text-df">
							税号:
						</view>
						<view class="Invoicing-box-list-text   text-sm  ">
							{{InvoiceDetails.invoicTaxIdentiNumber}}
						</view>
					</view>
					<view class="Invoicing-box-list solid-top padding-top-sm padding-bottom-sm">
						<view class="Invoicing-box-list-title    text-df">
							电子邮箱:
						</view>
						<view class="Invoicing-box-list-text    text-df">
							{{InvoiceDetails.invoicEmail}}
						</view>
					</view>
					<view class="Invoicing-box-list solid-top padding-top-sm padding-bottom-sm">
						<view class="Invoicing-box-list-title   text-df">
							发票备注:
						</view>
						<view class="Invoicing-box-list-text   text-df">
							{{InvoiceDetails.remark}}
						</view>
					</view>
					<view class="Invoicing-box-list solid-top padding-top-sm padding-bottom-sm">
						<view class="Invoicing-box-list-title  text-df">
							开票金额:
						</view>
						<view class="Invoicing-box-list-text    text-df">
							{{InvoiceDetails.invoicAmount}}
						</view>
					</view>
					<view class="Invoicing-box-list solid-top padding-top-sm padding-bottom-sm">
						<view class="Invoicing-box-list-title   text-df">
							发票类型:
						</view>
						<view class="Invoicing-box-list-text   text-df">
							普通电子发票
						</view>
					</view>
					<view class="Invoicing-box-list solid-top padding-top-sm padding-bottom-sm">
						<view class="Invoicing-box-list-title  text-df">
							抬头类型:
						</view>
						<view class="Invoicing-box-list-text  text-df">
							公司
						</view>
					</view>
					<view class="Invoicing-box-list solid-top padding-top-sm padding-bottom-sm">
						<view class="Invoicing-box-list-title   text-df">
							公司地址:
						</view>
						<view class="Invoicing-box-list-text text-df">
							{{InvoiceDetails.invoicAddress}}
						</view>
					</view>
					<view class="Invoicing-box-list solid-top padding-top-sm padding-bottom-sm">
						<view class="Invoicing-box-list-title  text-df">
							电话号码:
						</view>
						<view class="Invoicing-box-list-text  text-df">
							{{InvoiceDetails.invoicTel}}
						</view>
					</view>
					<view class="Invoicing-box-list solid-top padding-top-sm padding-bottom-sm">
						<view class="Invoicing-box-list-title  text-df">
							开户银行:
						</view>
						<view class="Invoicing-box-list-text  text-df">
							{{InvoiceDetails.invoicOpenBank}}
						</view>
					</view>
					<view class="Invoicing-box-list solid-top padding-top-sm padding-bottom-sm">
						<view class="Invoicing-box-list-title text-df">
							银行账号:
						</view>
						<view class="Invoicing-box-list-text text-df">
							{{InvoiceDetails.invoicBankNumber}}
						</view>
					</view>
				</view>
				<view class=" text-center text-lg padding-top-sm" @tap="showBoxsings" v-text="showText">
				</view>
			</view>
		</view>
		<view class="">
			<view
				class="shadow-warp radius  bg-gray margin margin-top-20 margin-bottom-sm  bg-white  text-bold text-xl padding-lg">
				<view class="Invoicing-header-text text-lg ">
					订单编号
				</view>
				<view class="text-df padding-left-sm " @tap="onCopy(InvoiceDetails.orderSerialNumber)">
					{{InvoiceDetails.orderSerialNumber}} <text class="cuIcon-copy padding-left-xs text-sm  "></text>
				</view>
				<view class="Invoicing-header-text text-lg margin-top-lg ">
					开票进度
				</view>
				<view class="text-df  padding-sm" style="width: 100%;">
					<u-time-line>
						<u-time-line-item :class="{'showIcons':item.check === true}" v-for="(item,index) in numList"
							:key='index'>
							<template v-slot:content>
								<view class="time_lineDispay">
									<view class="u-order-desc  margin-right-lg">{{item.name}}</view>
									<view class="u-order-time ">{{item.time}}</view>
								</view>
								<view class="time_lineDispay margin-top-xs" v-if="item.errcheck == 1"
									v-show='index == 3'>
									<view class="u-order-desc text-xs margin-right-lg text-red light">24小时内未收到发票请与客服联系
									</view>
								</view>
								<view class="time_lineDispay margin-top-xs" v-if="item.errcheck == -1"
									v-show='index == 1'>
									<view class="u-order-desc text-xs margin-right-lg "> <text
											class="text-red text-xs ">原因:</text> {{item.errtext}}</view>
									<view class="u-order-time text-blue text-xs" @tap="gotochanges">前往修改开票信息</view>
								</view>
							</template>
						</u-time-line-item>
					</u-time-line>
					<!-- <u-steps  direction="column"  :list="numList" :current="1" active-color="#FF0000"></u-steps> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import financelApi from '@/api/oil-finance.js'
	export default {
		data() {
			return {
				showText: '查看更多',
				showBoxsing: false,
				orderId: '',
				numList: [{
					name: '待申请',
					time: '',
					check: false,
				}, {
					name: '待审核',
					time: '',
					check: false,
					errcheck: false
				}, {
					name: '待开票',
					time: '',
					check: false,
				}, {
					name: '待发件',
					time: '',
					check: false,
					errcheck: 0,
					errtext: ''
				}],
				InvoiceDetails: {
					id: '', //主键id
					orderSerialNumber: '', // 订单编号
					invoicAmount: '', //开票金额
					userName: '', //司机名
					phone: '', //司机电话号码
					invoicTel: '', //公司电话号码
					siteName: '', //油站名
					siteCode: '', //油站编码
					auditMark: '', //审核状态
					openInvoicMark: '', //开票状态
					invoicEnclosure: '', //电子发票附件
					remark: '', //开票备注
					customerId: '', //司机id
					auditRemark: '', //审核备注
					invoicName: '', //发票抬头
					invoicTaxIdentiNumber: '', //税号
					openInvoicTime: '', //开票时间
					invoicEmail: '', //接收邮件
					invoicBankNumber: '', //银行账号
					invoicOpenBank: '', //开户银行
					invoicAddress: '', //公司地址
					auditRecordTime: '', //开票申请时间
					auditTime: '' //审核时间
				}
			}
		},
		onLoad(option) {
			console.log(option)
			this.orderId = option.orderId
			this.getOrderInvoice()
		},
		methods: {
			gotochanges() {
				console.log(this.InvoiceDetails.invoicAmount)
				uni.navigateTo({
					url: "../orderInvoicing/orderInvoicing?orderId=" + this.orderId + '&&code=' + 2 +
						'&&realAmount=' + this.InvoiceDetails.invoicAmount
				})
			},
			showBoxsings() {
				if (this.showBoxsing) {
					this.showBoxsing = false
					this.showText = '查看更多'
				} else {
					this.showText = '收回'
					this.showBoxsing = true

				}
			},
			onCopy(id) {
				uni.setClipboardData({
					data: id,
					success: () => {
						uni.showToast({
							icon: 'none',
							title: '订单号复制成功'
						})
					}
				})
			},
			getOrderInvoice() { //获取发票详情
				console.log('这里是传来的 orderId')
				console.log(this.orderId)
				financelApi.getRecordByOrderId(this.orderId).then((res) => {
					console.log('这里的发票详情')
					console.log(res)
					let _that = this
					if (res.data.auditMark == 1) {
						console.log('审核通过')
						this.timeLineStates(2)
						_that.numList[0].name = '已申请'
						_that.numList[1].name = '已审核'
						_that.numList[0].time = res.data.auditRecordTime
						_that.numList[1].time = res.data.auditTime
					} else if (res.data.auditMark == -1) {
						console.log('审核未通过')
						_that.numList[0].name = '已申请'
						_that.numList[1].name = '审核未通过'
						_that.numList[0].time = res.data.auditRecordTime
						console.log()
						this.timeLineStates(2, res.data)
					} else if (res.data.auditMark == 0) {
						_that.numList[0].time = res.data.auditRecordTime
						console.log('待审核')
						_that.numList[0].name = '已申请'
						_that.numList[1].name = '待审核'
						this.timeLineStates(2)
					}
					if (res.data.auditMark == 1 && res.data.openInvoicMark === 'INVOICED') {
						_that.numList[0].name = '已申请'
						_that.numList[2].name = '开票成功'
						_that.numList[1].name = '已审核'
						console.log(res)
						_that.numList[0].time = res.data.auditRecordTime
						_that.numList[1].time = res.data.auditTime
						_that.numList[2].time = res.data.openInvoicTime
						this.timeLineStates(3)
					} else if (res.data.auditMark == 1 && res.data.openInvoicMark === 'TO_INVOICED') {
						_that.numList[0].name = '已申请'
						_that.numList[2].name = '待开票'
						_that.numList[1].name = '已审核'
						_that.numList[0].time = res.data.auditRecordTime
						_that.numList[1].time = res.data.auditTime
						console.log('待开票')
						this.timeLineStates(3)
					} else if (res.data.auditMark == 1 && res.data.openInvoicMark === "INVOICING") {
						_that.numList[0].name = '已申请'
						_that.numList[2].name = '正在开票中'
						_that.numList[1].name = '已审核'
						_that.numList[0].time = res.data.auditRecordTime
						_that.numList[1].time = res.data.auditTime
						console.log('开票中')
						this.timeLineStates(3)
					} else if (res.data.auditMark == 1 && res.data.openInvoicMark === "INVOICE_FAIL") {
						_that.numList[0].name = '已申请'
						_that.numList[2].name = '开票失败'
						_that.numList[1].name = '已审核'
						_that.numList[0].time = res.data.auditRecordTime
						_that.numList[1].time = res.data.auditTime
						console.log('开票中')
						this.timeLineStates(3, res.data)
					}
					// else if(res.data.auditMark == 1 &&  res.data.openInvoicMark === 'INVOICED'){
					// 	_that.numList[0].name = '已申请'
					// 	_that.numList[2].name = '正在开票'
					// 	_that.numList[1].name = '已审核'
					// 	_that.numList[2].time =res.data.openInvoicTime
					// 	_that.numList[0].time = res.data.createTime
					// 	_that.numList[1].time = res.data.auditTime 
					// 	console.log('待开票')
					// 	this.timeLineStates(3)
					// }
					if (res.data.auditMark == 1 && res.data.openInvoicMark === 'INVOICED' && res.data
						.sendEmailMark == 1) {
						console.log('邮件发件成功')
						_that.numList[0].name = '已申请'
						_that.numList[1].name = '已审核'
						_that.numList[2].name = '已开票'
						_that.numList[3].name = '已发邮箱'
						_that.numList[0].time = res.data.auditRecordTime
						_that.numList[1].time = res.data.auditTime
						_that.numList[2].time = res.data.openInvoicTime
						_that.numList[3].time = res.data.sendEmailTime
						this.timeLineStates(4, res.data)
					} else if (res.data.auditMark == 1 && res.data.openInvoicMark === 'INVOICED' && res.data
						.sendEmailMark == -1) {
						_that.numList[0].name = '已申请'
						_that.numList[1].name = '已审核'
						_that.numList[2].name = '已开票'
						_that.numList[3].name = '邮件发送失败'
						_that.numList[0].time = res.data.auditRecordTime
						_that.numList[1].time = res.data.auditTime
						_that.numList[2].time = res.data.openInvoicTime
						console.log('邮件发件失败')
						this.timeLineStates(4, res.data)
					} else if (res.data.auditMark == 1 && res.data.openInvoicMark === 'INVOICED' && res.data
						.sendEmailMark == 0) {
						_that.numList[0].name = '已申请'
						_that.numList[1].name = '已审核'
						_that.numList[2].name = '已开票'
						_that.numList[3].name = '邮件正在发送'
						_that.numList[0].time = res.data.auditRecordTime
						_that.numList[1].time = res.data.auditTime
						_that.numList[2].time = res.data.openInvoicTime
						console.log('邮件发送中')
						this.timeLineStates(4, res.data)
					} else if (res.data.auditMark == 1 && res.data.openInvoicMark === 'INVOICED' && res.data
						.sendEmailMark == null) {
						_that.numList[0].name = '已申请'
						_that.numList[1].name = '已审核'
						_that.numList[2].name = '已开票'
						_that.numList[3].name = '代发件'
						_that.numList[0].time = res.data.auditRecordTime
						_that.numList[1].time = res.data.auditTime
						_that.numList[2].time = res.data.openInvoicTime
						console.log('邮件发送中')
						this.timeLineStates(4, res.data)
					}
					this.InvoiceDetails = res.data
				})
			},
			// 获取当前步骤条状态
			timeLineStates(num, obj) {
				console.log('这里是obj')
				console.log(obj)
				console.log(num)
				let listTime = this.numList
				for (let i = 0; i < listTime.length; i++) {
					if (i < num) {
						listTime[i].check = true
						console.log('123')
						if (obj) {
							if (obj.sendEmailMark == 1 && obj.auditMark == 1) {
								console.log('这里是邮件1')
								listTime[num - 1].errcheck = obj.sendEmailMark
							} else if (obj.sendEmailMark != -1 && obj.auditMark == -1) {
								console.log('这里是审核2')
								listTime[num - 1].name = '审核失败'
								listTime[num - 1].errcheck = obj.auditMark
								listTime[num - 1].errtext = obj.auditRemark
								console.log('这里进入obj')
							} else if (obj.openInvoicMark == 'INVOICE_FAIL' && obj.auditMark == 1) {
								console.log('这里是开票2')
								let checkErr = 0
								if (obj.openInvoicMark == 'INVOICE_FAIL') {
									checkErr = -1
								}
								listTime[num - 1].name = '开票失败'
								listTime[num - 1].errcheck = checkErr
								listTime[num - 1].errtext = obj.openInvoicRemark
								console.log('这里进入obj')
							}

						}
					}

				}
			}
		}
	}
</script>

<style>
	.showBox {
		height: auto;
		overflow: hidden;
	}

	.hidenBox {
		height: 300upx;
		overflow: hidden;
	}

	.time_lineDispay {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}

	.showIcons /deep/ .u-dot {
		background: #FF0000 !important;
	}

	page {
		background-color: #F1F2F7;
	}

	.weight-2 {
		font-weight: 600;
	}

	.weight-4 {
		font-weight: 400;
	}

	.weight-0 {
		font-weight: 100;
	}

	.clomes-box {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		flex-direction: column;
	}

	.Invoicing-header-text {
		border-left: 4px solid #FF0000;
		padding-left: 10upx;
		margin-bottom: 20upx;
	}

	.Invoicing-box {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		flex-direction: column;
		width: 100%;
		box-shadow: inset 0 -5px 5px #f1f1f17a;
	}

	.Invoicing-box-list-title {
		flex: 0 0 auto;
		width: 30%;
	}

	.Invoicing-box-list-text {}

	.Invoicing-box-list {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
	}
</style>
