<template>
	<uv-navbar :fixed="false" @leftClick="$onClickLeft" bgColor="#09b4f1">
		<template v-slot:left>
			<uv-icon name="arrow-left" size="19" color="#ffffff"></uv-icon>
		</template>
		<template v-slot:center>
			<text style="color:#ffffff">{{title}}</text>
		</template>
	</uv-navbar>
	<view class="container">
		<view class="pb-2 flex px-5" style="background-color: #09b4f1;">
			<uv-search placeholder="搜索发票名称" v-model="keyword" bgColor="#ffffff" :customStyle="customStyle"
				:show-action="false" @change="onSearch"></uv-search>
		</view>
		<view class="wrap">
			<uv-tabs :list="list" @click="handleSelect" :scrollable="false"></uv-tabs>
			<scroll-view scroll-y class="sv" :style="{height:scrollHeight+'px'}" :scroll-top="scrollTop" @scroll="scroll"
				@scrolltolower="reachBottom">
				<view class="page-box">
					<block v-if="dataList.length > 0">
						<view class="client" v-for="(items, index) in dataList" :key="index">
							<view class="top">
								<view class="left uv-line-1">
									<view class="store uv-line-1">{{items.invoiceName}}</view>
								</view>
								<view class="flex align-center">
									<text
										:style="{color:items.result==1?'#4687fc':items.result==2?'#4cd964':items.result==3?'#dd524d':'#999999'}">{{fillterStatus(items.result)}}</text>
									<uv-icon name="arrow-right" :size="16"
										:color="items.result==1?'#4687fc':items.result==2?'#4cd964':items.result==3?'#dd524d':'#999999'"></uv-icon>
								</view>
							</view>
							<view class="item align-center">
								<view class="content">
									<view class="title uv-line-2">开票主体:{{items.invoiceBody}} </view>
								</view>
								<view class="right">{{timeFormats(items.createTime)}}</view>
							</view>
							<view class="bottom">
								<view class="client_time">¥{{items.amount}}</view>
								<view class="flex">
									<block>
										<view class="btn ml-1 primary" @click="onCheck(items.id)">详情</view>
									</block>
								</view>
							</view>
						</view>
						<uv-load-more :status="listStatus"></uv-load-more>
					</block>
					<uv-empty text="暂无数据" v-else margin-top="50" mode="list"></uv-empty>
				</view>
			</scroll-view>
		</view>
		<view class="floatBtn" @click="onAdd">
			<uv-icon class="pb-5" name="plus" size="20" color="#09b4f1"></uv-icon>申请发票
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'
	import {
		onLoad,
		onShow,
		onReady,
		onPageScroll
	} from '@dcloudio/uni-app'
	import {
		invoicePage
	} from '@/api/invoice'
	import {
		getDictData,
	} from '@/api/customer.js'
	import {
		formatDateTime
	} from '@/utils/util'
	const title = ref('发票')
	const keyword = ref('')
	const oldScrollTop = ref(0)
	const scrollTop = ref(-1)
	const dataList = ref([])
	const relation = ref('my')
	const list = ref(
		[{
			name: '我的发票',
			value: 'my'
		}, {
			name: '下属发票',
			value: 'sub'
		}, ]
	)

	const current = ref(0)
	const dx = ref(0)
	const pH = ref(0)
	const scrollHeight = ref(0)
	const page = ref(1)
	const pageSize = ref(10)
	const lastPage = ref(false)
	const listStatus = ref('loadmore')
	const isRefresh = ref(false)

	defineExpose({
		isRefresh
	})

	onReady(() => {
		uni.getSystemInfo({
			success(res) {
				pH.value = res.windowHeight
				let scrollH = uni.createSelectorQuery().select(".sv")
				scrollH.boundingClientRect(data => {
					let pH0 = pH.value
					scrollHeight.value = pH0 - data.top
				}).exec()
			}
		})
	})

	onLoad((e) => {
		getStatusList()
	})

	onShow(() => {
		getList()
	})

	const timeFormats = (val) => {
		if (val) {
			return formatDateTime(val)
		} else {
			return '--'
		}
	}

	// 审核
	const onCheck = (id) => {
		uni.navigateTo({
			url: '/pages/components/pages/invoice/add?id=' + id + '&type=detail'
		});
	}

	const handleSelect = (key) => {
		relation.value = key.value
		page.value = 1
		dataList.value = []
		getList()
	}

	const getList = async (isNextPage, pages) => {
		await invoicePage({
			pageNo: page.value,
			pageSize: pageSize.value,
			relation: relation.value,
			contractName: keyword.value,
		}).then(res => {
			if (res) {
				if (res.list.length < 10) {
					listStatus.value = 'nomore'
				}

				if (res.list.length == 0) {
					lastPage.value = true
				}

				if (isNextPage) {
					dataList.value = dataList.value.concat(res.list)
					return
				}

				dataList.value = res.list
			}
		})
	}

	const statusList = ref([])
	const getStatusList = () => {
		getDictData({
			type: 'bpm_process_instance_result'
		}).then(res => {
			statusList.value = res
		})
	}

	//格式化状态
	const fillterStatus = (status) => {
		if (statusList.value.length) {
			let obj = statusList.value.find(item => {
				return item.value == status
			})
			return obj == undefined ? '' : obj.name
		} else {
			return status
		}
	}


	const scroll = (e) => {
		oldScrollTop.value = e.detail.scrollTop
	}

	const reachBottom = () => {
		if (lastPage.value || listStatus.value == 'loading') return;
		listStatus.value = 'loading'
		setTimeout(() => {
			if (lastPage.value) return;
			getList(true, ++page.value)
			if (dataList.value.length >= 10) listStatus.value = 'loadmore';
			else listStatus.value = 'loading';
		}, 1200)
	}
	// 点击搜索
	const onSearch = () => {
		page.value = 1
		lastPage.value = false
		getList()
	}

	// 添加
	const onAdd = () => {
		uni.navigateTo({
			url: '/pages/components/pages/invoice/add'
		})
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #F7F7F7;
		min-height: 100vh;
	}

	.page-box {
		padding: 20rpx 20rpx 45rpx;
	}

	.client {
		width: 710rpx;
		background-color: #ffffff;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;

		.top {
			display: flex;

			.left {
				display: flex;
				align-items: center;
				flex: 1;

				.store {
					font-size: 28rpx;
					font-weight: bold;
					padding-right: 50rpx
				}
			}
		}

		.item {
			display: flex;
			margin: 20rpx 0 0;

			.content {
				flex: 1;

				.title {
					font-size: 28rpx;
					line-height: 50rpx;
				}

				.type {
					margin: 10rpx 0;
					font-size: 24rpx;
					color: $uv-tips-color;
				}
			}

			.right {
				margin-left: 10rpx;
				text-align: right;
				color: #777;
				font-size: 24rpx;
			}
		}

		.bottom {
			display: flex;
			margin-top: 20rpx;
			justify-content: space-between;
			align-items: center;

			.client_time {
				color: #777;
				font-size: 28rpx;
			}

			.btn {
				line-height: 56rpx;
				padding: 0rpx 25rpx;
				border-radius: 5px;
				font-size: 26rpx;
				text-align: center;
				color: $uv-info-dark;
			}


			.primary {
				color: #FFF;
				background-color: #09b4f1
			}
		}
	}

	.wrap {
		display: flex;
		flex-direction: column;
		width: 100%;
	}


	.floatBtn {
		font-size: 23rpx;
		bottom: 100px;
		right: 20px;
		border-radius: 5000px;
		z-index: 9;
		opacity: 1;
		width: 130rpx;
		height: 130rpx;
		position: fixed;
		display: flex;
		flex-direction: row;
		flex-direction: column;
		justify-content: center;
		background-color: #fff;
		color: #606266;
		align-items: center;
		transition: opacity 0.4s;
		border: 1px solid #dcdfe6;
	}
</style>