<template>
	<!-- 可以开具发票的订单 -->
	<view class="page-container">
		<view style="margin-top: 5rpx;">
			<ContainerLoading :loadingVisible="loadingState">
				<scroll-view scroll-y style="height: 79vh;" :lower-threshold="100" refresher-background="#FFFFFF00"
					@scrolltolower="doLoadMore">
					<view class="order-list-box">
						<block v-for="(item,index) in orderList" :key="index">
							<view class="order-list-item" @click="checkItem" :data-value="item">
								<checkbox :checked="item.checked" v-if="currentStatus=='not'">
								</checkbox>
								<view class="order-list-item-content">
									<view class="order-item-time-box">
										<view class="time-content icon-time">{{item.reconciliationTime}}</view>
										<view :class="[payWay(item.thirdParty),'pay-icon-size']"></view>
									</view>
									<view class="order-item-title-box">
										<view class="success-time">到账时间:{{item.rechargeFinalTime}}</view>
										<rich-text class="pay-money"
											:nodes="moneyTxt(10,14,item.rechargeMoney)"></rich-text>
									</view>
								</view>
							</view>
						</block>
						<uni-load-more :status="hasMore"></uni-load-more>
					</view>
				</scroll-view>
			</ContainerLoading>
		</view>
		<view class="bottom-fixed-footer">
			<view class="money">开票金额:<text class="price">{{money}}元</text></view>
			<view class="bottom-btn-green" @click="goMakeInvoice">去开票</view>
		</view>
		<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 {
		payWay,
		moneyTxt
	} from '@/common/js/conver.js'
	export default {
		components: {
			ContainerLoading
		},
		setup() {},
		data() {
			return {
				currentStatus: 'not', //可否开具发票tab not可以开  yes 已开
				loadingState: 'loading',
				isLoadMore: false,
				listRefreshTrig: false,
				orderList: [], //订单列表
				pageData: {
					page: 1,
					rows: 10,
					startTime: '',
					endTime: '',
					thirdParty: '', //充值方式  微信  支付宝  对公转账
				},
				hasMore: 'more',
				startTime: '',
				endTime: '',
				checkList: [], //选中的可以开票的集合
				money: 0, //开票金额
				msgHint: '',
				msgType: 'error',
				msgShow: false,
			};
		},
		onLoad(options) {
			uni.setNavigationBarTitle({
				title: "开发票",
			});
			uni.setNavigationBarColor({
				frontColor: "#000000",
				backgroundColor: "#F0F0F0",
				animation: {
					duration: 500,
					timingFunc: "easeIn",
				},
			});
			this.doRefreshList()
		},
		methods: {
			payWay,
			moneyTxt,
			//下拉刷新
			doRefreshList() {
				const _self = this
				_self.loadingState = 'loading'
				_self.hasMore = 'more'
				_self.pageData.page = 1
				_self.pageData.startTime = _self.startTime
				_self.pageData.endTime = _self.endTime
				_self.doGetMineInvoiceOrderList(true)
			},

			//加载更多
			doLoadMore() {
				//判断是否正在加载中 与是否存在更多数据
				const _self = this
				if (_self.isLoadMore || _self.hasMore == 'noMore') {
					return
				}
				_self.hasMore = 'loading'
				_self.pageData.page = ++_self.pageData.page
				_self.pageData.startTime = _self.startTime
				_self.pageData.endTime = _self.endTime
				_self.doGetMineInvoiceOrderList(false)
			},
			//获取我的优惠卷
			doGetMineInvoiceOrderList(isRefresh) {
				const _self = this
				_self.orderList = isRefresh ? [] : _self.orderList
				_self.loadingState = isRefresh ? 'loading' : ''
				InvoiceApi.doGetMineInvoiceOrderList(_self.pageData, _self.currentStatus)
					.then(res => {
						var status = 'success'
						res.rows.map(item => {
							item.checked = _self.checkList.find(value => item.accountRechargeId == value
								.accountRechargeId)
							return item
						})
						status = res.rows && res.rows.length > 0 ? 'success' : 'empty'
						_self.loadingState = isRefresh ? status : ''
						_self.orderList = _self.orderList.concat(res.rows)
						_self.hasMore = _self.orderList.length < res.total ? 'more' : 'noMore'
						_self.isLoadMore = false
					})
					.catch(err => {
						_self.loadingState = 'error'
						_self.hasMore = 'more'
						_self.isLoadMore = false
					})
			},

			//选中list
			checkItem(e) {
				if (this.currentStatus == 'yes') return;
				const value = e.currentTarget.dataset.value;
				// 查找当前选中项在 checkList 中的索引
				const checkListIndex = this.checkList.findIndex(item => item.accountRechargeId === value
					.accountRechargeId);
				const isHas = checkListIndex !== -1;
				// 更新 orderList 中对应项的 checked 状态
				const newOrderList = this.orderList.map(item => {
					item.checked = item.accountRechargeId === value.accountRechargeId ? !isHas : item.checked;
					return item;
				});
				// 更新 checkList
				var newCheckList = [...this.checkList];
				if (isHas) {
					newCheckList.splice(checkListIndex, 1);
				} else {
					newCheckList.push(value);
				}
				// 使用 setData 更新数据
				this.checkList = newCheckList
				this.orderList = newOrderList
				this.money = newCheckList.length > 0 ? newCheckList.reduce((accumulator, item) => {
					return accumulator + Number(item.rechargeMoney);
				}, 0) : 0
			},
			//去开票
			goMakeInvoice() {
				if (this.money <= 0) {
					this.msgHint = '请先选择要开票的充值记录'
					this.msgType = 'error'
					this.$refs.msg.open()
				} else {
					const idArray = this.checkList.map(item => item.accountRechargeId)
					const ids = idArray.join(',')
					uni.redirectTo({
						url: `/pages/mine/mineAccount/mineMakeInvoice/mineMakeInvoice?money=${this.money}&ids=${ids}`
					})
				}
			},
		},
		onPullDownRefresh() {
			this.doRefreshList()
			uni.stopPullDownRefresh()
		}
	};
</script>

<style lang="scss" scoped>
	.order-list-box {
		display: flex;
		flex-direction: column;
	}

	.order-list-item {
		display: flex;
		flex-direction: row;
		background-color: white;
		border-radius: 10rpx;
		align-items: center;
		padding: 10rpx 20rpx;
	}

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

	.order-list-item-content {
		display: flex;
		flex: 1;
		flex-direction: column;
	}

	.order-item-title-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 0rpx 10rpx;
		align-items: baseline;
	}

	.pay-icon-size {
		width: 30rpx;
		height: 30rpx;
	}

	.pay-money {
		font-size: 32rpx;
		font-weight: bold;
	}

	.order-item-time-box {
		display: flex;
		flex-direction: row;
		font-size: 32rpx;
		padding: 10rpx 10rpx 0rpx 10rpx;
		color: $text-color;
		justify-content: space-between;
	}

	.time-content {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.success-time {
		font-size: 24rpx;
		padding-left: 5rpx;
		color: $text-gray-hint-color;
	}

	.icon-time::before {
		content: '';
		background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB0PSIxNzQ1ODEyODg5NzI5IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjM2MTgwIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiPjxwYXRoIGQ9Ik01MTMgMzMuMjJjLTI2NS4xIDAtNDgwIDIxNC45LTQ4MCA0ODBzMjE0LjkgNDgwIDQ4MCA0ODAgNDgwLTIxNC45IDQ4MC00ODAtMjE0LjktNDgwLTQ4MC00ODB6IG0yMDguOSA2NTIuNTljLTExLjA1IDE5LjEzLTM1LjUxIDI1LjY5LTU0LjY0IDE0LjY0TDQ3NC4xIDU4OC45M2MtMTMuMDYtNy41NC0yMC4yNi0yMS4zNC0xOS45OS0zNS40MiAwLTAuMTctMC4wMS0wLjM0LTAuMDEtMC41MVYzMjkuOTVjMC0yMi4wOSAxNy45MS00MCA0MC00MHM0MCAxNy45MSA0MCA0MHYyMDEuMjNsMTczLjE3IDk5Ljk4YzE5LjEyIDExLjA1IDI1LjY4IDM1LjUxIDE0LjYzIDU0LjY1eiIgZmlsbD0iI2RiZGJkYiIgcC1pZD0iMzYxODEiPjwvcGF0aD48L3N2Zz4=');
		background-size: cover;
		width: 32rpx;
		height: 32rpx;
		display: flex;
		flex-direction: row;
		margin-right: 10rpx;
	}


	.pay-public {
		background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB0PSIxNzQ1ODExODY1NDk3IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI4ODY4IiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiPjxwYXRoIGQ9Ik0xMjggMGg3NjhhMTI4IDEyOCAwIDAgMSAxMjggMTI4djc2OGExMjggMTI4IDAgMCAxLTEyOCAxMjhIMTI4YTEyOCAxMjggMCAwIDEtMTI4LTEyOFYxMjhhMTI4IDEyOCAwIDAgMSAxMjgtMTI4eiBtMjYzLjA0IDI0OC45NmMtMzcuNzYgMTE5LjA0LTk1LjM2IDIxNS4wNC0xNzIuMTYgMjg3LjM2bDQ4IDQxLjZjNzQuODgtNzAuNCAxMzUuMDQtMTcyLjggMTgwLjQ4LTMwNi41NmwtNTYuMzItMjIuNHogbTI0MC42NCAzMzkuMmwtNTQuNCAxOC41NmMyMy4wNCAzNC41NiA0NC44IDcyLjk2IDY1LjkyIDExNS4yLTg0LjQ4IDEyLjgtMTcyLjggMjIuNC0yNjMuNjggMjguOCA1Mi40OC03Mi4zMiAxMDQuOTYtMTYyLjU2IDE1Ni4xNi0yNzAuNzJsLTU5LjUyLTIwLjQ4Yy04MS45MiAxODEuMTItMTQ1LjI4IDI3OS4wNC0xOTAuNzIgMjkzLjc2bDEwLjg4IDU4Ljg4YzEzNi45Ni04Ljk2IDI2MC40OC0yMS43NiAzNzEuODQtMzguNCA4Ljk2IDE5LjIgMTcuMjggMzkuNjggMjYuMjQgNjAuMTZsNTYuOTYtMjUuNmExMzUxLjA0IDEzNTEuMDQgMCAwIDAtMTE5LjY4LTIyMC4xNnpNNjIwLjggMjQzLjg0bC01MS44NCAyOS40NGMzNi40OCAxMjQuOCAxMDEuMTIgMjI2LjU2IDE5My45MiAzMDUuOTJsNDMuNTItNDkuOTJjLTg4LjMyLTczLjYtMTQ5Ljc2LTE2OC45Ni0xODUuNi0yODUuNDR6IiBmaWxsPSIjRkY5NDNFIiBwLWlkPSIyODg2OSI+PC9wYXRoPjwvc3ZnPg==');
		background-size: cover;
		background-repeat: no-repeat;
	}

	.pay-wx {
		background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB0PSIxNzQ1ODExOTk2NjI4IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjUgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjMyMzcyIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiPjxwYXRoIGQ9Ik0yNjEuMDk1OTA2IDM1NC43Mzc2OTRhMy41NTggMy41NDcgMCAxIDAgODUuNzI2ODcxIDAgMy41NTggMy41NDcgMCAxIDAtODUuNzI2ODcxIDBaIiBmaWxsPSIjNEVENTE5IiBwLWlkPSIzMjM3MyI+PC9wYXRoPjxwYXRoIGQ9Ik00NjAuMjA5Njk0IDM1NC43Mzc2OTRhMy41NTcgMy41NDcgMCAxIDAgODUuNzAyNzc2IDAgMy41NTcgMy41NDcgMCAxIDAtODUuNzAyNzc2IDBaIiBmaWxsPSIjNEVENTE5IiBwLWlkPSIzMjM3NCI+PC9wYXRoPjxwYXRoIGQ9Ik04MDkuMjYxMTc2IDAgMjE1LjI4MDk0MSAwQzk2LjM4ODUxOCAwIDAuMDEyMDQ3IDk2LjA5OTM4OCAwLjAxMjA0NyAyMTQuNjMwNGwwIDU5NC4yMzMyMjRjMCAxMTguNTQzMDU5IDk2LjM3NjQ3MSAyMTQuNjMwNCAyMTUuMjY4ODk0IDIxNC42MzA0bDU5My45ODAyMzUgMEM5MjguMTUzNiAxMDIzLjUwNjA3MSAxMDI0LjUxODAyNCA5MjcuNDA2NjgyIDEwMjQuNTE4MDI0IDgwOC44NzU2NzFMMTAyNC41MTgwMjQgMjE0LjYzMDRDMTAyNC41MTgwMjQgOTYuMDk5Mzg4IDkyOC4xNTM2IDAgODA5LjI2MTE3NiAwek0zOTguNjEzMDgyIDY1NS44MTc3ODhjLTQxLjQ2NTk3NiAwLTgwLjg1OTg1OS03LjI1MjMyOS0xMTYuNDU4OTE4LTIwLjMxMTM0MS0xNy4wNDY1ODggMTEuNzk0MDcxLTgzLjM0MTU1MyA1Ni41NjA5NDEtODMuMzQxNTUzIDU2LjU2MDk0MXM2LjgxODYzNS03NC4wNTMyNzEgNi44MTg2MzUtOTcuNjg5NmMtNTguMzY4LTQzLjY0NjQ5NC05NS4wMzkyNDctMTA2LjgwOTIyNC05NS4wMzkyNDctMTc3LjA0MzU3NiAwLTEzMS43MTA0OTQgMTI4LjkzOTY3MS0yMzguNDgzNTc2IDI4OC4wMjEwODItMjM4LjQ4MzU3NiAxNDEuMzEyIDAgMjU4LjgwNjk2NSA4NC4zMjk0MTIgMjgzLjI1MDQ0NyAxOTUuNTExNzE4LTE0NC4wMTA1NDEgOS40MDg3NTMtMjU3LjI4OTAzNSAxMDcuMjkxMTA2LTI1Ny4yODkwMzUgMjI2LjczNzY5NCAwIDE4LjI4NzQzNSAyLjczNDY4MiAzNS45OTY2MTIgNy43MzQyMTIgNTMuMDE5MTA2QzQyMS4yNDk1MDYgNjU1LjIwMzM4OCA0MTAuMDA5NiA2NTUuODE3Nzg4IDM5OC42MTMwODIgNjU1LjgxNzc4OHpNODY2LjgwOTk3NiA3NjMuMTMyOTg4YzAgMTMuNDA4Mzc2LTAuNzU4OTY1IDYwLjYyMDgtMC43NTg5NjUgNjAuNjIwOHMtNDMuMjM2ODk0LTIwLjU2NDMyOS02MS4zOTE4MTItMjkuNjcxOTA2Yy0zMC43MzIwNDcgMTAuNzU4MDI0LTY0LjU3MjIzNSAxNi43MjEzMTgtMTAwLjExMTA1OSAxNi43MjEzMTgtMTQxLjQ1NjU2NSAwLTI1Ni4xMzI1MTgtOTQuMzE2NDI0LTI1Ni4xMzI1MTgtMjEwLjY2NjkxOCAwLTExNi4zMzg0NDcgMTE0LjY3NTk1My0yMTAuNjU0ODcxIDI1Ni4xMzI1MTgtMjEwLjY1NDg3MSAxNDEuNDQ0NTE4IDAgMjU2LjEyMDQ3MSA5NC4zMTY0MjQgMjU2LjEyMDQ3MSAyMTAuNjU0ODcxQzk2MC42ODA2NTkgNjY1LjgyODg5NCA5MjQuMDkzNzQxIDcyNC41MjIxNjUgODY2LjgwOTk3NiA3NjMuMTMyOTg4eiIgZmlsbD0iIzRFRDUxOSIgcC1pZD0iMzIzNzUiPjwvcGF0aD48cGF0aCBkPSJNNTgwLjAwNTY0NyA1MzEuNjAwNTY1YTIuODk2IDIuODg3IDAgMSAwIDY5Ljc3NjU2NSAwIDIuODk2IDIuODg3IDAgMSAwLTY5Ljc3NjU2NSAwWiIgZmlsbD0iIzRFRDUxOSIgcC1pZD0iMzIzNzYiPjwvcGF0aD48cGF0aCBkPSJNNzUxLjQzNTI5NCA1MzEuNjAwNTY1YTIuODk2IDIuODg3IDAgMSAwIDY5Ljc3NjU2NSAwIDIuODk2IDIuODg3IDAgMSAwLTY5Ljc3NjU2NSAwWiIgZmlsbD0iIzRFRDUxOSIgcC1pZD0iMzIzNzciPjwvcGF0aD48L3N2Zz4=');
		background-size: cover;
		background-repeat: no-repeat;
	}

	.pay-alipay {
		background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB0PSIxNzQ1ODEyMDQ2MTM5IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjMzNDEwIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiPjxwYXRoIGQ9Ik0xMDI0LjA1MTIgNzAxLjAzMDRWMTk2Ljg2NEExOTYuOTY2NCAxOTYuOTY2NCAwIDAgMCA4MjcuMTM2IDBIMTk2Ljg2NEExOTYuOTY2NCAxOTYuOTY2NCAwIDAgMCAwIDE5Ni44NjR2NjMwLjI3MkExOTYuOTE1MiAxOTYuOTE1MiAwIDAgMCAxOTYuODY0IDEwMjRoNjMwLjI3MmExOTcuMTIgMTk3LjEyIDAgMCAwIDE5My44NDMyLTE2Mi4wOTkyYy01Mi4yMjQtMjIuNjMwNC0yNzguNTI4LTEyMC4zMi0zOTYuNDQxNi0xNzYuNjQtODkuNzAyNCAxMDguNjk3Ni0xODMuNzA1NiAxNzMuOTI2NC0zMjUuMzI0OCAxNzMuOTI2NHMtMjM2LjE4NTYtODcuMjQ0OC0yMjQuODE5Mi0xOTQuMDQ4YzcuNDc1Mi03MC4wNDE2IDU1LjU1Mi0xODQuNTc2IDI2NC4yOTQ0LTE2NC45NjY0IDExMC4wOCAxMC4zNDI0IDE2MC40MDk2IDMwLjg3MzYgMjUwLjE2MzIgNjAuNTE4NCAyMy4xOTM2LTQyLjU5ODQgNDIuNDk2LTg5LjQ0NjQgNTcuMTM5Mi0xMzkuMjY0SDI0OC4wNjR2LTM5LjQyNGgxOTYuOTE1MlYzMTEuMTQyNEgyMDQuOFYyNjcuNzc2aDI0MC4xMjhWMTY1LjYzMnMyLjE1MDQtMTUuOTc0NCAxOS44MTQ0LTE1Ljk3NDRoOTguNDU3NlYyNjcuNzc2aDI1NnY0My40MTc2aC0yNTZWMzgxLjk1MmgyMDguODQ0OGE4MDUuOTkwNCA4MDUuOTkwNCAwIDAgMS04NC44Mzg0IDIxMi42ODQ4YzYwLjY3MiAyMi4wMTYgMzM2Ljc5MzYgMTA2LjM5MzYgMzM2Ljc5MzYgMTA2LjM5MzZ6TTI4My41NDU2IDc5MS42MDMyYy0xNDkuNjU3NiAwLTE3My4zMTItOTQuNDY0LTE2NS4zNzYtMTMzLjkzOTIgNy44MzM2LTM5LjMyMTYgNTEuMi05MC42MjQgMTM0LjQtOTAuNjI0IDk1LjU5MDQgMCAxODEuMjQ4IDI0LjQ3MzYgMjg0LjA1NzYgNzQuNTQ3Mi03Mi4xOTIgOTQuMDAzMi0xNjAuOTIxNiAxNTAuMDE2LTI1My4wODE2IDE1MC4wMTZ6IiBmaWxsPSIjMDA5RkU4IiBwLWlkPSIzMzQxMSI+PC9wYXRoPjwvc3ZnPg==');
		background-size: cover;
		background-repeat: no-repeat;
	}


	.confirm-btn {
		background-color: $btn-green-color;
		color: white;
		font-size: 16px;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 5px;
		text-align: center;
		width: 90vw !important;
	}

	.confirm-btn:active {
		background-color: $btn-green-color-active;
		color: white;
	}

	.money {
		color: $text-brown-color;
		font-size: 32rpx;
		display: flex;
		flex-direction: row;
		align-self: center;
		margin-bottom: 15rpx;
	}

	.price {
		color: $red-color;
	}
</style>