<template>
	<view class="content">
		<view class="bg"></view>
		<view class="menutop">
			<view class="search">
				<uni-search-bar placeholder="搜索关键字" :radius="36" bgColor="#FFF" class="search" @confirm="search"  v-model="searchValue" @blur="blur" @focus="focus" @input="input"
				 				@cancel="cancel" @clear="clear"  clearButton="auto" cancelButton="none" >
				</uni-search-bar>
			</view>
		</view>
		
		<u-loading-page :loading="loading" ></u-loading-page>
		
		<view style="margin-top: 40px;z-index: 1;position: relative;">
			<view class="cell_item" v-for="item in jwgk">
					<u-row>
						<view class="photo">
							<view>
								<image class="image" :src="item.zp"  style="width: 128rpx;height:128rpx;border-radius:50%"></image>
								<image class="icon" src="../../static/icon_boy_16@2x.png" mode=""></image>
							</view>
						</view>
					</u-row>
					<text class="mjxx">{{item.gxsqMc}}民警信息</text>
				    <u-row
				        justify="space-between"
				        gutter="12">
				        <u-col span="4">
				            <view class="title">社区民警</view>
				        </u-col>
				        <u-col span="9">
				            <view class="name">{{item.name}}</view>
				        </u-col>
				    </u-row>
					<u-row
					    justify="space-between"
					    gutter="12">
					    <u-col span="4">
					        <view class="title">警号</view>
					    </u-col>
					    <u-col span="9">
					        <view class="name">{{item.jh}}</view>
					    </u-col>
					</u-row>
					<u-row
					    justify="space-between"
					    gutter="12">
					    <u-col span="4">
					        <view class="title">联系电话</view>
					    </u-col>
					    <u-col span="9">
					        <view class="name">{{item.phone}}</view>
					    </u-col>
					</u-row>
					<u-row
					    justify="space-between"
					    gutter="12">
					    <u-col span="4">
					        <view class="title">所属派出所</view>
					    </u-col>
					    <u-col span="9">
					        <view class="name">{{item.ssdwMc}}</view>
					    </u-col>
					</u-row>
					<view class="tel" v-show="item.phone!=''" @click="callPhone(item.phone)">
						<image class="image" src="../../static/btn_phone_blue@2x.png"  mode="widthFix" style="width: 64rpx;border-radius: 5px;"></image>
					</view>
			</view>
			<u-loadmore v-if="jwgk.length>0" :status="status" />
		</view>
			
	</view>
</template>


<script>
	
	import {getjwtdJwgk} from '@/api/jwgk.js'
	export default {
		data(){
			return{
				loading:true,
				searchValue:'',
				pageLoading:true,
				showMore:true,
				jwgk:[],
				status: 'loadmore',
				pages:{
					size: 10,
					total: 0,
					current:1,
				},
			}
		},
		onShow(){
			this.$u.func.checkUpdate()
		},
		onPullDownRefresh() {
		    this.pages.current =1
			this.jwgk = []
		    this.init()
			uni.stopPullDownRefresh(); // 停止下拉刷新
		  },	
		onReachBottom() {
			this.status = 'loading';
			var _this = this;
			this.init()
		},
		onLoad() {
			this.init()
		},
		methods:{
			init(){
				uni.showLoading({
					title: '加载中'
				});
				getjwtdJwgk(this.searchValue,this.pages.current).then(res=>{
					this.pages.current++
					this.jwgk = [...this.jwgk, ...res.data.records];
					//this.jwgk = res.data.records
					console.log(this.jwgk,res.data.records.length);
					if(res.data.records.length<10 ){
						this.status = 'nomore'
					}
					
					this.loading = false
					uni.hideLoading()
				}).finally(()=>{
					uni.hideLoading()
				})
			},
			callPhone(phoneNumber) {
			    uni.makePhoneCall({
			      phoneNumber: phoneNumber, // 电话号码
			      success: function () {
			        console.log('拨号成功');
			      },
			      fail: function () {
			        console.log('拨号失败');
			      }
			    });
			  },
			  
			  search(res) {
				  this.pages.current = 1
				  this.jwgk=[]
				  this.init()
				},
				input(res) {
					
				},
				clear(res) {
					this.searchValue = ''
					this.pages.current = 1
					this.jwgk=[]
					this.init()
				},
				blur(res) {
					
				},
				focus(e) {
					
				},
				cancel(res) {
					
				}
		}
	}
</script>

<style lang="scss">
	/deep/ .uni-searchbar__box{
		background: #FFFFFF;
		border-radius: 36rpx;
		opacity: 0.7;
	}
	.content{
		padding: 0 24rpx;
		box-sizing: border-box;
		background: #F8F8F8;
		position: relative;
		min-height: 100vh;
		.bg{
			position: absolute;
			background: url('data:image/png;base64,[encoded data, 61464 characters]') 0 0 no-repeat;
			width: 100%;
			background-size: 100%;
			height: calc((100vw / 375) * 480);
			left:0;
			top: 0;
			z-index: 0;
		}
		.menutop{
			width: 100%;
			margin: auto;
			padding-bottom:10px;
			padding-top:25px;
			.search{
				text-align: left;width: 70%;
			}
		}
		.cell_item{
			width: 100%;
			padding:100rpx 24rpx 24rpx;
			margin: auto;
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 24rpx;
			margin-bottom: 38px;
			position: relative;
			.mjxx{
				position: absolute;
				top:-22rpx;
				right:-10rpx;
				width: 350rpx;
				height: 64rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #106DFF;
				line-height: 64rpx;
				text-align: center;
				font-style: normal;
				background: linear-gradient(to right,#C3E4FB,#D4F5F8) ;
				border-radius: 16px;
			}
			.title{
				height: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				line-height: 32rpx;
				letter-spacing: 4px;
				text-align: left;
				font-style: normal;
				padding-bottom: 5px;
				text-align: justify;
				text-align-last: justify;
			}
			.name{
				height: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #111111;
				line-height: 32rpx;
				text-align: left;
				font-style: normal;
				padding-bottom: 5px;
			}
			.tel{
				position: absolute;
				top: 100rpx;
				right: 0;
			}
			.photo{
				width: 128rpx;
				height: 128rpx;
				border-radius: 50%;
				position: absolute;
				top: -64rpx;
				border: 4rpx solid #CFE2FF;
				
				img{
					border-radius: 50%;
				}
				.icon{
					width: 32rpx;
					height: 32rpx;
					position: absolute;
					bottom: 0rpx;
					right: 0rpx;
				}
			}
		}
	}
</style>