<template>
	<view class="recordsList">
		
		<view style="height: 97vh;">
			<u-card>
				<view style="padding:0 8px">
					<u--form labelWidth="150rpx"  :model="policeStation">
						<u-form-item label="派出所:">
							<view @click="addStation" width="100px">
								<view class="dataUserunit" :style="{color: policeStation.station ||'#c2cad2'}" name="unit"
									v-model="policeStation.station">{{policeStation.station || "请输入派出所"}}</view>
							</view>
						</u-form-item>
						<u-form-item label="学校:">
							 <view @click="addSchool">
								 <view class="dataUserunit" :style="{color: policeStation.school ||'#c2cad2'}" name="unit"
								 	v-model="policeStation.school">{{policeStation.school || "请输入学校"}}</view>
							 </view>
						</u-form-item>
					</u--form>
					
					
					<view class="disp">
						<u-button @click="addsearch" type="primary" size="small" :plain="true" :hairline="true"
							text="搜索"></u-button>
						<u-button @click="onreset" type="primary" size="small" :plain="true" :hairline="true"
							text="重置"></u-button>
					</view>
					<u-picker itemHeight="75" @confirm="pickerConfrm" :show="stationShowunit"
						:columns="stationunitColums" keyName="label" @cancel="stationShowunit = false"></u-picker>
					<u-picker itemHeight="75" @confirm="schoolpickerConfrm" :show="schoolShowunit"
						:columns="schoolnunitColums" keyName="label" @cancel="schoolShowunit = false"></u-picker>

				</view>
			</u-card>

			<scroll-view style="height:calc(100vh)" :scroll-y="showAllcolor" :scroll-top="scrollcolor"
				upper-threshold="3" @scrolltolower="scrolltolower" @scroll="scroll" @scrolltoupper="scrolltoupper">
				<view>
					<u-card>
						<view slot="body" v-if="clockInList.length">
							<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0"
								v-for="(item,index) in clockInList" :key="index" >
								 <view style="width: 100px;height: 100px;margin-right: 34rpx;"  >
									 <image @click="imagebig(item.imageUrls)" style="width: 100%;height: 100%;" :src="item.imageUrls?item.imageUrls:'../../static/school/home_nodata.png'"></image>
								 </view>
								 <view class="bodyItem">
									 <view class="bodyIndex">
									 	<span>所属派出所:</span>
									 	<span>{{item.borough}}</span>
										<span>警务区:</span>
										<span style="font-weight: 700;">{{item.detachment}}</span>
									 </view>
									 <view class="bodyIndex">
									 	<span>用户类型:</span>
									 	<span style="font-weight: 700;">{{item.personType === 'guarder'?'保安人员':item.personType === 'police.manager'?'护校警员':item.personType === 'school.manager'?'教育部门':'志愿者'}}</span>
									    <span>用户名称:</span>
									    <span style="color: red;">{{item.personName}}</span>
									 </view>
									<view class="bodyIndex">
									 	<span>打卡时间:</span>
									 	<span style="color: red;">{{item.signTimestamp}}</span>
									 </view>
									 <view class="bodyIndex">
									 	<span>学校名称:</span>
									 	<span style="color: red;">{{item.station}}</span>
									 </view>
								 </view>
							</view>
							<u-loadmore :status="statucolor" fontSize="24" />
						</view>
						<view class="availabel" v-else>
							<!-- 暂无数据 -->
							<image src="../../static/school/availabel.png"></image>
						</view>
					</u-card>
					<u-overlay :show="showUrl" @click="showUrl = false">
						<view class="warp">
							<movable-area :scale-area="true" style="width: 100vh;">
								<movable-view direction="all" style="width: 348px; height: 300px;" @scale="onScale" scale="true"
									scale-min="1" scale-max="4" :scale-value="scale" :x="1" :y="10">
									<image　class="rect" :src="showUrlList" mode="widthFix"></image>
								</movable-view>
							</movable-area>
						</view>
					</u-overlay>
				</view>
			</scroll-view>

		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	import {
		getdetaitList,
		
		getBoroughList,
		getstationList,
		getsignevent
	} from '@/api/login.js'
	import {
		Time,
		timeFormat
	} from '@/utils/index.js';
	
	export default {
		data() {
			return {
				showUrl: false,
				showUrlList:'',
				current: 0,
				index: 10,
				scrollTop: 0,
				showAllcolor: true,
				scrollcolor: 0,
				
				statucolor: 'loadmore',
				clockin: 0,

				clockInList: [],
				policeStation: {
					station: '',
					school: ''
				},
				stationShowunit: false,
				stationunitColums: [],
				schoolShowunit: false,
				schoolnunitColums: []

			};
		},
		created(){
			this.onCurrent()
			
		},
		computed: {
			// 拿取vuex数据
			...mapGetters({
				schoolInfo: 'users/getschoolList',
			})
		},
		onShow() {
			// 星级
			// this.getdetaitsStar()
		},
		methods: {
			
			// 派出所数据
			getBoroughLists() {
				const that = this;
				getBoroughList({
						brigade: '长沙芙蓉区'
					})
					.then((res) => {
						let matter = res.data
							.filter((v) => v.remark && v.borough)
							.map((res) => ({
								id: res.borough,
								label: res.remark
							}));
						that.stationunitColums = [matter];
					})
					.catch((error) => {});
			},
			addStation() {
				this.stationShowunit = true
				this.getBoroughLists()
			},
			onreset() {
				this.policeStation.station = ''
				this.policeStation.school = ''
				uni.showLoading({
					title: '加载中...'
				})
				setTimeout(() => {
					this.getsigneventList()
					uni.hideLoading()
				}, 1000)

			},
			pickerConfrm(e) {
				this.policeStation.station = e.value[0].label
				this.stationShowunit = false
			},
			addsearch() {
				uni.showLoading({
					title: '加载中...'
				})
				setTimeout(() => {
					this.getsigneventList()
					uni.hideLoading()
				}, 1000)

			},

			stationList() {
				const that = this;
				const unitList = {
					brigade: '长沙芙蓉区',
					borough: that.policeStation.station
				};
				getstationList(unitList)
					.then((res) => {
						let matterunit = res.data
							.filter((v) => v.nickname && v.name)
							.map((res) => ({
								id: res.name,
								label: res.nickname
							}));
						that.schoolnunitColums = [matterunit];
					})
					.catch((error) => {});
			},
			//学校列表
			addSchool() {
				this.schoolShowunit = true
				this.stationList()
			},
			schoolpickerConfrm(e) {
				this.policeStation.school = e.value[0].label
				this.schoolShowunit = false
			},
		
			getsigneventList() {
				getsignevent({
					brigade: "长沙芙蓉区",
					borough: this.policeStation.station,
					station: this.policeStation.school,
					day: new Date().getDate(),
					end: timeFormat() + " 23:59:59",
					month:  new Date().getMonth() + 1,
					start: timeFormat() + " 00:00:00",
					year: new Date().getFullYear(),					
				}).then((res) => {
					res.data.forEach((item) => {
						if(item.imageUrls){
							const list =  JSON.parse(item.imageUrls)
							if(list && list.length > 0){
								item.imageUrls = 'https://www.lonsungsh.com:8083' +  list[0] 
							}
						}
					})
					this.clockInList = res.data
					this.clockInList = res.data.slice(0,this.index)
					 console.log(this.clockInList);
					this.clockin = res.data.length
				})
			},

			scrolltolower() {
				this.index += 5
				setTimeout(() => {
						if (this.clockInList.length < this.clockin) {
							this.statucolor = "loading"
							this.getsigneventList()
						} else {
							this.statucolor = "nomore"
						}
				}, 1000)
			},
			scrolltoupper(e) {	
			},
			scroll(e) {},
			onCurrent(value) {
				uni.showLoading({
					title: '加载中...'
				})
				setTimeout(() => {
					this.current = value
					this.scrollTop = 0
					this.index = 10
					uni.hideLoading()				 
						this.getsigneventList()
						this.getBoroughLists()				
						this.policeStation.station = ''
					
				}, 1000)
			},
			
			// 放大图片
			imagebig(image){
				this.showUrl = true
				this.showUrlList = image
				 
			}
		},
	}
</script>

<style lang="less" scoped>
	.recordsList {
		margin-top: 0px;
		min-height: 100vh;

		.recordsListItem {
			position: fixed;
			top: 2px;
			left: 4px;
			width: 98%;
			z-index: 99;
		}
		/deep/ .u-form-item__body{
			 padding: 5px;
		}
	}

	.u-card-wrap {
		background-color: #ccc;
		padding: 1px;
	}

	.u-body-item {
		font-size: 32rpx;
		color: #333;
		padding: 20rpx 10rpx;
		margin: 14rpx;
		background-color: #f3f4f6;
		display: flex;
	}
   .bodyItem{
	    line-height: 22px;
		.bodyIndex {
			font-size: 12px;
			color: #767676;
			margin-bottom: 5px;
			
		}
		.bodyIndex span:nth-child(2){
			 margin-right: 16rpx;
		}
   }
	

	.bodymark {
		font-size: 12px;
		color: #767676;
	}

	.demo-scroll-block {
		height: 100%;
	}

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		// width: 93%;
		height: 258rpx;
		transform: translate(15px, 86%); // height: 100%;
		.rect {
			width: 100%;
			height: 100%;
			// background-color: #fff;
		}
	}

	.availabel {
		height: 60vh;

		// padding-top: 74px;
		image {
			height: 128%;
			transform: translateX(28px)
		}
	}

	.disp {
		display: flex;
	}
</style>