<template>
	<view style="height: 100vh;display: flex;flex-direction: column;">
		<topBar height="343rpx" title="付费管理">
			<view slot="coment">
				<view class="header_seach">
					<view class="header_seach_seach">
						<view class="seach_input">
							<uni-easyinput prefixIconSize='25' prefixIcon="search" confirmType='search'
								@confirm='seachFn' placeholder-style="color:#bbbbbb;font-weight: 100;"
								v-model="seachValue" placeholder="转出账号" @iconClick="onClick" />
						</view>
						<button @tap='jump(1)' class="header_seach_butten">
							<view class="rechargeText">搜索</view>
						</button>
					</view>
					<view class="Navigation">
						<view @tap="seleFn(item);seleindex=index"
							:class="seleindex==index?'navigation_seleitem':'navigation_item'"
							v-for="(item,index) in navigation">
							{{item.text}}
							<uni-icons :animation="animationData" class="icoon" v-if="index==0" type="refreshempty"
								style="margin-left: 10rpx;" size="15" color="#bbbbbb"></uni-icons>
						</view>
					</view>
				</view>
			</view>
		</topBar>
		<view style="flex: 1;overflow: hidden;">
			<scroll-view @refresherrefresh='refresherrefresh' :refresherTriggered='show.refresherTriggered' :refresher-enabled='true' v-if="listData.length!=0"
				style="height: 100%;" scroll-y="true" @scrolltolower='scrolltolower'>
				<listItem @tap='jump(2,item)' :item="item" v-for="(item,index) in listData" :key="index"
					@examine="examine" @verify="verify"></listItem>
			</scroll-view>
			<view v-if="listData.length==0"
				style="width: 100vw; height: 100%; display: flex;align-items: center;justify-content: center;">
				<image src="@/static/qx.png" style="width: 536rpx; height: 399rpx;"></image>
			</view>
		</view>
		<!-- <suspensionWindow v-if="user.authList.includes('sys:company:rechargeJi')" ref='suspensionWindow'/> -->
		<popup :butten='butten' @confirmFn='confirmFn' @closeFn='closeFn' :show="show" v-model="iShow.examine">
			<view slot="coment">
				<view class="popup_coment">
					<uni-easyinput style="margin-top: 30rpx;" type="password" v-model="iShow.checkCode"
						placeholder="请输入二次确认密码"></uni-easyinput>
				</view>
			</view>
		</popup>
	</view>
</template>

<script>
	import serve from '@/api/bankEnterpriseConnection/payment.js'

	// import priceAdjustmentTask from '@/api/priceAdjustmentTask'
	// import oilDistribution from '@/api/oilDistribution'
	import topBar from '@/components/topbar'
	// import popup from '@/components/customPopup'
	import listItem from './components/listItem.vue'
	// import oilAccount from '@/api/oilAccount'
	// import suspensionWindow from '../../components/suspensionWindow.vue'
	export default {
		components: {
			topBar,
			// popup,
			listItem,
			// suspensionWindow
		},
		data() {
			return {
				animationData: null,
				seachValue: '',
				show: {
					img: false,
					footer: true,
					refresherTriggered:false
				},
				iShow: {
					loading: false,
					examine: false,
					id: '',
					checkCode: '',
				},
				companyName: '',
				getData: {
					pageSize: 15,
					currentPage: 1,
					params: {
						companyName: '', //企业公司名称
						auditMark: '', //执行状态
					}
				},
				seleindex: 0,
				navigation: [{
						text: '全部',
						index: null
					},
					{
						text: '待审核',
						index: '1'
					},
					{
						text: '审核通过',
						index: '2'
					},
				],
				listData: [],
				butten: {
					colse: '关闭',
					confirm: '审核成功',
					coloseBg: '#fff',
					coloseColor: '#333',
					confirmBg: '#17A00E90',
					confirmColor: '#FFFFFF',
					borderRadius: '10rpx'
				},
			}
		},
		onPullDownRefresh() {
			//下拉的生命周期
			this.getData.currentPage = 1
			this.getByPage()
			console.log('下拉的生命周期')
		},

		onShow() {

			this.getByPage();
		},
		methods: {
			verify(id) {
				serve.transferVerification(id).then(res => {
					if (res.code == 20000) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
						this.getData.currentPage = 1
						this.getByPage()
						// this.getByPage()
					}
				})
			},
			examine(id,auditStatus) {
				if(auditStatus == 1) {
					this.iShow.id = id
					this.iShow.examine = true
				}
			},
			closeFn() {
				this.iShow.checkCode = ''
				this.iShow.id = ''
				this.iShow.examine = false
			},
			confirmFn() {
				if (!this.iShow.checkCode) {
					uni.showToast({
						title: "请输入二次确认密码",
						icon: 'none'
					})
					return
				}
				if (this.iShow.loading) {
					return
				}
				this.iShow.loading = true
				serve.audit(this.iShow).then(res => {
					if (res.code === 20000) {
						uni.showToast({
							title: '操作成功',
							icon: 'success'
						});
						this.iShow.loading = false
						this.closeFn()
						this.getByPage()
					}
				}).catch(err => {
					setTimeout(() => {
						this.iShow.loading = false
					}, 2000)
				})

			},
			refresherrefresh(e) {
				this.getData.currentPage = 1
				this.show.refresherTriggered = true
				this.getByPage()
			},

			// confirmFn() {
			// 	this.isShow.examine = false

			// },
			animationFns() {

				var animation = uni.createAnimation({
					duration: 0,
					timingFunction: 'ease',
				})
				this.animation = animation
				this.animation.rotate(0).step()
				this.animationData = this.animation.export()
			},
			rotateFn() {
				var animation = uni.createAnimation({
					duration: 1000,
					timingFunction: 'ease',
				})
				this.animation = animation
				this.animation.rotate(360).step()
				this.animationData = this.animation.export()
				setTimeout(() => {
					this.animationFns()
				}, 1000)
			},

			scrolltolower() {
				this.getData.currentPage += 1

				this.getByPage()
			},
			seachFn() {

				this.getData.params.companyName = this.seachValue
				this.getData.currentPage = 1
				this.getByPage()
			},
			getByPage() {
				serve.getByPage(this.getData).then(res => {
					this.show.refresherTriggered = false
					if (res.code !== 20000) return
					if (res.data.list.length == 0) {
						uni.showToast({
							title: '没有数据了哦',
							icon: 'none'
						});
					}
					if (this.getData.currentPage !== 1) {
						this.listData = this.listData.concat(res.data.list);
						return
					}
					this.listData = res.data.list
				})
			},
			jump(e, item) {
				switch (e) {
					case 1:
						uni.navigateTo({
							url: './add'
						})
						break;
					case 2:
						uni.navigateTo({
							url: './details?data=' + encodeURIComponent(JSON.stringify(item))
						})
						// oilAccount.getCompanyDetails(item.id).then(res=>{
						// 	// console.log(res,'888')
						// 	if(res.code==20000){
						// 		uni.navigateTo({
						// 			url:'./details?data='+ encodeURIComponent(JSON.stringify(res.data)) 
						// 		})
						// 	}
						// })

						break;
				}
			},
			seleFn(e) {
				this.getData.params.auditStatus = e.index;
				this.getData.currentPage = 1;
				this.rotateFn()
				this.getByPage()
			},
			onClick() {
				// console.log('点击图标事件')
			}
		}
	}
</script>

<style>
	.rechargeText {
		color: #2866FF;
	}

	.icoon :active {
		color: #007AFF;
	}

	.yuan {
		width: 13rpx;
		height: 13rpx;
		background: #E9CF31;
		border-radius: 50%;
		margin-right: 5rpx;
	}

	.large_text {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.company_msg_content {
		max-width: 330rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		text-align: end;
	}

	.examine_popup_body {
		padding: 0 47rpx;
		margin: 33rpx 0;
	}

	.company_msg {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
	}

	.item_price {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.form_body_item_body_content_right {
		/* max-width: 215rpx; */
		text-align: -webkit-right;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		flex: 1;
	}

	.form_body_item_body_content_left {
		/* max-width: 215rpx; */
		text-align: left;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		flex: 1;
	}

	.form_body_item_img {
		width: 80rpx;
		height: 70rpx;
	}

	.form_body_item_body_content {
		display: flex;
		justify-content: space-between;
		width: 100%;
		margin-top: 15rpx;
		padding-bottom: 14rpx;
	}

	.form_body_item_body_header {
		display: flex;
		justify-content: space-between;
		width: 100%;
	}

	.samll_txext {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		display: flex;
		align-items: center;

	}

	.leftTip {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		background-color: #E9CF31;
		width: 10rpx;
	}

	.compay_tip {
		/* width: 94rpx; */
		/* height: 36rpx; */
		background: #F1F1F1;
		margin-top: 18rpx;
		color: #BBBBBB;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		/* margin-bottom: 14rpx; */
		width: 130rpx;
		padding: 10rpx;

	}

	.seach_input {
		background-color: #FFFFFF;
		border-radius: 12rpx;
		flex: 1;
	}

	.typeyuan {
		background-color: #17A00E;
		width: 14rpx;
		height: 14rpx;
		border-radius: 50px;
		margin-right: 6rpx;
	}

	.seletypeyuan {
		background-color: red;
		width: 14rpx;
		height: 14rpx;
		border-radius: 50px;
		margin-right: 6rpx;
	}

	/* 	.is-input-border {
		border: 0px !important;
	} */

	page {
		background-color: #F0F2FF;
	}

	.form_body_item_footer {
		display: flex;
		color: #BBBBBB;
		font-size: 22rpx;
		justify-content: space-between;
		/* margin-top: 15rpx; */
		align-items: center;
		flex: 1;
		padding: 26rpx 0;
	}

	.form_body_item_body {
		display: flex;
		border-bottom: 1rpx solid #F0F0F0;
		/* padding-bottom: 14rpx; */
		flex-wrap: wrap;
	}

	.form_body_item {
		min-height: 267rpx;
		background: #FFFFFF;
		box-shadow: 0px 3px 9px 0px rgba(88, 88, 88, 0.2);
		border-radius: 12rpx;
		font-size: 28rpx;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		padding-bottom: 0;
		position: relative;
		overflow: hidden;
	}

	.form_body {
		width: 100vw;
		padding: 0 10px;
		margin-top: 40rpx;
		box-sizing: border-box;
	}

	.navigation_seleitem {
		width: 150rpx;
		height: 59rpx;
		background: #F0F2FF;
		border-top-left-radius: 11rpx;
		border-top-right-radius: 11rpx;
		font-size: 26rpx;
		color: #333333;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: all 0.3s;
		position: relative;
		bottom: -2px;
	}

	.navigation_item {
		width: 150rpx;
		height: 59rpx;
		border-top-left-radius: 11rpx;
		border-top-right-radius: 11rpx;
		font-size: 26rpx;
		color: #F0F2FF;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: all 0.3s;
		bottom: -2px;
	}

	.Navigation {
		display: flex;
		position: absolute;
		bottom: 0px;
		transition: all .5s;
	}

	.popup_coment {
		padding: 80rpx;
		text-align: center;
		font-size: 35rpx;
		color: #666666;
	}

	.header_seach_butten {
		font-size: 24rpx !important;
		display: flex !important;
		align-items: center !important;
		margin: 0 !important;
		flex-shrink: 1;
		margin-left: 9rpx !important;
		background: #FFFFFF !important;
		justify-content: center;
		color: #2866FF;
		width: 160rpx;
	}

	.uni-easyinput__content {
		height: 80rpx;
	}

	.uni-easyinput {
		height: 80rpx;
	}

	.header_seach_seach {
		display: flex;
		height: 80rpx;
		margin-top: 23rpx;
	}

	.header_seach_title {
		display: flex;
		align-items: center;
	}

	.header_seach {
		font-size: 26rpx;
		padding: 0 10px;
	}

	.uni-navbar--border {
		border: 0px !important;
	}

	/* 	.header {
		background-color: #007AFF;
		color: white;
		min-height: 403rpx;
		background-image: url('https://xoi-support.oss-cn-hangzhou.aliyuncs.com/星油admin小程序/sjbj.png');
		background-size: 100% 100%;
		position: relative;
	} */

	.uni-navbar__header-btns-right {
		padding-right: 0 !important;
		width: 120rpx !important;
	}

	.top {
		height: var(--status-bar-height);
	}
</style>