<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="addYear" width="100px">
								<view class="dataUserunit" :style="{color: policeStation.year ||'#c2cad2'}" name="unit"
									v-model="policeStation.year">{{policeStation.year || "请选择年份"}}</view>
							</view>
						</u-form-item>
						<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="yearpickerConfrm" :show="yearShowunit"
						:columns="yearunitColums" keyName="label" @cancel="yearShowunit = false"></u-picker>
					<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" @click="onCharts(item)">
								<view>
									<view class="bodyIndex">
										<span>所属派出所:</span>
										<span>{{item.borough}}</span>
									</view>
									<view class="bodyIndex">
										<span>警务区:</span>
										<span style="font-weight: 700;">{{item.detachment}}</span>
									</view>
									<view class="bodyIndex">
										<span>学校名称:</span>
										<span style="color: red;">{{item.station}}</span>
									</view>
									<view class="bodyIndex">
										<span>学校评分:</span>
										<span style="color: red;">{{item.scoreTotal/10}}</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>
				</view>
			</scroll-view>

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

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

				clockInList: [],
				policeStation: {
					station: '韭菜园所',
					school: '',
					year:'2022年上半年'
				},
				yearShowunit:false,
				yearunitColums:[],
				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() {
				getcolorList({
					brigade: "长沙芙蓉区",
					borough: this.policeStation.station,
					station: this.policeStation.school,
					schoolTime:this.policeStation.year
					
				}).then((res) => {
					this.clockInList = res.data
					console.log(this.clockInList);
					this.clockin = res.data.length
				})
			},

			scrolltolower() {
				this.index += 5
				console.log(this.current);
				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.gettimelabel()
						this.policeStation.station = '韭菜园所'
					
				}, 1000)
			},
			// 年份
			addYear(){
				this.yearShowunit = true
				this.gettimelabel()
			},
			async gettimelabel(){
			const resp = await gettimelabellist({brigade: "长沙芙蓉区",type:'color'})
			let matter = resp.data
				.filter((v) => v.schoolTime && v.schoolTime)
				.map((res) => ({
					id: res.schoolTime,
					label: res.schoolTime
				}));
			this.yearunitColums = [matter];
			},
			yearpickerConfrm(e){
				 this.policeStation.year = e.value[0].label
				 this.yearShowunit = false
			},
			// 
			onCharts(item){
				 uni.setStorageSync('chartsColor',item)
				 uni.navigateTo({
				 	url:`/components/starCharts/starCharts?index=${2}`
				 })
			}
		},
	}
</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;
	}

	.bodyIndex {
		display: flex;
		justify-content: space-between;
		font-size: 12px;
		color: #767676;
		margin-bottom: 5px
	}

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

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

	.warp {
		width: 200px;
		height: 200px;
		background-color: #fff;
	}

	.availabel {
		height: 60vh;

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

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