<template>
	<view>
		<u-navbar title="提现记录" title-color="#101010"></u-navbar>
		<view class="tabs">
			<u-picker v-model="tabsFrom.show2" :default-selector="[tabsFrom.show2Index]" mode="selector"
				:range="tabsFrom.selector2" range-key="label" @confirm="selector2confirm"></u-picker>
				
			<u-picker title="日期选择" v-model="tabsFrom.show1" :defaultTime="tabsFrom.show1Index"
				mode="time" :params="params" @confirm="selector1confirm"></u-picker>

			<view class="tabsItem" @click="tabsFrom.show1=!tabsFrom.show1">{{tabsFrom.show1Text}} <u-icon
					name="arrow-up" v-if="tabsFrom.show1"></u-icon><u-icon v-else name="arrow-down"></u-icon></view>

			<view v-if="0" class="tabsItem" @click="tabsFrom.show3=!tabsFrom.show3">
				{{tabsFrom.show3Text}} <u-icon name="arrow-up" v-if="tabsFrom.show3"></u-icon><u-icon v-else
					name="arrow-down"></u-icon></view>


			<view class="tabsItem" @click="tabsFrom.show2=!tabsFrom.show2">{{tabsFrom.show2Text}} <u-icon
					name="arrow-up" v-if="tabsFrom.show2"></u-icon><u-icon v-else name="arrow-down"></u-icon></view>
		</view>
		<view class="main">
		
			<view class="line" v-for="(item,i) in list"    >
				<view class="title name" v-if="0">
					<view class="nameA">
						2025年2月

					</view>
					<view class="nameB">
						共提现 1000.00

					</view>
				</view>
				<view class="item" @click="gotoItem('/pages/withdrawal/info?id='+item.id)">
					<view class="body">
						<view class="name name1">
							<view class="nameA">
								{{item.title}}<span  :class="' statusN status'+item.status" >({{item.statusText}})</span> 
							</view>
							<view class="nameB">
								{{item.withdrawalAmount}}

							</view>
						</view>
						<view class=" name name2">
							<view class="nameA">
								{{item.ownerCompanyName}}

							</view>
							<view class="nameB">
								{{item.createDate}}

							</view>
						</view>
					</view>
					<view class="goto">
						<u-icon name="arrow-right" color="#ACACAC"></u-icon>
					</view>
				</view>
			</view>
			<u-divider :isnone="list.length==0"  nonetext="无记录"
				border-color="#CFD2D5">已经到底了</u-divider>
		</view>

	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/withdrawal.js'

	export default {
		data() {
			return {
				list: [],
				recordsTotal: 0,
				companyInfo: {},
				formData: {
					pageIndex: 1,
					pageSize: 20,
				},
				params:{
					year: true,
										month: false,
										day: false,
										hour: false,
										minute: false,
										second: false
				},
				tabsFrom: {
					show3: false,
					show3Index: 0,
					show1: false,
					show1Index: 0,
					show2Index: '',
					show2: false,
					show1Text: "全部年份",
					show2Text: "全部状态",
					show3Text: "全部园区",
					selector1: [{
						label: '全部类型',
						value: '',
					}, ],
					selector2: [{
						label: '全部状态',
						value: '',
					},{
						label: '未签字',
						value: '0',
					}, {
						label: '已签字',
						value: '1',
					}, {
						label: '财务已审核',
						value: '2',
					},  ],
					selector3: [{
						label: '全部类型',
						value: '',
					}, ]
				},
			};
		},
		onLoad() {
			this.tabsFrom.show1Index=new Date().getFullYear()+"-1-1"
		},
		onReady() {
			this.companyInfo = this.carhelp.getPersonInfoPlus().companyInfo
			console.log(this.companyInfo)
			this.getList()
		},
		onReachBottom() {
			if (this.list.length < this.recordsTotal) {
				this.myLoadmore();
			}
		},
		onShow(){
			
		},
		methods: {
			selector1confirm(e){
				console.log(e)
				this.tabsFrom.show1Text=e.year+"年"
				this.tabsFrom.show1Index=e.year+"-1-1"
				this.formData.year=e.year
				this.getList(1)
			},
			selector2confirm(e){
				var item=this.tabsFrom.selector2[e[0]]
				
				this.tabsFrom.show2Text=item.label
				this.tabsFrom.show2Index=e[0]
				this.formData.status=item.value
				this.getList(1)
				
				console.log(e)
			},
			init(){
				this.getList(1)
			},
			gotoItem(url){
				uni.navigateTo({
					url: url,
					events: {
						refreshData: () => {
							this.init()
						}
					}
				})
			},
			getList(bl) {
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				if (bl) {
					this.list = [];
					this.formData.pageIndex = 1;
				}
				API.recordList(this.formData).then((res) => {
					uni.hideLoading();
					this.list = [
						...this.list,
						...res.data.data
					];
					this.recordsTotal = res.data.recordsTotal;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})

			},
			myLoadmore() {
				this.formData.pageIndex += 1;
				this.getList();
			},
		}
	}
</script>

<style lang="scss">
	.tabs {

		height: 96rpx;
		line-height: 96rpx;
		background-color: #fff;
		border-top: 1px solid rgba(241, 241, 241, 1);
		    border-bottom: 1px solid #E5E7EA;
		display: flex;
		justify-content: space-around;

	}

	.main {
		.line {
			.name {
				display: flex;
				justify-content: space-between;
			}

			.title {
				padding: 24rpx;
			}

			.item {
				padding: 24rpx 32rpx;
				background-color: #fff;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.goto {
					margin-left: 8rpx;
				}

				.body {
					width: 100%;

					.name1 {
						.nameA {
							color: rgba(51, 51, 51, 1);
							font-size: 28rpx;

						}
						.status0 {
							color: #FF9800;
						}
						
						.status1 {
							color: #4CAF50;
						}

						.nameB {
							color: rgba(51, 51, 51, 1);
							font-size: 40rpx;
							font-weight: bold;
						}
					}

					.name2 {
						.nameA {
							color: rgba(51, 51, 51, 1);

						}

						.nameB {
							color: rgba(119, 119, 119, 1);

						}

						font-size: 24rpx;
					}
				}


			}
		}
	}
</style>