<template>
	<div class="page-container bg-white">
		<div class="top-div">
			<tn-tabs v-model="currentTabIndex" :bottom-shadow="false" :bar="false">
				<TnTabsItem v-for="(item, index) in tabsData" :key="index" :title="item.text"
					@click="changeStatus(item)" />
			</tn-tabs>
			<tn-button width="80px" height="32px" :plain="true" text-color="#0099ff" @click="backToIndex">
				<uni-icons type="arrow-left" size="18" color="#0099ff" style="margin-right: 5px;"></uni-icons>返回
			</tn-button>
		</div>
		<div class="tools-div">
			<div style="width: 300px;">
				<tn-input placeholder="请输入票号搜索" height="32px" v-model="searchVal">
					<template #prefix>
						<uni-icons type="search" size="18" color="#ccc"></uni-icons>
					</template>
				</tn-input>
			</div>
			<div class="tools-btn">
				<tn-button width="80px" height="32px" :plain="true" text-color="#0099ff" @click="shareToggle">
					筛选<uni-icons type="down" size="12" color="#0099ff" style="margin-left: 5px;"></uni-icons>
				</tn-button>
				<div style="width: 2vw;"></div>
				<tn-button width="80px" height="32px" text-color="#fff" @click="search">
					<uni-icons type="search" size="18" color="#fff" style="margin-right: 5px;"></uni-icons>搜索
				</tn-button>
			</div>
		</div>
		<div>
			<uni-table ref="table" :loading="loading" border stripe emptyText="暂无更多数据">
				<uni-tr>
					<uni-th width="150" align="center">时间</uni-th>
					<uni-th width="100" align="center">票号</uni-th>
					<uni-th width="100" align="center">姓名</uni-th>
					<uni-th width="220" align="center">身份证</uni-th>
					<uni-th width="180" align="center">业务类型</uni-th>
					<uni-th width="180" align="center">办理状态</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-td align="center">{{ item.time }}</uni-td>
					<uni-td align="center">{{ item.ticketNumber }}</uni-td>
					<uni-td align="center">{{ item.customerName }}</uni-td>
					<uni-td align="center">{{ item.idCard }}</uni-td>
					<uni-td align="center">{{ item.businessType }}</uni-td>
					<uni-td align="center">{{ item.status }}</uni-td>
				</uni-tr>
			</uni-table>
			<div class="pagination-div">
				<p>共<span class="page-span">{{ total }}</span>条数据，每页显示<span class="page-span">{{ pageSize }}</span>条</p>
				<view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize" :current="pageCurrent"
						:total="total" @change="change" /></view>
			</div>
		</div>
		<uni-popup ref="share" type="share" safeArea backgroundColor="#fff">
			<div class="popup-div">
				<div class="fiter-items">
					<TnCheckboxGroup v-model="selectValue">
						<TnCheckbox v-for="item in bizData" :label="item.uid" size="lg" :border="true">{{ item.name }}
						</TnCheckbox>
					</TnCheckboxGroup>
				</div>
				<div class="filter-btn">
					<tn-button width="80px" height="32px" :plain="true" text-color="#999" border-color="#999"
						@click="resetSelectValue">
						重置
					</tn-button>
					<div style="width: 2vw;"></div>
					<tn-button width="80px" height="32px" text-color="#fff" @click="closeShareToggle">
						确定
					</tn-button>
				</div>
			</div>
		</uni-popup>
	</div>
</template>
<script setup lang="ts">
	import { ref } from 'vue'
	import TnTabs from '@/uni_modules/tuniaoui-vue3/components/tabs/src/tabs.vue'
	import TnTabsItem from '@/uni_modules/tuniaoui-vue3/components/tabs/src/tabs-item.vue'
	import TnCheckbox from '@/uni_modules/tuniaoui-vue3/components/checkbox/src/checkbox.vue'
	import TnCheckboxGroup from '@/uni_modules/tuniaoui-vue3/components/checkbox/src/checkbox-group.vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { getdailyEntry, getBizList } from '@/api/index.js'

	onLoad(() => {
		getData()
	})

	/*tabs变量*/
	let currentTabIndex = ref(1)
	let tabsData = [
		{
			text: '全部',
			status: '-1'
		},
		{
			text: '待办理',
			status: '0'
		},
		{
			text: '办理中',
			status: '4'
		},
		{
			text: '已办理',
			status: '5,6'
		}
	]

	/*表格变量*/
	let searchVal = ref('')
	const tableData = ref<any[]>([])
	// 每页数据量
	let pageSize = ref(10)
	// 当前页
	let pageCurrent = ref(1)
	// 数据总量
	let total = ref(0)
	let loading = ref(false)
	// 数据类型
	let statusType = ref('0')

	/*弹窗模块*/
	const share = ref(null)
	// 业务列表
	const bizData = ref<any[]>([])
	// 已选业务列表
	const selectValue = ref<Number[]>([])

	//分页触发
	const change = (e) => {
		// $refs.table.clearSelection()
		// console.log(e)
		pageCurrent.value = e.current
		getData()
	}

	const getData = async () => {
		const params = {
			page: pageCurrent.value,
			size: pageSize.value,
			statusList: statusType.value,
			bizUid: selectValue.value.join(','),
			keyword: searchVal.value
		}

		console.log(params)

		try {
			const res = await getdailyEntry(params)
			loading.value = true

			if (res && res.data) {
				total.value = res.total || 0
				pageCurrent.value = res.page || 1
				// 修复：直接赋值给响应式变量
				tableData.value = res.data.map((item : any) => ({
					time: item.time || '--',
					ticketNumber: item.ticketNumber || '--',
					customerName: item.customerName || '--',
					idCard: item.idCard || '--',
					businessType: item.businessType || '--',
					status: item.status || 0
				}))
			} else {
				tableData.value = []
				total.value = 0
			}
		} catch (error) {
			console.log('获取数据失败！', error)
			uni.showToast({
				title: '数据加载失败',
				icon: 'none'
			})
			tableData.value = []
		} finally {
			loading.value = false
		}
	}

	const search = () => {
		pageCurrent.value = 1
		getData()
	}

	const shareToggle = async () => {
		try {
			const res = await getBizList()
			console.log('业务列表:', res)
			bizData.value = Array.isArray(res) ? res : []
			share.value?.open()
		} catch (error) {
			console.error('获取业务列表失败:', error)
			uni.showToast({
				title: '获取筛选选项失败',
				icon: 'none'
			})
		}
	}
	
	const resetSelectValue = () =>{
		selectValue.value = []
	}

	const closeShareToggle = () => {
		share.value?.close()
	}

	const changeStatus = (item) => {
		console.log(item)
		statusType.value = item.status
		getData()
	}

	const backToIndex = () => {
		uni.navigateTo({
			url: '/pages/index/index'
		})
	}
</script>

<style lang="scss">
	.bg-white {
		background-color: #fff;
	}

	.top-div {
		display: flex;
		justify-content: space-between;
		padding: 6vh 20px 1vh 20px;
	}

	.tools-div {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 20px;

		.tools-btn {
			display: flex;
		}
	}

	.pagination-div {
		display: flex;
		justify-content: space-between;
		padding: 10px 20px;

		.page-span {
			display: inline;
			color: #0099ff;
			margin: 0 4px;
		}
	}

	.uni-group {
		display: flex;
		align-items: center;
	}

	.popup-div {
		.fiter-items {
			padding: 50px 300px;
		}

		.filter-btn {
			height: 6vh;
			padding: 10px 0;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;

		}
	}
</style>