<template>
	<view class="page-container">
		<view class="condition-box">
			<view class="condition-input-box">
				<view class="condition-input-container">
					<icon class="ml-20" type="search" size="20"></icon>
					<input class="condition-input-text" :value="keywords" @input="inputKeywords"
						@confirm="doSearchKeyWord" placeholder-style="font-size:28rpx;" type="text"
						confirm-type="search" placeholder="项目名称" />
					<view class="icon-clear size-32 mr-10" v-if="keywords != ''" @click="clearSearch"></view>
				</view>
				<view class="add-btn ml-20" @click="openInvoiceInfo">开票信息</view>
			</view>
		</view>
		<!-- #ifdef MP-TOUTIAO || MP-WEIXIN -->
		<ContainerLoading :loadingVisible="loadingState" style="height: 85vh;margin-top: 120rpx;"
			@doRefresh="doRefreshList">
		<!-- #endif -->
			<!-- #ifndef MP-TOUTIAO || MP-WEIXIN -->
			<ContainerLoading :loadingVisible="loadingState" style="height: 85vh;margin-top: 80rpx;"
				@doRefresh="doRefreshList">
			<!-- #endif -->
				<scroll-view scroll-y style="height: 85vh;padding-bottom: 40px;" :lower-threshold="100"
					refresher-background="#FFFFFF00" @scrolltolower="doLoadMore">
					<view class="order-box">
						<block v-for="(item,index) in recordList" :key="index">
							<view class="order-item">
								<view class="record-title-box">
									<view :class="['record-title-status',invoiceStatusColor(item.invoiceStatus)]">
										{{invoiceStatus(item.invoiceStatus)}}
									</view>
									<view @click="openDetail" :data-value="item"
										class="record-title-name multiple-2-ellipsis">
										{{item.invoiceName}}
									</view>
									<view class="record-options">
										<view v-if="item.invoiceStatus=='-1' || item.invoiceStatus=='0'"
											class="icon-edit-blue size-48" @click="doUpdate" :data-value="item">
										</view>
										<view v-if="item.invoiceStatus =='1'" class="icon-cancel-yellow size-48"
											@click="cancelRecord" :data-value="item"></view>
									</view>
								</view>
								<view @click="openDetail" :data-value="item" class="record-number mt-10">纳税人识别号:
									{{item.invoiceNumber}}
								</view>
								<view @click="openDetail" :data-value="item" class="record-bottom-box mt-10">
									<view class="record-time icon-time">{{item.gmtCreate}}</view>
									<rich-text style="color: red;"
										:nodes="moneyTxt(10,14,item.invoiceRechargeMoney)"></rich-text>
								</view>
							</view>
						</block>
						<uni-load-more :status="hasMore"></uni-load-more>
					</view>
				</scroll-view>
			</ContainerLoading>
			<view class="bottom-fixed-footer">
				<view class="bottom-btn-green" @click="openMake">去开票</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 ContainerLoading from '@/components/container-loading.vue'
	import InvoiceApi from '@/common/js/net/InvoiceApi.js'
	import {
		invoiceStatus,
		invoiceStatusColor,
		moneyTxt
	} from '@/common/js/conver.js'
	export default {
		components: {
			ContainerLoading
		},
		setup() {},
		data() {
			return {
				keywords: '',
				pageData: {
					page: 1,
					rows: 10,
					keywords: ''
				},
				msgShow: false,
				msgHint: '',
				msgType: 'error',
				loadingState: 'loading',
				listRefreshTrig: false,
				isLoadMore: false,
				hasMore: 'more',
				recordList: [], //开票记录
				needRefresh: false,
			};
		},
		onLoad(options) {
			uni.setNavigationBarTitle({
				title: "发票管理",
			});
			uni.setNavigationBarColor({
				frontColor: "#000000",
				backgroundColor: "#F0F0F0",
				animation: {
					duration: 500,
					timingFunc: "easeIn",
				},
			});
			this.doRefreshList()
		},
		methods: {
			invoiceStatus,
			invoiceStatusColor,
			moneyTxt,
			inputKeywords(e) {
				this.keywords = e.detail.value
			},
			doSearchKeyWord() {
				this.doRefreshList()
			},
			clearSearch() {
				this.keywords = ''
				this.doRefreshList()
			},
			//开票信息
			openInvoiceInfo() {
				uni.navigateTo({
					url: '/pages/mine/mineAccount/invoiceInfo/invoiceInfo',
				})
			},
			//去修改
			doUpdate(e) {
				const item = e.currentTarget.dataset.value
				const params = JSON.stringify(item)
				uni.navigateTo({
					url: '/pages/mine/mineAccount/mineMakeInvoice/mineMakeInvoice?bean=' + params,
				})
			},
			openDetail(e) {
				const item = e.currentTarget.dataset.value
				const params = JSON.stringify(item)
				uni.navigateTo({
					url: '/pages/mine/mineAccount/invoiceDetail/invoiceDetail?bean=' + params
				})
			},
			//取消开票
			cancelRecord(e) {
				const item = e.currentTarget.dataset.value
				const _self = this
				uni.showModal({
					title: '警告',
					content: '请问您是否真的想要取消此次开票操作?',
					success: (res) => {
						if (res.confirm) {
							_self.doCancelInvoiceRecord(item)
						}
					}
				})
			},
			//取消开票
			doCancelInvoiceRecord(item) {
				const _self = this
				uni.showLoading({
					title: '取消中...',
				})
				InvoiceApi.doCancelInvoiceRecord(item.invoiceRechargeId)
					.then(res => {
						uni.hideLoading()
						console.log(res)
						_self.msgHint = '取消成功'
						_self.msgType = 'success'
						_self.$refs.msg.open()
						_self.doRefreshList()
					})
					.catch(err => {
						uni.hideLoading()
						_self.msgHint = err.msg ? err.msg : '取消出错了,请稍后重试'
						_self.msgType = 'error'
						_self.$refs.msg.open()
					})
			},
			//去开票
			openMake() {
				uni.navigateTo({
					url: '/pages/mine/mineAccount/minePayOrder/minePayOrder'
				})
			},
			doRefreshList() {
				console.log('正在刷新...')
				const _self = this
				_self.loadingState = 'loading'
				_self.hasMore = 'more'
				_self.pageData.page = 1
				_self.pageData.keywords = _self.keywords
				_self.doGetInvoiceRecordList(true)
			},
			doLoadMore() {
				//判断是否正在加载中 与是否存在更多数据
				const _self = this
				if (_self.isLoadMore || _self.hasMore == 'noMore') {
					return
				}
				_self.hasMore = 'loading'
				_self.pageData.page = ++_self.pageData.page
				_self.pageData.keywords = _self.keywords
				_self.doGetInvoiceRecordList(false)
			},
			doGetInvoiceRecordList(isRefresh) {
				const _self = this
				_self.recordList = isRefresh ? [] : _self.recordList
				_self.loadingState = isRefresh ? 'loading' : ''
				InvoiceApi.doGetInvoiceRecordList(_self.pageData)
					.then(res => {
						console.log(res)
						var status = 'success'
						status = res.rows && res.rows.length > 0 ? 'success' : 'empty'
						_self.loadingState = isRefresh ? status : ''
						_self.recordList = _self.recordList.concat(res.rows)
						_self.hasMore = _self.recordList.length < res.total ? 'more' : 'noMore'
						_self.isLoadMore = false
					})
					.catch(err => {
						_self.loadingState = 'error'
						_self.hasMore = 'more'
						_self.isLoadMore = false
					})
			},
		},
		onPullDownRefresh() {
			this.doRefreshList()
			uni.stopPullDownRefresh()
		}
	};
</script>

<style lang="scss" scoped>
	.add-btn {
		border-radius: 4px;
		background-color: $btn-green-color;
		color: rgba(255, 255, 255, 1);
		font-size: 28rpx;
		text-align: center;
		text-align: center;
		font-family: PingFangSC-regular;
		padding: 5px 10px;
	}

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




	.order-box {
		display: flex;
		flex-direction: column;
	}


	.order-item {
		display: flex;
		flex-direction: column;
		background-color: white;
		border-radius: 10rpx;
		padding: 10rpx 20rpx;
	}

	.record-title-box {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.record-options {
		display: flex;
		flex-direction: row;
	}

	.options-btn {
		font-size: 24rpx;
		line-height: 24rpx;
		height: 24rpx;
		padding: 10rpx 20rpx;
		border-radius: 5rpx;
	}

	.red {
		background-color: $bg-red-color;
		color: rgba(255, 255, 255, 1);
	}

	.green {
		background-color: $bg-green-color;
		color: rgba(255, 255, 255, 1);
	}

	.green:active {
		background-color: $bg-green-deep-color;
		color: rgba(255, 255, 255, 1);
	}

	.options-btn:nth-of-type(n+2) {
		margin-left: 10rpx;
	}

	.red:active {
		background-color: $red-color;
	}

	.record-title-status {
		font-size: 20rpx;
		line-height: 24rpx;
		height: 24rpx;
		text-align: center;
		padding: 5rpx;
		min-width: 80rpx;
		border-radius: 5rpx;
		margin-right: 15rpx;
	}

	.col-yellow {
		background-color: $primary-color;
		color: $text-color;
	}

	.col-gray {
		background-color: $bg-gray-deep-color;
		color: $text-gray-desc-color;
	}

	.col-green {
		background-color: $bg-green-color;
		color: $text-brown-color;
	}

	.col-red {
		background-color: $bg-red-color;
		color: $text-brown-color;
	}

	.record-title-name {
		font-size: 32rpx;
		color: $text-color;
		font-weight: bold;
		flex: 1;
	}

	.record-number {
		font-size: 24rpx;
		color: $text-gray-desc-color;
		margin-left: 10rpx;
	}

	.record-time {
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 24rpx;
	}

	.record-bottom-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

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

	.order-item:nth-of-type(n+2) {
		margin-top: 15px;
	}

	.contact-desc {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 15px;
		align-items: center;
	}

	.contact-icon {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.name {
		line-height: 23rpx;
		color: $text-color;
		font-size: 32rpx;
		text-align: left;
		font-weight: bold;
		font-family: SourceHanSansSC-black;
	}

	.service-desc {
		padding: 0px 15px 15px 15px;
		line-height: 20px;
		color: $text-color;
		font-size: 14px;
		text-align: left;
		font-family: SourceHanSansSC-regular;
	}

	.edit {
		line-height: 20px;
		border-radius: 4px;
		background-color: $btn-green-color;
		color: rgba(255, 255, 255, 1);
		font-size: 28rpx;
		text-align: center;
		font-family: PingFangSC-regular;
		padding: 5rpx 10rpx;
	}

	.del {
		line-height: 20px;
		border-radius: 4px;
		background-color: $btn-red-color;
		color: rgba(255, 255, 255, 1);
		font-size: 28rpx;
		text-align: center;
		font-family: PingFangSC-regular;
		padding: 5rpx 10rpx;
		margin-left: 5px;
	}

	.del:active {
		background-color: $btn-red-color-active;
	}

	.options-box {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

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


	.form-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		font-size: 14px;
		width: 100vw;
	}

	.form-item {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		width: 80vw;
		padding: 10px;
	}

	.form-item-title {
		flex: .3;
		font-size: 14px;
		color: $text-color;
		font-weight: 500;
		text-align: left;
	}

	.form-item-title:not(.no-after)::before {
		content: "*";
		color: $red-color;
		font-size: 14px;
		margin-left: 1px;
		text-align: center;
	}

	.form-item-content {
		flex: 1;
		text-align: right;
	}
</style>