<template>
	<view>
		
		 <mescroll-body :sticky="true" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">		
			<view class="sticky-tabs">
				<me-tabs v-model="tabIndex" :tabs="tabs" @change="tabChange"></me-tabs>
			</view>
			
			<!-- 搜索  -->
			<view class="cu-bar bg-white search">
				<view class="search-form round">
					<input v-model="searchVal" @confirm="keywordSearch" type="text" placeholder="输入搜索的关键词" confirm-type="search"></input>
					<text class="cuIcon-search"></text>
				</view>
			</view>	
							
			<view class="add-customer mat15">
				<text>共{{total}}条</text>
			</view>
			
			<view class="cu-list menu-avatar">
				<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in processData" :key="index"
				 @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + index">
					<view class="good-list" @tap="letterData(item,2)">
						<view class="charge" :id="'index-' + item.name" :data-index="item.name">
							<view class="charge-title flex-between">
								<text>{{item.name}}的贷款申请</text>
							</view>
							<view class="charge-text">
								<view class="flex-between">
									<text>业务编号：</text>
									<text class="mgl30">{{item.businessCode}}</text>
								</view>
								<view class="flex-between">
									<text>联系电话：</text>
									<text class="mgl30">{{item.phone}}</text>
								</view>
								<view class="flex-between">
									<text>业务类别：</text>
									<text class="mgl30">{{item.businessType}}</text>
								</view>
								<view class="flex-between">
									<text>担保额度(万元)：</text>
									<text class="mgl30">{{item.loanMoney}}</text>
								</view>
								<view class="flex-between">
									<text>担保期限：</text>
									<text class="mgl30">{{item.loanTern}}</text>
								</view>
								<view class="flex-between">
									<text>贷审会日期：</text>
									<text class="mgl30">{{item.passingTime}}</text>
								</view>
								<view class="flex-between">
									<text>审批状态：</text>
									<text class="mgl30">{{item.statusText}}</text>
								</view>
								<view class="flex-between">
									<text>业务状态：</text>
									<text class="mgl30">{{item.businessText}}</text>
								</view>
								<view class="flex-between">
									<text>操作状态：</text>
									<text class="mgl30">{{item.operatingText}}</text>
								</view>																					
							</view>
						</view>
					</view>
					<view class="move foot-btn">
						<button v-if="item.operatingText !== '已处理'&&item.businessStatus !== 3" @tap="letterData(item,3)"
						 class="mini-btn round suc-btn" type="primary" size="mini">确认</button>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				tabs:[
					{name:'全部', value: ''},
					{name:'审核中', value: 1},
					{name:'已审核', value: 2},
					{name:'已驳回', value: 4}
				],
				tabIndex: 0, // 当前菜单下标
				processData: [],
				total: 0,
				page: {
					num: 1,
					size: 10,
				},
				status: '',//状态的值
				searchVal: '', //搜索框的值

				listTouchStart: 0,
				listTouchDirection: null,
				modalName: null
			};
		},
		onShow() {
			this.upCallback({
				num:1,size:10
			})
		},
		methods: {
			//搜索框搜索
			keywordSearch(e){
				this.searchVal = e.detail.value
				this.upCallback(this.page)
			},
			/*下拉刷新的回调 */
			downCallback() {
				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
				this.mescroll.resetUpScroll()
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				this.$http.post('/api-guarantee/dg-payment-confirmation-consider/paymentConfirmationList',{
					page: page.num,
					size: page.size,
					customerNumberOrName: this.searchVal,
					status: this.status
				}).then(res => {
					if(page.num == 1) this.processData = []; //如果是第一页需手动制空列表					
					res.data.list.map(e =>{
						e.statusText = this.core.auditStatus(e.status).text
						e.businessText = this.core.businessType(e.businessStatus)
						e.operatingText = this.core.operationType(e.operatingStatus)
					})
					this.total = res.data.totalCount
					
					this.processData = this.processData.concat(res.data.list); //追加新数据
					this.mescroll.endSuccess(res.data.list); // 隐藏加载状态栏
				}).catch(()=>{
					//联网失败, 结束加载
					this.mescroll.endErr();
				})		
			},			
			// 切换菜单
			tabChange (index) {
				this.status = this.tabs[index].value;//当前下标的值
				this.searchVal = '';
				this.processData = []; // 置空列表,显示加载进度条
				this.mescroll.resetUpScroll()
			},
			letterData(item,Type){
				let operationType = Type //列表操作状态
				//担保函数据
				let letterValue = {
					businessId: item.businessId,//业务id
					bank: item.bank,//银行
					name: item.name,//客户名称
					passingTime: item.passingTime,//贷审会日期
					loanMoney: this.core.fMoney(item.loanMoney),//担保金额
					guaranteeMoney : this.core.fMoney3(item.loanMoney),//担保金额转格式
					file: item.file,//会议纪要
					loanTern: item.loanTern,//担保期限
					auditOpinion: item.auditOpinion,//审核意见					
					imgFile: item.imgFile, //图片列表
					isFgJl: item.isFgJl//上传的附件
				}
				let imgListT = []
				if(item.imgFile){
				    imgListT = item.imgFile
				}
				let fileList = item.file.split(",")
				letterValue = JSON.stringify(letterValue)
				uni.setStorageSync('businessId',item.businessId)// 业务id--给底部流程图用
				uni.navigateTo({
				    url: '../paymentSee/paymentSee?fileList='+fileList+'&imgListT='+imgListT+'&operationType='+operationType+'&letterValue='+letterValue
				});
			},
			
			// ListTouch触摸开始
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},
			
			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},
			
			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			}
		}
	}
</script>

<style lang="scss" scoped>
.cu-bar .search-form{
	border: 2rpx solid #00B9FF;
	border-radius: 20rpx;
	background-color: #fff;
	margin: 0 50rpx;
	height: 72rpx;
	line-height: 72rpx;
	margin-top: 20rpx;
	input{
		height: 72rpx;
		line-height: 72rpx;
		padding: 0 40rpx;
	}
	.cuIcon-search{
		margin: 0 20rpx;
	}
}
.add-customer{
	padding: 0 50rpx;
	button{
		background-color: #00B9FF;
		border-radius: 30rpx;
		.mar-icon{
			margin-right: 10rpx;
		}
	}
}
</style>
