<template>
	<view class="web_box vflex acenter jbetween">
		<view>
			<!-- <u-navbar height="44" leftIcon="arrow-left" leftIconColor="#000" leftText="申请发票" @leftClick="leftClick" :autoBack="true" bgColor="#fff">
			</u-navbar> -->
			<view class="box hflex acenter">
				<image :src="course.img" mode="widthFix" style="width: 322rpx;border-radius: 16rpx;"></image>
				<view class="img_right">
					<view class="title">{{course.name}}</view>
					<view class="text_style1">总学时：{{course.period}}学时</view>
					<view class="text_style1">讲师：{{course.lecturer}}</view>
					<view class="order_price">￥{{course.price}}</view>
				</view>
			</view>
			<view class="box">
				<view class="hflex acenter jbetween cell">
					<view class="left">发票类型</view>
					<!-- <u-input v-model="bill.type" border="none" placeholder="请选择发票类型"></u-input> -->
					<view class="right">增值税电子普通发票</view>
				</view>
				<view class="hflex acenter jbetween cell" v-if="is_cancel == 0">
					<view class="left">抬头类型</view>
					<view class="right">
						<u-radio-group placement="row" @change="groupChange">
							<u-radio v-for="(item, index) in topType" :key="index" :label="item.name" :name="item.name" :customStyle="{marginLeft: '42rpx'}"></u-radio>
						</u-radio-group>
					</view>
				</view>
				<view class="hflex acenter jbetween cell" v-else>
					<view class="left">抬头类型</view>
					<view class="right">{{bill.topType}}
					</view>
				</view>
				<view class="hflex acenter jbetween cell">
					<view class="left">发票抬头</view>
					<u--input placeholder="填写需要开具发票的姓名" border="none" v-model="bill.invoice_title"></u--input>
				</view>
				<view class="hflex acenter jbetween cell">
					<view class="left">邮箱</view>
					<u--input placeholder="填写邮箱" border="none" v-model="bill.email"></u--input>
				</view>
				<view v-if="state == 2">
					<view class="hflex acenter jbetween cell">
						<view class="left">税号</view>
						<u--input placeholder="纳税人识别号" border="none" v-model="bill.taxID"></u--input>
					</view>
					<view class="hflex acenter jbetween cell">
						<view class="left">开户银行</view>
						<u--input placeholder="选填" border="none" v-model="bill.bank"></u--input>
					</view>
					<view class="hflex acenter jbetween cell">
						<view class="left">银行账号</view>
						<u--input placeholder="选填" border="none" v-model="bill.bankAccount"></u--input>
					</view>
					<view class="hflex acenter jbetween cell">
						<view class="left">企业地址</view>
						<u--input placeholder="选填" border="none" v-model="bill.address"></u--input>
					</view>
					<view class="hflex acenter jbetween cell">
						<view class="left">企业电话</view>
						<u--input placeholder="选填" border="none" v-model="bill.phone"></u--input>
					</view>
				</view>
			</view>
			<view class="hint">
				<view>温馨提示：受疫情管控影响，疫情管理地区的开票时间可能有所延长，请耐心等待，感谢您的理解！</view>
			</view>
		</view>
		<view class="bottom" v-if="is_cancel == 0">
			<view class="btn1" @click="invoice">提交申请</view>
			<view class="btn2" @click="invoice_no">不开发票</view>
		</view>
		<view class="bottom" v-else>
			<view class="btn1" @click="cancel">取消申请</view>
		</view>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	export default {
		data() {
			return {
				state: 1,
				course: {},
				index: 0,
				type: [
					{
						name: '增值税电子普通发票'
					}
				],
				topType: [
					{
						name: '个人或企业单位',
					},
					{
						name: '企业'
					}
				],
				bill: {
					type: '',
					topType: '',
					email: '',
					invoice_title: '',
					taxID: '',
					bank: '',
					bankAccount: '',
					address: '',
					phone: ''
				},
				course_id: '',
				order_no: '',
				is_cancel: 0,
				id: '',
			}
		},
		onLoad(options) {
			console.log(options);
			if(options.data) {
				options.data= options.data.replace(/""/g, "");
				const data = JSON.parse(options.data);
				console.log(data);
				this.is_cancel = 1
				this.state = data.look_up_type
				if(this.state == 1) {
					this.bill.topType = '个人或企业单位'
				} else{
					this.bill.topType = '企业'
				}
				// this.id = options.id
				this.bill.email = data.email
				this.bill.invoice_title = data.invoice_title
				this.bill.taxID = data.identify_number
				this.bill.bank = data.bank
				this.bill.bankAccount = data.bank_number
				this.bill.address = data.address
				this.bill.phone = data.phone
				this.id = data.order_id
			}
			this.course_id = options.course_id
			this.order_no = options.order_no
			this.getCourseData(this.course_id)
		},
		methods: {
			leftClick() {
				
			},
			// 根据ID获取课程信息
			getCourseData(id) {
				var that = this
				$api.req({
					url: '/api/Index/courseDetail',
					data: {
						id: id
					}
				}, function(res) {
					console.log("课程信息=",res);
					if (res.code === 1) {
						that.course = res.data
					}
				})
			},
			// 选择发票类型
			bindPickerChange(e) {
				console.log(e);
				var index = e.detail.value
				this.bill.type = this.type[index].name
				console.log(this.bill.type)
			},
			// 选择发票抬头类型
			groupChange(n) {
				console.log(n);
				if(n == "企业") {
					this.state = 2
				} else {
					this.state = 1
				}
			},
			// 申请发票
			invoice() {
				var that = this
				if (that.state == 1) {
					var data = {
						order_id: that.order_no,
						look_up_type: that.state,
						invoice_title: that.bill.invoice_title,
						email: that.bill.email
					}
				} else {
					var data = {
						order_id: that.order_no,
						look_up_type: that.state,
						invoice_title: that.bill.invoice_title,
						email: that.bill.email,
						identify_number: that.bill.taxID,
						bank: that.bill.bank,
						bank_number: that.bill.bankAccount,
						address: that.bill.address,
						phone: that.bill.phone,
					}
				}
				$api.req({
					url: '/api/User/submitInvoice',
					data: data
				}, function(res) {
					if (res.code == 1) {
						$api.info(res.msg)
						$api.jump('/pages/mine/order/order')
					}
					
				})
			},
			// 不开发票
			invoice_no() {
				$api.jump(-1)
			},
			// 取消申请
			cancel() {
				console.log(this.id);
				const data = {
					order_id: this.id
				}
				$api.req({
					url: '/api/User/cancleInvoice',
					data: data
				}, function(res) {
					if (res.code == 1) {
						$api.info(res.msg)
						$api.jump('/pages/mine/order/order')
					}
					
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.web_box::v-deep {
		padding: 0 30rpx;
		
		.u-navbar {
			width: 100%;
			box-sizing: border-box;
			padding: 36px 16px 58rpx 0;
		}
		.box {
			width: 100%;
			box-sizing: border-box;
			padding: 24rpx 22rpx;
			margin-top: 20rpx;
			background: #FFFFFF;
			box-shadow: 0px 2px 6px 0px rgba(213,213,213,0.5);
			border-radius: 24rpx;
		}
		.img_right {
			width: calc(100% - 322rpx);
			padding-left: 12rpx;
		}
		.title {
			font-size: 28rpx;
			font-weight: 600;
			color: #333333;
			padding-bottom: 14rpx;
		}
		.text_style1 {
			font-size: 20rpx;
			font-weight: 400;
			color: #999999;
			padding-bottom: 12rpx;
		}
		.order_price {
			font-size: 32rpx;
			font-weight: 600;
			color: #FA6400;
		}
		.left {
			font-size: 28rpx;
			font-weight: 400;
			color: #333333;
		}
		.right {
			font-size: 28rpx;
			font-weight: 400;
			color: #333333;
		}
		.cell {
			padding-top: 28rpx;
		}
		.u-input__content__field-wrapper__field {
			text-align: right !important;
		}
		.hint {
			margin: 30rpx 0 70rpx;
			width: 100%;
			font-size: 24rpx;
			color: #999999;
			line-height: 34rpx;
		}
		.bottom {
			width: 100%;
			
		}
		.btn1 {
			width: 100%;
			height: 80rpx;
			background: linear-gradient(135deg, #53BDFF 0%, #2988FE 100%);
			border-radius: 40rpx;
			font-size: 36rpx;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
			line-height: 80rpx;
			margin-bottom: 28rpx;
		}
		.btn2 {
			width: 100%;
			height: 80rpx;
			background: #FFFFFF;
			box-shadow: 0px 2px 6px 0px rgba(213,213,213,0.5);
			border-radius: 40rpx;
			font-size: 36rpx;
			font-weight: 500;
			color: #2988FE;
			text-align: center;
			line-height: 80rpx;
			margin-bottom: 44rpx;
		}

	}
</style>