<template>
	<view class="content">
		<view class="content-banner">
			<view class="" v-for="(item,i ) in list" :key="i" @click="apparent(i)">
				<view class="banner-name" :style="{'color':i==num?'#3274F9':''}">{{item.name}}</view>
				<view class="banner-xian" v-if='i==num'></view>
			</view>

		</view>
		<view class="content-middle">

			<view class="content-middle-one" v-if="num==0">
				<view class="middle-one" v-for="(item,k) in list2" @click="tian(item,num)">
					<liu-swipe-action :index="k" @clickItem="clickItem" :btnList='btnList'>


						<view class="middle-one-title">
							<view class="one-titlea">
								<view class="name">
									{{item.name}}
								</view>
								<view class="parment">
									{{item.name1}}
								</view>
							</view>

							<view class="one-titleb"
								:style="{'color':item.check_status==0?'#000':item.check_status==1?'#dddddd':item.check_status==2?'#34A853':item.check_status==3?'#F9AA32':'#F02828'}">
								<text v-if='item.check_status==0'>待审核</text>
								<text v-if='item.check_status==1'>审核中</text>
								<text v-if='item.check_status==2'>审核通过</text>
								<text v-if='item.check_status==3'>审核不通过</text>
								<text v-if='item.check_status==4'>撤销审核</text>
							</view>
						</view>
						<view class="middle-one-time">类型：{{item.flow_type}}</view>
						<view class="middle-one-time">开始时间{{item.start_time}}</view>
						<view class="middle-one-time">结束时间{{item.end_time}}</view>
					</liu-swipe-action>
					<!-- 	<view class="middle-edit" @click="editpart(item)">
						编辑
					</view>
					<view class="middle-delete" @click="clickItem(item)">
						删除
					</view> -->
				</view>
			</view>
			<view class="content-middle-one" v-if="num==1">
				<view class="middle-one" v-for="(item,k) in list2" @click="tian(item,num)">
					<liu-swipe-action :index="k" @clickItem="clickItem" :btnList='btnList'>


						<view class="middle-one-title">
							<view class="one-titlea">
								<view class="name">
									{{item.check_user}}
								</view>
								<view class="parment">
									{{item.code}}
								</view>
							</view>

							<view class="one-titleb"
								:style="{'color':item.check_status==0?'#000':item.check_status==1?'#dddddd':item.check_status==2?'#34A853':item.check_status==3?'#F9AA32':'#F02828'}">
								<text v-if='item.check_status==0'>待审核</text>
								<text v-if='item.check_status==1'>审核中</text>
								<text v-if='item.check_status==2'>审核通过</text>
								<text v-if='item.check_status==3'>审核不通过</text>
								<text v-if='item.check_status==4'>撤销审核</text>
								<text v-if='item.check_status==5'>已开具</text>
							</view>
						</view>
						<view class="middle-one-time">报销部门：{{item.department}}</view>
						<view class="middle-one-time">入账月份：{{item.income_month}}</view>
						<view class="middle-one-time">报销人审核人：{{item.admin_name}}</view>
					</liu-swipe-action>
					<!-- 	<view class="middle-edit" @click="editpart(item)">
						编辑
					</view>
					<view class="middle-delete" @click="clickItem(item)">
						删除
					</view> -->
				</view>
			</view>
			<view class="content-middle-one" v-if="num==2">
				<view class="middle-one" v-for="(item,k) in list2" @click="tian(item,num)">
					<liu-swipe-action :index="k" @clickItem="clickItem" :btnList='btnList'>

						<view class="middle-one-title">
							<view class="one-titlea">
								<view class="name">
									{{item.name}}
								</view>
								<view class="parment">
									{{item.name1}}
								</view>
							</view>
						
							<view class="one-titleb"
								:style="{'color':item.check_status==0?'#000':item.check_status==1?'#dddddd':item.check_status==2?'#34A853':item.check_status==3?'#F9AA32':'#F02828'}">
								<text v-if='item.check_status==0'>待审核</text>
								<text v-if='item.check_status==1'>审核中</text>
								<text v-if='item.check_status==2'>审核通过</text>
								<text v-if='item.check_status==3'>审核不通过</text>
								<text v-if='item.check_status==4'>撤销审核</text>
								<text v-if='item.check_status==5'>已开具</text>
								<text v-if='item.check_status==10'>已作废</text>
						
							</view>
						</view>
						<view class="middle-one-time">类型：{{item.flow_type}}</view>
						<view class="middle-one-time">开票金额:{{item.amount}}</view>
						<view class="middle-one-time">审核人{{item.check_user}}</view>
					</liu-swipe-action>

					<!-- <view class="middle-edit" @click="editpart(item)">
						编辑
					</view>
					<view class="middle-delete" @click="clickItem(item)">
						删除
					</view> -->
				</view>
			</view>
		</view>
		<u-empty v-if="loadConfig.status=='nomore'&& list2.length==0" text="没有信息"
			icon="/static/empty/data.png"></u-empty>
		<u-loadmore v-else :status="loadConfig.status" :loading-text="loadConfig.loadingText"
			:loadmore-text="loadConfig.loadmoreText" :nomore-text="loadConfig.nomoreText" />
	</view>
</template>

<script>
	import {
		Toast
	} from '@/libs/uniApi.js'

	import {

		approvelist,
		apexpenselist,
		invoicelist

	} from '@/api/oa.js'

	export default {

		data() {
			return {
				title: 'Hello',
				statusBarHeight: 0,
				list: [{
						name: '待审审批',
						value: 8
					}, {
						name: '待审报销',
						value: 8
					},
					{
						name: '待审发票',
						value: 8
					}
				],
				list2: [],
				num: 0,
				btnList: [],
				loadConfig: {
					page: 1,
					limit: 5,
					loadingText: '努力加载中',
					loadmoreText: '轻轻上拉',
					nomoreText: '我也是有底线的~~',
					status: 'loadmore'
				},

			}
		},
		onLoad() {

		},
		onShow() {
			if (this.num == 0) {
				this.initList()
			} else if (this.num == 1) {
				this.initList1()
			} else {
				this.initList2()
			}
		},
		onReachBottom() {
			if (this.num == 0) {
				this.getlist()
			} else if (this.num == 1) {
				this.getlist1()
			} else {
				this.getlist2()
			}
		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh()
		},
		methods: {
			apparent(index) {
				this.num = index
				if (index == 0) {
					this.initList()
				} else if (index == 1) {
					this.initList1()
				} else {
					this.initList2()
				}
			},
			async initList() {
				this.loadConfig.page = 1;
				this.loadConfig.status = "loadmore";
				this.list2 = [];
				await this.getlist()
			},
			async initList1() {
				this.loadConfig.page = 1;
				this.loadConfig.status = "loadmore";
				this.list2 = [];
				await this.getlist1()
			},
			async initList2() {
				this.loadConfig.page = 1;
				this.loadConfig.status = "loadmore";
				this.list2 = [];
				await this.getlist2()
			},
			async getlist() {
				if (this.loadConfig.status == "nomore") return;
				this.loadConfig.status = "loading"
				let res = await approvelist({
					page: this.loadConfig.page,
					limit: this.loadConfig.limit,
					status:1
					// keyword: this.keyword
				})

				this.loadConfig.status = "loadmore"
				if (res.data.data.length < this.loadConfig.limit) {
					this.loadConfig.status = "nomore"
				} else {
					this.loadConfig.page++;
				}
				this.list2 = [...this.list2, ...res.data?.data]

				//console.log(this.list2)
			},

			async getlist1() {
				if (this.loadConfig.status == "nomore") return;
				this.loadConfig.status = "loading"
				let res = await apexpenselist({
					page: this.loadConfig.page,
					limit: this.loadConfig.limit,
					status:1
					// keyword: this.keyword
				})

				this.loadConfig.status = "loadmore"
				if (res.data.data.length < this.loadConfig.limit) {
					this.loadConfig.status = "nomore"
				} else {
					this.loadConfig.page++;
				}
				this.list2 = [...this.list2, ...res.data?.data]


			},
			async getlist2() {
				if (this.loadConfig.status == "nomore") return;
				this.loadConfig.status = "loading"
				let res = await invoicelist({
					page: this.loadConfig.page,
					limit: this.loadConfig.limit,
						status:1
					// keyword: this.keyword
				})

				this.loadConfig.status = "loadmore"
				if (res.data.data.length < this.loadConfig.limit) {
					this.loadConfig.status = "nomore"
				} else {
					this.loadConfig.page++;
				}
				this.list2 = [...this.list2, ...res.data?.data]
			},
			//添加项目
			adddepart() {
				uni.navigateTo({
					url: '/pages/addquest/index?type=' + 0
				})
			},
			//删除弹窗
			clickItem(data) {
				// //console.log(e)

				if (data.id == 2) {
					uni.showModal({
						content: '确定要删除吗',
						success: (e) => {
							if (e.confirm) {
								this.deleteDepartment(data.id)
							}
						}
					})

				} else {
					this.editpart(this.list2[data.index])
				}

			},

			//删除
			async deleteDepartment(id) {

				const res = await deleteexpenseflow({
					id: id
				})

				if (res.code == 0) {
					this.loadConfig.status = "loading"
					this.initList()

				}
				Toast(res.msg);

			},
			//编辑项目
			editpart(item) {
				uni.navigateTo({
					url: '/pages/reimbursementapplication/index??type=' + item.type
				})
			},
			tian(item,num) {
				if (num == 0) {
					uni.navigateTo({
						url: '/pages/leave_request/index?type=' + item.id
					})
				} else if (num == 1) {
					uni.navigateTo({
						url: '/pages/reimbursementapplication/handle?type=' + item.id 
					})
				} else {
					uni.navigateTo({
						url: '/pages/invoice/handle?type=' + item.id
					})
				}

			}
		}
	}
</script>

<style lang='scss'>
	.content-banner {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 40rpx;

		.banner-name {
			font-size: 32rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
		}

		.banner-xian {
			width: 70rpx;
			height: 5rpx;
			margin: 10rpx auto;
			background-color: #3274F9;
		}

	}

	.content-middle {
		.content-middle-one {
			.middle-one {
				width: 694rpx;

				margin: 0 auto;
				margin-bottom: 21rpx;
				background: #FFFFFF;
				padding: 0 25rpx;
				padding-bottom: 25rpx;

				.middle-edit {
					width: 645rpx;
					height: 63rpx;
					line-height: 63rpx;
					background: #e6e5d9;
					text-align: center;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #000;
					margin-bottom: 20rpx;

				}

				.middle-delete {
					width: 645rpx;
					height: 63rpx;
					line-height: 63rpx;
					background: #F02828;
					text-align: center;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;

				}

				.middle-one-title {
					border-bottom: 1px solid #CCCCCC;

					margin-bottom: 10rpx;
					display: flex;

					line-height: 82rpx;
					justify-content: space-between;

					.one-titlea {
						display: flex;


						.name {
							font-size: 32rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #333333;
						}

						.parment {
							font-size: 25rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #3274F9;
							margin-top: 5rpx;
							margin-left: 10rpx;
						}

					}

					.one-titleb {
						font-size: 32rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;

					}


				}

				.middle-one-detail {
					height: 90rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}

				.middle-one-time {
					font-size: 25rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					margin-top: 20rpx;
					margin-bottom: 20rpx;
				}
			}

		}
	}
</style>