<template>
	<view>
		
		<view class="bottom-border guarantee-title">
			<view class="left-border"><text class="mgl10">保后业务</text></view>
		</view>
		<view class="cu-list grid" :class="['col-' + stagridCol,gridBorder?'':'no-border']">			
			<view class="cu-item bg-guarantee" v-for="(item,index) in efficiencyList" :key="index">
				<navigator hover-class='none' :url="'/workBenchPages/pages/' + item.url +'/' + item.url" class="nav-li" navigateTo
				 :style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]">
					<image :style="item.style" :src="item.img"></image>
					<text>{{item.name}}</text>
				</navigator>
			</view>				
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				listIndex:0,// 切换列表
				upOption: {
					// 如果用mescroll-uni 则需要onScroll: true, 且需要 @scroll="scroll"; 而mescroll-body最简单只需在onPageScroll处理即可
					// onScroll: true // 是否监听滚动事件, 默认false (配置为true时,可@scroll="scroll"获取到滚动条位置和方向)
				},
				efficiencyList: [
					// {
					// 	url: 'afterLoan',
					// 	name: '保后管理',
					// 	img: '../../static/img/db-icon16.png',
					// 	style: 'width: 70rpx;height: 70rpx;'
					// },
					// {
					// 	url: 'callInALoan',
					// 	name: '催收管理',
					// 	img: '../../static/img/db-icon16.png',
					// 	style: 'width: 70rpx;height: 70rpx;'
					// },
				],
				
				
				
				listData: [
					// {name:1},
					// {name:2},
				],
				total: 1,
				scrolltop: false,
				stagridCol: 2,
				gridBorder: false,
				listTouchStart: 0,
				listTouchDirection: null,
				modalName: null,
				timer:'',
				listParams:{
					// customerNumberOrName:"",// 搜索框
					page:1,
					size:10
				}
			};
		},
		onShow() {
			// this.upCallback({
			// 	num:1,size:10,serach:''
			// })
		},
		created() {
			let arr = uni.getStorageSync('routerArr')
			if(arr.join().includes('保后管理')){
				this.efficiencyList.push(
					{
						url: 'afterLoan',
						name: '保后管理',
						img: '../../static/img/bh-icon1.png',
						style: 'width: 70rpx;height: 70rpx;'
					}
				)
			}
			if(arr.join().includes('催收管理')){
				this.efficiencyList.push(
					{
						url: 'callInALoan',
						name: '催收管理',
						img: '../../static/img/bh-icon2.png',
						style: 'width: 70rpx;height: 70rpx;'
					}
				)
			}
		},
		methods:{
			
		}
	}
</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;
	}
	.mgt5{
		margin-top: 8rpx;
	}
	// .cu-list>.cu-item .move{
	// 	top: 30%;
	// }
</style>
