<template>
	<view class="content">
		<block v-if="lawyersArr.length > 0">
			<view class="lawyer">
				<view class="lawyer-item" v-for="(item, index) in lawyersArr" :key="index" @click="$Router.push({name: 'lawyerDetails', params: {id: item.lawyer_id}})">
					<view class="lawyer-item-img">
						<!-- 5:6 -->
						<image :src="item.cover" mode="aspectFill"></image>
						<view class="nowrap lawyer-item-name">
							{{item.name}}
						</view>
					</view>
					<view class="lawyer-item-cont">
						<view class="nowrap lawyer-item-tips">
							擅长：
							<block v-for="(items, itemsIndex) in item.tags" :key="itemsIndex">
								{{items.name}},
							</block>
						</view>
						<view class="lawyer-item-price">
							<!-- <view class="lawyer-item-number">￥{{item.price}}</view> -->
							<!-- <text>{{item.years}}+人咨询</text> -->
						</view>
						
					</view>
				</view>
			</view>
			<!-- 分页 -->
			<u-loadmore v-if="pagesShow" :status="status" />
		</block>
		<block v-else>
			<view class="list-null">
				<u-empty
					mode="data"
					icon="http://cdn.uviewui.com/uview/empty/data.png"
					text="暂无律师数据"
				>
				</u-empty>
			</view>
		</block>
	</view>
</template>

<script>
	import { lawyers } from "@/apis/interfaces/index.js"
	export default {
		data() {
			return {
				lawyersArr	: [],
				// 分页
				page		: {
					current	: 1,
					has_more: false,
				},
				pagesShow	: false,
				status	 	: false,
			};
		},
		created() {
			this.getList()
		},
		methods: {
			// 获取列表
			getList(){
				uni.showLoading({
					title: '加载中...',
					mask : true
				})
				lawyers({
					larer : 1,
					page  : this.page.current,
				}).then(res => {
					console.log(res)
					let { data, page } = res;
					let atList   	= page.current == 1 ? [] : this.lawyersArr
					this.lawyersArr = atList.concat(data)
					this.page		= page
					this.pagesShow 	= false
					uni.hideLoading()
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			onCallPhone(phone){
				uni.makePhoneCall({
					phoneNumber: phone
				})
			}
		},
		onReachBottom() {
			this.pagesShow = true;
			if(this.page.has_more){
				this.status    = 'loading';
				this.page.current++
				this.getList()
				return
			}
			this.status    = 'nomore';
		}
	}
</script>

<style lang="scss">
	.content{
		box-sizing: border-box;
		background: white;
		padding-top: 1rpx;
	}
	// 列表
	.lawyer {
		overflow: hidden;
		margin: 20rpx 15rpx 0;
		.lawyer-item {
			background-color: #fff;
			width: calc(50% - 30rpx);
			float: left;
			margin: 0 15rpx $margin;
			border: 2rpx solid #f1f1f1;
			box-sizing: border-box;
			border-radius: $radius-m;
			overflow: hidden;
			.lawyer-item-img {
				position: relative;
				width: 100%;
				padding-top: 55%;
				overflow: hidden;
				background-color: #515151;
				image {
					position: absolute;
					width: 100%;
					height: 100%;
					left: 0;
					top: 0;
				}
				.lawyer-item-name {
					position: absolute;
					width: 100%;
					left: 0;
					bottom: 0;
					background-color: rgba(0, 0, 0, .1);
					line-height: 54rpx;
					color: #ffffff;
					padding: 0 $padding - 10;
					box-sizing: border-box;
					font-size: $title-size-lg;
				}
			}
			.lawyer-item-cont {
				padding: $padding - 10;
				box-sizing: border-box;
				.lawyer-item-tips {
					font-size: $title-size-m;
					color: $text-color;
				}
				.lawyer-item-price {
					display: flex;
					margin-top: 10rpx;
					line-height: 44rpx;
					.lawyer-item-number {
						flex: 1;
						color: $mian-color;
						font-weight: 600;
						font-size: $title-size;
					}
					text {
						font-size: $title-size-sm;
						color: #9d9d9d;
					}
				}
			}
		}
	}
	// 空页面
	.list-null{ height: 60vh; display: flex; align-items: center; justify-content: center; }
</style>
