<template>
	<view class="page-container">
		<swiper indicator-dots style="height: 120rpx;" autoplay indicator-active-color="#fff">
			<swiper-item>
				<image :src="imgAssets+'/banner_1.png'" style="width: 100vw;height: 120rpx;"></image>
			</swiper-item>
			<swiper-item>
				<image :src="imgAssets+'/banner_2.png'" style="width: 100vw;height: 120rpx;"></image>
			</swiper-item>
		</swiper>
		<view class="invoice-info-title mt-40">开票信息</view>
		<view class="invoice-info-box mt-20">
			<view class="invoice-info-item">
				<view class="invoice-info-item-title star">开票信息</view>
				<view @click="doGetInvoiceInfoList"
					:class="['invoice-info-item-content','select',invoiceInfo==null ? 'normal-value':'select-value']">
					{{invoiceInfo ==null ?'请选择开票信息' :invoiceInfo.invoiceName}}
				</view>
			</view>
			<view class="invoice-info-item">
				<view class="invoice-info-item-title star">发票类型</view>
				<view class="invoice-info-item-content">
					<radio-group class="custom-radio-group" @change="changeType">
						<block v-for="(item,index) in typeList" :key="index">
							<radio :checked="typeId==item.dataName" :value="item.dataName">
								{{item.dataName}}
							</radio>
						</block>
					</radio-group>
				</view>
			</view>
			<view class="invoice-info-item">
				<view class="invoice-info-item-title star">开票内容</view>
				<view class="invoice-info-item-content">
					<radio-group class="custom-radio-group" @change="changeContent">
						<block v-for="(item,index) in contentList" :key="index">
							<radio :checked="contentId==item.dataName" :value="item.dataName">{{item.dataName}}</radio>
						</block>
					</radio-group>
				</view>
			</view>
			<view class="invoice-info-item">
				<view class="invoice-info-item-title star">开票税率</view>
				<view class="invoice-info-item-content">
					<radio-group class="custom-radio-group" @change="changeRate">
						<block v-for="(item,index) in rateList" :key="index">
							<radio :checked="rateId==item.dataName" :value="item.dataName">
								{{item.dataName}}
							</radio>
						</block>
					</radio-group>
				</view>
			</view>
		</view>
		<view class="invoice-info-title mt-40">开票内容</view>
		<view class="invoice-info-box mt-20">
			<view class="invoice-info-item">
				<view class="invoice-info-item-title star">开票金额</view>
				<view class="invoice-info-item-content">
					<rich-text class="text-red" :nodes="moneyTxt(10,14,invoiceMoney)"></rich-text>
				</view>
			</view>
			<view class="invoice-info-item-ver">
				<view class="invoice-info-item-title" style="align-self: flex-start;">开票备注</view>
				<textarea class="invoice-remark" :value="remark" @input="inputRemark" placeholder-style="color:#dbdbdb;"
					placeholder="请输入备注信息"></textarea>
			</view>
			<view v-if="editBean != null && editBean.invoiceStatus == '0'">
				<view class="invoice-info-item-title text-red">失败原因</view>
				<view style="padding-left:20rpx;font-size: 28rpx;font-weight: bold;" class="text-red">
					{{editBean.invoiceFinalRecord}}
				</view>
			</view>
		</view>
		<view class="bottom-fixed-footer">
			<view class="bottom-btn-green" @click="confirmSubmit">提交</view>
		</view>
		<!-- 开票信息 -->
		<uni-popup ref="infoDialog" type="bottom" background-color="#fff" border-radius="15rpx 15rpx 0rpx 0rpx">
			<view class="bottom-dialog-container">
				<view class="dialog-title-box">
					<view class="icon-close size-48" @click="closeDialog"></view>
					<view class="dialog-title-txt has-icon">发票抬头</view>
				</view>
				<view style="height: 600rpx;">
					<ContainerLoading :loadingVisible="loadingState">
						<scroll-view scroll-y style="height: 600rpx;">
							<view style="display: flex;flex-direction: column;padding: 20rpx;">
								<block v-for="(item,index) in invoiceInfoList" :key="index">
									<view class="invoice-sel-item-box" @click="onInvoiceItemClick" :data-value="item">
										<view
											:class="[invoiceInfo && invoiceInfo.invoiceId===item.invoiceId? 'invoice-sel-item-yellow' :'invoice-sel-item-gray']">
											<view>{{item.invoiceName}}</view>
											<view>{{item.invoiceNumber}}</view>
										</view>
										<view v-if="invoiceInfo != null && invoiceInfo.invoiceId===item.invoiceId"
											class="icon-hook-yellow size-48"></view>
									</view>
								</block>
							</view>
						</scroll-view>
					</ContainerLoading>
				</view>
				<view class="bottom-btn-green" @click="openCreateInvoiceInfo">新增开票信息</view>
			</view>
		</uni-popup>
		<uni-popup type="message" ref="msg">
			<uni-popup-message :type="msgType" :message="msgHint" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	import InvoiceApi from '@/common/js/net/InvoiceApi.js'
	import ContainerLoading from '@/components/container-loading.vue'
	import {
		inject
	} from 'vue';
	import {
		moneyTxt
	} from '@/common/js/conver.js'
	export default {
		components: {
			ContainerLoading
		},
		setup() {
			const globalData = inject('globalData')
			return {
				globalData
			}
		},
		data() {
			return {
				imgAssets: this.globalData.imgAssetsUrl,
				primaryColor: this.globalData.primaryColor,
				msgType: 'error',
				msgHint: '',
				msgShow: false,
				typeList: [], //开票类型
				contentList: [], //开票内容
				rateList: [], //开票税率
				typeId: '',
				contentId: '',
				rateId: '',
				invoiceInfo: null, //开票信息
				invoiceMoney: 0, //开票金额
				showInvoiceInfo: false,
				invoiceInfoList: [], //开票信息
				payOrderIds: '', //开票记录id
				remark: '', //备注信息
				editBean: null, //编辑页面传递过来的
				loadingState: 'loading'
			};
		},
		onLoad(options) {
			uni.setNavigationBarTitle({
				title: "开发票",
			});
			uni.setNavigationBarColor({
				frontColor: "#000000",
				backgroundColor: "#F0F0F0",
				animation: {
					duration: 500,
					timingFunc: "easeIn",
				},
			});
			const ids = options.ids
			if (ids) {
				this.invoiceMoney = Number(options.money)
				this.payOrderIds = options.ids

			} else {
				const beanStr = options.bean
				const bean = JSON.parse(beanStr)
				this.editBean = bean
				this.rateId = bean.invoiceTaxrate,
					this.contentId = bean.invoicePurpose,
					this.typeId = bean.invoiceClassify,
					this.invoiceMoney = bean.invoiceRechargeMoney,
					this.payOrderIds = bean.invoiceRechargeIds,
					this.remark = bean.invoiceRecord,
					this.invoiceInfo = {
						invoiceId: bean.invoiceId,
						invoiceName: bean.invoiceName,
						invoiceNumber: bean.invoiceNumber,
						invoiceOrgaddress: bean.invoiceOrgaddress,
						invoiceOrgtel: bean.invoiceOrgtel
					}
			}
			//获取开票类型
			//获取开票内容
			//获取开票税率
			this.getPageData()
		},
		methods: {
			moneyTxt,
			getPageData() {
				uni.showLoading({
					title: '加载中...',
				})
				const pageData = {
					page: 1,
					rows: 100
				}
				const _self = this
				const type = InvoiceApi.doGetDicListByPId(
					'e0251d55-cd52-4f57-be92-b2bef8a6dd62') //开票内容 本地e0251d55-cd52-4f57-be92-b2bef8a6dd62
				const content = InvoiceApi.doGetDicListByPId(
					'b67d5208-db1d-4d0e-99de-cc22d9d50041') //税率 本地 b67d5208-db1d-4d0e-99de-cc22d9d50041
				const rate = InvoiceApi.doGetDicListByPId(
					'e4808c45-64ee-42fa-a413-a470fbdc0aea') // 开票类型 本地e4808c45-64ee-42fa-a413-a470fbdc0aea
				const info = InvoiceApi.doGetMineInvoiceList(pageData)
				const list = [type, content, rate, info]
				Promise.all(list)
					.then(res => {
						uni.hideLoading()
						console.log(res)
						_self.contentList = res[0]
						_self.rateList = res[1]
						_self.typeList = res[2]
						_self.invoiceInfoList = res[3].rows
						// 默认第一条
						if (_self.editBean == null) {
							_self.contentId = res[0][0].dataName
							_self.rateId = res[1][0].dataName
							_self.typeId = res[2][0].dataName
							_self.invoiceInfo = res[3].rows[0]
						}
					})
					.catch(err => {
						uni.hideLoading()
						console.log(err)
						_self.msgHint = '数据有误,请稍后重试'
						_self.msgType = 'error'
						_self.$refs.msg.open()
						setTimeout(() => {
							uni.navigateBack()
						}, 1800);
					})
			},
			inputRemark(e) {
				this.remark = e.detail.value
			},
			changeContent(e) {
				this.contentId = e.detail.value
			},
			changeType(e) {
				this.typeId = e.detail.value
			},
			changeRate(e) {
				this.rateId = e.detail.value
			},
			changeInvoiceInfo(e) {
				console.log('groupChange', e)
				const index = e.detail.value;
				const selectedItem = this.invoiceInfoList[index];
				this.invoiceInfo = selectedItem
				this.$refs.infoDialog.close()
			},
			onInvoiceItemClick(e) {
				console.log(e)
				this.invoiceInfo = e.currentTarget.dataset.value
				this.$refs.infoDialog.close()
			},
			openCreateInvoiceInfo() {
				this.$refs.infoDialog.close()
				uni.navigateTo({
					url: '/pages/mine/mineAccount/invoiceInfo/invoiceInfo',
				})
			},
			//获取开票信息
			doGetInvoiceInfoList() {
				if (this.invoiceInfoList != null && this.invoiceInfoList.length > 0) {
					this.loadingState = 'success'
				} else {
					this.loadingState = 'empty'
				}
				this.$refs.infoDialog.open()
			},
			//构建提交参数
			buildParams() {
				const data = {
					invoiceId: this.invoiceInfo.invoiceId,
					invoiceTaxrate: this.rateId,
					invoicePurpose: this.contentId,
					invoiceClassify: this.typeId,
					invoiceRecord: this.remark,
					accountRechargeIds: this.payOrderIds
				}
				return data
			},
			doSaveInfo() {
				//判断编辑 新增
				const isLegal = this.checkParams()
				if (isLegal) {
					uni.showLoading({
						title: '提交中...',
					})
					const _self = this
					const data = _self.buildParams()
					InvoiceApi.doSaveInvoiceRecord(data)
						.then(res => {
							uni.hideLoading()
							console.log(res)
							if (res.data && res.data != '') {
								_self.msgType = 'success'
								_self.msgHint = '开票信息提交成功!我们会以最快速度完成开票，还请耐心等待!'
								_self.$refs.msg.open()
								setTimeout(() => {
									_self.backPageRefresh()
								}, 1000);
							} else {
								_self.msgType = 'error'
								_self.msgHint = '发票开取失败,请稍后重试'
								_self.$refs.msg.open()
							}
						})
						.catch(err => {
							uni.hideLoading()
							_self.msgType = 'error'
							_self.msgHint = err.msg ? err.msg : '发票开取失败,请稍后重试'
							_self.$refs.msg.open()
						})
				}
			},
			//校验参数
			checkParams() {
				if (this.invoiceInfo == null) {
					this.msgType = 'error'
					this.msgHint = '请选择开票信息'
					this.$refs.msg.open()
					return false
				}
				if (this.typeId == '') {
					this.msgType = 'error'
					this.msgHint = '请选择开票类型'
					this.$refs.msg.open()

					return false
				}
				if (this.contentId == '') {
					this.msgType = 'error'
					this.msgHint = '请选择开票内容'
					this.$refs.msg.open()
					return false
				}
				if (this.rateId == '') {
					this.msgType = 'error'
					this.msgHint = '请选择开票税率'
					this.$refs.msg.open()
					return false
				}
				return true
			},
			//提交
			confirmSubmit() {
				if (this.editBean != null && this.editBean.invoiceRechargeId != '') {
					this.doEditInfo()
				} else {
					this.doSaveInfo()
				}
			},
			//编辑
			doEditInfo() {
				const isLegal = this.checkParams()
				if (isLegal) {
					const data = this.buildParams()
					const _self = this
					uni.showLoading({
						title: '提交中...',
					})
					InvoiceApi.doUpdateInvoiceRecord(_self.editBean.invoiceRechargeId, data)
						.then(res => {
							uni.hideLoading()
							if (res.data && res.data != '') {
								_self.msgType = 'success'
								_self.msgHint = '开票信息编辑成功!我们会以最快速度完成开票，还请耐心等待!'
								_self.$refs.msg.open()
								setTimeout(() => {
									_self.backPageRefresh()
								}, 1000);
							} else {
								_self.msgType = 'error'
								_self.msgHint = '发票信息编辑失败,请稍后重试'
								_self.$refs.msg.open()
							}
						})
						.catch(err => {
							uni.hideLoading()
							_self.msgType = 'error'
							_self.msgHint = err.msg ? err.msg : '发票信息编辑失败,请稍后重试'
							_self.$refs.msg.open()
						})
				}
			},
			backPageRefresh() {
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2];
				prevPage.$vm.needRefresh = true
				uni.navigateBack()
			},
			closeDialog(e) {
				this.$refs.infoDialog.close()
			}
		},
	};
</script>

<style lang="scss" scoped>
	.invoice-info-title {
		font-size: 36rpx;
		font-weight: bold;
	}

	.invoice-info-box {
		display: flex;
		flex-direction: column;
		padding: 20rpx;
		background-color: $white-color;
		border-radius: 15rpx;
		box-shadow: 0 0 15rpx 5rpx rgba(0, 0, 0, 0.01);
	}

	.invoice-info-item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.invoice-info-item-ver {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		margin-top: 20rpx;
	}

	.invoice-remark {
		height: 120rpx;
		align-self: center;
		border-radius: 10rpx;
		width: 95%;
		margin-top: 10rpx;
		margin-bottom: 20rpx;
		font-size: 28rpx;
		padding: 15rpx;
		background-color: $bg-gray-input-color;
	}



	.bottom-btn {
		position: fixed;
		bottom: 40rpx;
		left: 0;
		display: flex;
		flex-direction: row;
		padding: 30rpx;
		width: 100%;
		box-sizing: border-box;
	}

	.form-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		font-size: 14px;
		background-color: antiquewhite;
	}



	.invoice-info-item:nth-of-type(n+2) {
		margin-top: 20rpx;
	}

	.invoice-info-item-title {
		font-size: 28rpx;
	}

	.invoice-info-item-content {
		font-size: 28rpx;
		padding-left: 20rpx;
		margin-left: 15rpx;
		flex: 1;
		align-items: center;
		justify-content: flex-end;
		display: flex;
		flex-direction: row;
		padding: 10rpx 15rpx;
	}

	.bg-gray {
		background-color: $bg-gray-input-color;
	}

	.custom-radio-group {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		font-size: 28rpx;
		flex-wrap: wrap;
	}

	.link {
		font-size: 28rpx;
		color: $text-blue-color;
	}

	.select::after {
		content: '';
		background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB0PSIxNzQ1ODA2NDUxMTAzIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjE0MDQ5IiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiPjxwYXRoIGQ9Ik0xMDA0Ljk5MTg5NCAyNDIuOTkzNDRjLTEyLjY1ODA2MS0xMi42Njg1NjgtMjcuNjYyODAyLTE4Ljk5NzU5OS00NS4wMDAyMTItMTguOTk3NTk5SDY0LjAwNDgxNmMtMTcuMzQ0NDE1IDAtMzIuMzM4NjQ5IDYuMzI5MDMtNDUuMDA3MjE3IDE4Ljk5NzU5OUM2LjMyOTAzIDI1NS42NzYwMTggMCAyNzAuNjcwMjUxIDAgMjg4LjAwNDE1OWMwIDE3LjMzMDQwNSA2LjMyOTAzIDMyLjMyNDYzOSAxOC45OTc1OTkgNDQuOTk2NzFsNDQ3Ljk5NTE4NCA0NDcuOTk1MTg0YzEyLjY4MjU3OCAxMi42Njg1NjggMjcuNjc2ODEyIDE5LjAxMTYwOSA0NS4wMDcyMTcgMTkuMDExNjA5czMyLjMzODY0OS02LjM0MzA0IDQ0Ljk5NjcxLTE5LjAxMTYwOUwxMDA0Ljk5MTg5NCAzMzIuOTk3MzY2YzEyLjY1NDU1OC0xMi42Njg1NjggMTkuMDA4MTA2LTI3LjY2MjgwMiAxOS4wMDgxMDYtNDQuOTk2NzA5IDAtMTcuMzMwNDA1LTYuMzUzNTQ4LTMyLjMyNDYzOS0xOS4wMDgxMDYtNDUuMDA3MjE3eiIgcC1pZD0iMTQwNTAiIGZpbGw9IiNkYmRiZGIiPjwvcGF0aD48L3N2Zz4=');
		display: block;
		background-size: cover;
		width: 24rpx;
		height: 24rpx;
		margin: 0rpx 15rpx;
	}

	.normal-value {
		color: $text-gray-hint-color;
	}

	.select-value {
		color: $text-color;
	}


	.invoice-sel-item-yellow {
		display: flex;
		flex-direction: column;
		text-align: left;
		color: $primary-color;
	}

	.text-red {
		color: $red-color;
		font-weight: bold;
		word-break: break-all;
	}

	.invoice-sel-item-gray {
		display: flex;
		flex-direction: column;
		text-align: left;
		color: $text-gray-desc-color;
	}

	.invoice-sel-item-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		flex: 1;
		padding: 20rpx 10rpx;
		border-bottom: 1rpx solid $divider-color;
		font-size: 24rpx;
	}

	radio:nth-of-type(n+2) {
		margin-left: 20rpx;
	}
</style>