<template>
	<view class="content">
		<headerTopsTips></headerTopsTips>
		<uni-nav-bar left-icon="left" title="余额明细" backgroundColor="#e6eafa" @clickLeft="handlegoback" />
		<view style="border-top: 1px solid #787878;"></view>
		<!--  -->
		<view class="segmented">
			<view :class="index == current?  'segmenteditems isactive': 'segmenteditems' "
				v-for="(item,index) in segmenteditems_list" :key="index" @click="onClickItem(index)">
				{{item}}
			</view>
		</view>
		<!--  -->
		<view class="current_content">
			<view class="item_con" v-for="(item,index) in 13" :key="index">
				<view class="left_data">
					<text>行程消费</text>
					<text>2017-05-23 22:16:58</text>
				</view>
				<view class="right_data">
					1元
				</view>
			</view>
		</view>
		<view class="pagination">
			<view class="btn-view">
				<view>
					<text
						class="example-info">当前页：{{ current_page.pageNo }}，数据总量：{{ current_page.total }}条，每页数据：{{ current_page.pageSize }}</text>
				</view>
			</view>
			<uni-pagination :current="current_page.pageNo" :total="current_page.total" title="标题文字" :show-icon="true"
				@change="change_page" /> 
		</view>
	</view> 
</template>

<script setup>
	//  type 类型 0 消费 1 充值
	import headerTopsTips from '@/pages/components/header_tops_tips.vue'
	// import detailApi from '@/sheep/api/home/detail';
	import {
		ref,
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app';
	onLoad(() => {
		getlist()
	})
	const current = ref(0)
	const current_page = ref({ 
		pageNo: 1,
		pageSize: 6,
		total: 20
	})
	const segmenteditems_list = ref([
		'消费明细', '充值明细'
	])
	const activeColor = '#000'

	function onClickItem(data) {
		if (current.value !== data) { 
			current.value = data
		} 
	}

	function handlegoback() {
		uni.navigateBack()
	}
	async function getlist() {
		const response = await detailApi.searchCart({ 
			pageNo: 1,
			pageSize: 6,
			type: 0 
		})
		console.log(response, 'response')  
		current_page.value.total = response.data.total
	}

	function change_page(e) {
		console.log(e, 'e')
	}
</script>

<style lang="scss" scoped>
	.content {
		background: #fff;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.segmented {
		padding: 0 30rpx;
		box-sizing: border-box;
		display: flex;
		border-bottom: 1px solid #ccc;

		.segmenteditems {
			flex: 1;
			line-height: 90rpx;
			text-align: center;
			color: #6b6b6b;
			font-size: 14px;
		}

		.isactive {
			color: #000;
			font-weight: 600;
			border-bottom: 2px solid #000;
		}
	}

	.current_content {
		height: calc(100% - 500rpx);
		// background: skyblue;
		width: 100%;
		// background: #000;
		padding: 10rpx 30rpx;
		box-sizing: border-box;
		overflow: hidden;
		overflow-y: scroll;

		.item_con {
			width: 100%;
			display: flex;
			border-bottom: 1px solid #6b6b6b;

			// align-items: center;
			>view {
				flex: 1;
				height: 120rpx;
			}

			.left_data {
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				align-items: flex-start;

				text {
					font-size: 14px;
				}

				>text:last-child {
					font-size: 12px;
					color: #6b6b6b;
				}
			}

			.right_data {
				font-size: 16px;
				font-weight: 600;
				line-height: 120rpx;
				text-align: end;
			}
		}
	}

	.pagination {
		padding: 10rpx 30rpx;
		text-align: center;
		.example-info {
			font-size: 12px;
		}
	}
</style>