<template>
	<view class="content">
		<view v-if="listsArr.length > 0">
		    <navigator hover-class="none" :url="'/pages/index/clients?user_id=' + item.user_id"  class="list" v-for="(item, index) in listsArr" :key="index">
		        <image class="list-cover" :src="item.avatar ? item.avatar : '/static/user_default.png'" mode="aspectFill"></image>
				<view class="list-cont">
					<view class="list-name">{{item.nickname}}</view>
					<view class="list-phone">{{item.username}}</view>
				</view>
				<view class="list-btn">计算结果></view>
		    </navigator>
		</view>
		<view class="pack-center pages-hint" v-else>
		    <image src="https://cdn.shuiganying.com/images/2023/04/04/40b2f4bfe2dfb828688fcd3766d6b541.png"></image>
		    <view class="reportTips">
		        <view class="reportTips-title">暂无数据</view>
		        <view class="reportTips-text">抱歉，暂没有历史记录</view>
		    </view>
		</view>
	</view>
</template>

<script>
	import { Clients } from '@/apis/interfaces/index'
export default {
		data() {
			return {
				listsArr   : [] // 结果列表
			}
		},
		onShow() {
			this.listsInfo()
		},
		
		methods: {
			listsInfo() {
				Clients().then(res => {
					this.listsArr = res
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon: "none" 
					})
				})
			}
		}
	}
</script>

<style>
	
	.list {
	    position: relative;
	    padding: 24rpx 30rpx 24rpx 140rpx;
	    min-height: 80rpx;
	    background-color: #fff;
	}
	
	.list-cover {
	    width: 80rpx;
	    height: 80rpx;
	    border-radius: 50%;
	    position: absolute;
	    top: 24rpx;
	    left: 24rpx;
	    background: #808080;
	}
	
	.list-cont {
		width: calc(100% - 180rpx);
	}
	
	.list-name {
	    height: 50rpx;
	    line-height: 50rpx;
	    font-size: 32rpx;
	    font-weight: bold;
	    color: #333;
	}
	
	.list-phone {
	    height: 30rpx;
	    line-height:30rpx;
	    font-size: 24rpx;
	    color: #999;
	}
	
	.list::before {
	    position: absolute;
	    left: 30rpx;
	    right: 0;
	    bottom: 0;
	    height: 1rpx;
	    background: #FAFAFA;
	    content: "";
	}
	
	.list:last-child::before {
	    display: none;
	}
	
	.list-btn {
		display: inline-block;
		background-color: #0352c8;
		color: #ffffff;
		border-radius: 80rpx;
		line-height: 64rpx;
		padding: 0 20rpx;
		position: absolute;
		right: 30rpx;
		top: 30rpx;
		font-size: 24rpx;
	}
</style>