<template>
	<!-- 催收业务 -->
	<view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption" @scroll="scroll" @topclick="topClick">
			<view class="cu-bar bg-white search" :class="scrolltop ? 'fixed' : ''" :style="[{top:CustomBar + 'px'}]">
				<view class="search-form round">
					<input @input="searchList" v-model="listParams.customerNumberOrName" type="text" placeholder="客户姓名/编号" confirm-type="search"></input>
					<text class="cuIcon-search"></text>
				</view>
			</view>
			<view id="tabInList">
				<me-tabs v-model="searchTab" :tabs="serachTabs" @change="searchTabChange"></me-tabs>
			</view>
			<view class="cu-list menu-avatar">
				<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in listData" :key="index"
				 @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + index">
					<view class="good-list">
						<view class="charge" :id="'index-' + item.name" :data-index="item.name">
							<navigator hover-class='none' :url="watchShow?'/workBenchPages/pages/callInALoanSee/callInALoanSee?item='+JSON.stringify(item):''"
								class="nav-li" navigateTo :style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]">
								<view class="charge-title flex-between">
									<text>{{item.name}}</text>
								</view>
								<view class="charge-text">
									<view>
										<text>业务编号：</text>
										<text class="mgl30">{{item.code }}</text>
									</view>
									<view>
										<text>客户名称：</text>
										<text class="mgl30">{{item.name}}</text>
									</view>
									<view>
										<text>联系电话：</text>
										<text class="mgl30">{{item.phone}}</text>
									</view>
									<view>
										<text>业务类别：</text>
										<text class="mgl30">{{item.type }}</text>
									</view>
									<view>
										<text>担保额度(元)：</text>
										<text class="mgl30">{{item.amount }}</text>
									</view>
									<view>
										<text>逾期期数：</text>
										<text class="mgl30">{{item.overduePeriods }}</text>
									</view>
									<view>
										<text>逾期额度(元)：</text>
										<text class="mgl30">{{item.overdueAmount }}</text>
									</view>
									<view>
										<text>逾期利息(元)：</text>
										<text class="mgl30">{{item.overdueInterest }}</text>
									</view>
									<view>
										<text>所属部门：</text>
										<text class="mgl30">{{item.department }}</text>
									</view>
									<view>
										<text>催收次数：</text>
										<text class="mgl30">{{item.numberOfCollection }}</text>
									</view>
									<view>
										<text>状态：</text>
										<text class="mgl30">{{item.statusVal }}</text>
									</view>
								</view>
							</navigator>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default{
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				// 保后管理的tab
				serachTabs:[
					{name:'全部', num:1, y:0, curPageLen:0, hasNext:true},
					{name:'还款中', num:1, y:0, curPageLen:0, hasNext:true},
					{name:'已逾期', num:1, y:0, curPageLen:0, hasNext:true},
					{name:'已还清', num:1, y:0, curPageLen:0, hasNext:true},
					{name:'已结项', num:1, y:0, curPageLen:0, hasNext:true}
				],
				searchTab:0,
				stagridCol: 2,
				gridBorder: false,
				
				tabIndex: 0, // 当前菜单下标
				preIndex: 0, // 前一个菜单下标
				navTop: null, // nav距离到顶部的距离 (如计算不准确,可直接写死某个值)
				isShowSticky: false, // 是否悬浮
				TabCur: 0,
				scrollLeft: 0,
				CustomBar: this.CustomBar,
				listCurID: '',
				listData: [],
				status:'',// 状态
				total: 1,
				scrolltop: false,
				listTouchStart: 0,
				listTouchDirection: null,
				modalName: null,
				statusType:[
					'还款中','已逾期','已还清','已结项'
				],
				watchShow:false
			};
		},
		created() {
			let arr = uni.getStorageSync('routerArr')
			if(arr.join().includes('催收记录')){
				this.watchShow = true
			}
		},
		onShow() {
			this.upCallback({
				num:1,size:10
			})
		},
		methods:{
			// tab切换
			searchTabChange(e){
				if(e==0)this.status = ''
				else this.status = e
				this.upCallback({
					num:1,size:10
				})
			},
			/*下拉刷新的回调 */
			downCallback() {
				// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
				// loadSwiper();
				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
				this.mescroll.resetUpScroll()
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				this.$http.get('/api-guarantee/al-collection/list',{
					page: page.num?page.num:1,
					size: page.size?page.size:10,
					status:this.status?this.status:'',
					codeOrName:page.search?page.search:''
				}).then(res => {
					if(page.num == 1) this.listData = []; //如果是第一页需手动制空列表          
					res.data.list.map(e =>{
						e.statusVal = this.statusType[e.status-1]
					})
					this.listData = this.listData.concat(res.data.list); //追加新数据
					this.mescroll.endSuccess(res.data.list); // 隐藏加载状态栏
				}).catch(()=>{
					//联网失败, 结束加载
					this.mescroll.endErr();
				})   
			},
			// 搜索框--结合防抖
			searchList(e){
				let that = this
				if (this.timer) {
				    clearTimeout(this.timer);
				    this.timer = null;
				}
				this.timer = setTimeout(function () {
				    that.upCallback({num:1,size:10,search:e.detail.value})
				},800)
			},
			// 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
			},
			//  抄送请去PC
			// 还款记录
			// repayment(item){
			// 	// 携带参数跳转页面
			// 	let data = JSON.stringify(item)
			// 	uni.navigateTo({
			// 	    url: '/workBenchPages/pages/afterLoanSee/afterLoanSee?item='+data
			// 	})
			// }
		}
	}
</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;
			}
		}
	}
	.sideBtn{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}
</style>
