<template>
	<view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
			<view @click="itemClick(item)" class="card u-border-bottom" v-for="(item,index) in list" :key="index">
				<view class="flex justify-between">
					<view class="flex"  style="width: 80%;">
						<view class="tag" :class="tagColorFun">
							<text>{{item.name.substr(0,1)}}</text>
						</view>
						<view class="padding-left-30 flex flex-direction">
							<text class="text-lg">占位</text>
							<text class="text-df text-gray padding-top-10">2021-04-06 09:27:23</text>
						</view>
					</view>
					<view class="flex justify-center align-center">
						<u-icon name="edit-pen" size="42" color="#999999"></u-icon>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-body/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				loginType:'',
				agencyId:''
			}
		},
		onLoad() {
			this.loginType=this.$cache.get('loginType')
			this.agencyId=this.$cache.get('agencyId')
		},
		computed:{
			tagColorFun(){
				console.log("1");
				return 'bg-'+this.ColorList[Math.floor(Math.random()*this.ColorList.length)]
			}
		},
		methods: {
			upCallback(mescroll){
				let params={
					current:mescroll.num,
					size:mescroll.size,
				}
				if (this.loginType==this.$loginType.AGENCY) {
					params.resourceType=3
					params.agencyId=this.agencyId
				}
				
				try{
					this.$api.party.branch(params).then(res=>{
						let data=res.data.records
						let total=res.data.total
						mescroll.endBySize(data.length,total);
						if(mescroll.num == 1) that.list = []; //如果是第一页需手动制空列表
						that.list=that.list.concat(data); //追加新数据
					})
				}catch(e){
					this.mescroll.endErr()
				}
			}
		}
	}
</script>

<style lang="scss">
	.card{
		position: relative;
		background-color: #FFFFFF;
		padding: 35rpx;
		margin: 20rpx;
		.default{
			width: 60rpx;
			height: 60rpx;
			position: absolute;
			right: 0;
			top: 0;
		}
		.bg-blue{
			background-color: $base-color;
			color: #FFFFFF;
			
		}
		.tag{
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 80rpx;
			width: 80rpx;
			font-size: 32rpx;
		}
	}
	
	
	
</style>
