<template>
	<view class="examine">
		<view class="carousel">
			<image v-if="schoolInfo.image" class="urlItem" :src="schoolInfo.image"></image>
			<image v-else class="urlItem" src="../../static/school/picture.png"></image>
			<view class="nameTitle">
				<view class="itemschool" @click="addItem">
					<span>校园名称</span>
					<span
						style=" white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 80px;text-align: center">{{userInfo.station?userInfo.station:'未选择'}}</span>
				</view>
				<view class="itemschool">
					<span>星级评定</span>
					<spna>
						{{scoreTotal?scoreTotal:'无评定'}}
					</spna>

				</view>
				<view class="itemschool">
					<span>三色预警</span>
					<span
						:class="[threeColor == '黄色预警'?'grren':threeColor == '橙色预警'?'yellow':threeColor == '红色预警'?'red':'']">{{threeColor?threeColor:'无预警'}}</span>
				</view>
				<u-picker itemHeight="75" @confirm="yearpicker" :show="yearName"
					:columns="yearunitColums" keyName="label" @cancel="yearName = false"></u-picker>
			</view>

		</view>
		<!-- 按钮 -->
		<view class="subfunc">
			<view class="subfunction" style="margin-top: 95rpx;">
				<view class="subfunctionItem" v-for="(item,index) in buttonList" :key="item.id"
					@click="onsubfunct(item)">
					<view class="subfunctionIndex">
						<image :src="item.url"></image>
					</view>
					<view style=" font-size: 12px;color: #414141;">{{item.title}}</view>
				</view>
			</view>
		</view>
		
		<!-- <view class="subfunc">
			<view class="subfunction">
				<view class="subfunctionItem" v-for="(item,index) in buttonList" :key="item.id"
					@click="onsubfunct(item)">
					<view class="subfunctionIndex">
						<image :src="item.url"></image>
					</view>
					<view style=" font-size: 12px;color: #414141;">{{item.title}}</view>
				</view>
			</view>
		</view> -->
		<view style="background-color: #e9eef4;height: 15rpx"></view>
		<!-- 数据 -->
		<view class="dataName">
			<view class="dataItem" @click="unitClick">
				<span>校园名称</span>
				<span>{{schoolInfo.name?schoolInfo.name:'请选择学校'}}</span>

			</view>
			<u-picker itemHeight="75" @confirm="pickerUnitClick" :show="showunit" :columns="unitColums" keyName="label"
				@cancel="showunit = false" @close="showunit = false"></u-picker>
			<view class="dataItem">
				<span style="width: 68rpx">地址</span>
				<span style="white-space: nowrap; overflow: hidden;text-overflow: ellipsis;">
					{{schoolInfo.address?schoolInfo.address:'未填写'}}
				</span>
			</view>
			<view class="dataItem">
				<span>联系人</span>
				<span>{{schoolInfo.legal_person?schoolInfo.legal_person:'志愿者'}}</span>
			</view>
			<view class="dataItem">
				<span>联系电话</span>
				<span>{{schoolInfo.phone?schoolInfo.phone:'志愿者'}}</span>
			</view>
		</view>

		<view>
			<u-modal @cancel="schoolshow = false" zoom @confirm="confirms" :show="schoolshow" :asyncClose="true"
				:showCancelButton="true" width="500rpx" content='是否要重新选择学校?'></u-modal>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations,
		mapState,
	} from 'vuex';
	import {
		getstationbase,
		getstationList,
		postAddupdate,
		getstarRating,
		gettimelabellist
	} from '@/api/login'
	import {
		timestampFormatTime,
		Time
	} from '@/utils/index.js';
	export default {
		data() {
			return {
				yearName:false,
				yearunitColums:[],
				year:'2022年上半年',
				schoolshow: false,
				buttonList: [{
						id: 0,
						title: '风采上传',
						url: '../../static/school/风采上传.png'
					},
					{
						id: 1,
						title: '护校考勤',
						url: '../../static/school/护校考勤.png'
					},
					{
						id: 2,
						title: '日常检查',
						url: '../../static/school/日常检查.png'
					},
					
					{
						id: 3,
						title: '整改工单',
						url: '../../static/school/整改工单.png'
					},
					{
						id: 4,
						title: '整改回单',
						url: '../../static/school/整改回单.png'
					},					

					// {
					// 	id: 6,
					// 	title: '安保动态',
					// 	url: dynamics
					// },
					
					{
						id: 10,
						title: '一键报警',
						url: '../../static/school/日常检查.png'
					},


				],
				scoreTotal: '',
				threeColor: '',
				showunit: false,
				unitColums: [], //学校
			};
		},
		computed: {
			// 拿取vuex数据
			...mapGetters({
				userInfo: 'users/getLoginInfo',
				schoolInfo: 'users/getschoolList',
			})
		},
		onShow() {
			this.getstaRratingList()
			// uni.showLoading({
			// 	title:'加载中'
			// })
			// setTimeout(()=>{
			// 	uni.hideLoading()
			// },500)
		},
		methods: {
			...mapMutations({
				schoolList: 'users/schoolList',
				editstation: 'users/editstation',
			}),
			onSwiper(e) {
				this.urllist = this.list2[e.current];
			},

			scoreTotalStation: function(scoreTotalStation) {
				const number = scoreTotalStation / 10
				if (this.userInfo.id) {
					if (number >= 95) {
						this.scoreTotal = '五星'
					} else if (number >= 85) {
						this.scoreTotal = '四星'
					} else if (number >= 75) {
						this.scoreTotal = '三星'
					} else if (number >= 65) {
						this.scoreTotal = '二星'
					} else {
						this.scoreTotal = '一星'
					}
				} else {
					this.scoreTotal = '无评定'
				}

			},
			levelStation: function(scoreTotalStation) {
				const number = scoreTotalStation / 10
				if (this.userInfo.id) {
					if (number >= 90.5 && number <=95) {
						this.threeColor = '黄色预警';
					} else if (number >= 80 && number <=90) {
						this.threeColor = `橙色预警`;
					} else if(number < 80){
						this.threeColor = `红色预警`;
					}else{
						 this.threeColor = '无预警';
					}
				} else {
					this.threeColor = '无预警';
				}


			},

			getstaRratingList() {
				getstarRating({
					brigade: "长沙芙蓉区",
					station: this.schoolInfo.name,
					schoolTime: this.year
				}).then((res) => {
					console.log(res.data);
					if (res.data.length == 0) {
						this.scoreTotal = '无评定'
						this.threeColor = '无预警'
					} else {
						const {
							levelStation,
							scoreTotalStation
						} = res.data && res.data[0]
						this.scoreTotalStation(scoreTotalStation)
						this.levelStation(scoreTotalStation)
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			onsubfunct(e) {
				switch (e.id) {
					case 0:
						if (this.userInfo.id) {
								uni.navigateTo({
									url: '/pagesD/uploadpictures/uploadpictures'
								});
						} else {
							uni.showToast({
								title: '无权限'
							});
						}
						break;
					case 1:
						if (this.userInfo.name) {
								uni.navigateTo({
									url: `/components/map/map?index=${e}`
								});
						} else {
							uni.showToast({
								title: '无权限'
							});
						}
						break;
						case 2:
							if (this.userInfo.id && this.userInfo.personType !== 'guarder') {
									uni.navigateTo({
										url: `/components/dailyinspection/dailyinspection?index=${e.id}`
									});
							} else {
								uni.showToast({
									title: '无权限'
								});
							}
							break;
					case 3:
						if (this.userInfo.id) {
								uni.navigateTo({
									url: `/pagesD/work_order/work_order?index=${e.id}`
								});
						} else {
							uni.showToast({
								title: '无权限'
							});
						}
						break;
					case 4:
						if (this.userInfo.id && this.userInfo.personType !== 'guarder') {
								uni.navigateTo({
									url: `/pagesD/workreceipt/workreceipt?index=${e.id}`
								});
						} else {
							uni.showToast({
								title: '无权限'
							});
						}
						break;					
					case 6:
						uni.showToast({
							title: '正在开发中'
						});
						break;
					
					case 10:
						uni.navigateTo({
							url: `/components/police/police?index=${e}`
						});
						break;
				}
			},
			// 获取每一个学校信息
			unitClick() {
				if (this.userInfo.id && this.userInfo.personType !== "volunteer" && this.userInfo.personType !==
					"guarder") {
					this.schoolshow = true
				} else {
					uni.showToast({
						title: '无权限'
					});
				}
			},
			confirms() {
				this.schoolshow = false
				setTimeout(() => {
					this.showunit = true
					this.stationList()

				}, 800)
			},
			stationList() {
				const that = this;
				var unitList = undefined
				console.log(this.userInfo.borough);
				if (this.userInfo.borough == '公安机关' || this.userInfo.borough == '教育局') {
					console.log(111);
					unitList = {
						brigade: '长沙芙蓉区',
						borough: ''
					};
				} else {
					unitList = {
						brigade: '长沙芙蓉区',
						borough: this.userInfo.borough
					};
				}
				getstationList(unitList)
					.then((res) => {
						console.log(res);
						let matterunit = res.data
							.filter((v) => v.nickname && v.name)
							.map((res) => ({
								name: res.name,
								label: res.nickname
							}));
						that.unitColums = [matterunit];
					})
					.catch((error) => {});
			},
			// 单位触发确定
			pickerUnitClick(e) {
				console.log(e.value[0].name);
				if (!e.value.lenght) {
					getstationbase({
						name: e.value[0].name
					}).then((res) => {
						this.schoolList(res.data)
						postAddupdate({
							id: this.userInfo.id,
							name: this.userInfo.name,
							station: this.schoolInfo.name,
							detachment: this.schoolInfo.detachment
						}).then((resname) => {
							this.editstation(this.schoolInfo.name)
							this.getstaRratingList()
						}).catch((err) => {})

					}).catch((error) => {})
				}
				this.showunit = false;
			},
			addItem(){
				this.yearName = true
				this.addItemList()
			},
			async addItemList(){
				 const resp = await gettimelabellist({brigade: "长沙芙蓉区",type:'star'})
				 let matter = resp.data
				 	.filter((v) => v.schoolTime && v.schoolTime)
				 	.map((res) => ({
				 		id: res.schoolTime,
				 		label: res.schoolTime
				 	}));
				 this.yearunitColums = [matter];
			},
			yearpicker(e){
				 this.year = e.value[0].label
				 this.yearName = false
				 this.getstaRratingList()
			}

		},
	};
</script>

<style lang="scss">
	.examine {
		height: 100vh;
		// background-color: #e9eef4;
		background-color: #fff;

		.carousel {
			// position: relative;
			overflow: hidden;
			width: 100%;
			height: 350rpx;

			.urlItem {
				width: 100%;
				height: 100%;
			}

			.nameTitle {
				position: absolute;
				top: 296rpx;
				left: 25px;
				height: 125rpx;
				background-color: #fff;
				width: 650rpx;
				border-radius: 12rpx;
				/* 阴影尺寸为1px */
				box-shadow: 0px 10px 10px -4px #e3e3e3;
				display: flex;
				font-size: 14px;
				align-items: center;

				.itemschool {
					width: 120px;
					border-right: solid 1.5rpx #dadada;
					display: flex;
					flex-direction: column;
					/* justify-content: space-around; */
					align-items: center;
				}

				.itemschool span:nth-child(1) {
					margin-bottom: 20rpx;
					color: #898a8a;
					font-size: 12px;
					margin-left: -8px;
				}
			}

			.nameTitle .itemschool:nth-child(2) {
				span:nth-child(2) {
					margin-left: -46rpx;
				}
			}

			.nameTitle .itemschool:nth-child(3) {
				border-right: none;

				span:nth-child(2) {
					margin-left: -44rpx;
				}
			}

			
		}

		.subfunc {
			// height: 400rpx;
			background-color: #fff;
			overflow: hidden;
		}

		.subfunction {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			

			.subfunctionItem {
				width: 246rpx;
				height: 140rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding-bottom: 10rpx;

				.subfunctionIndex {
					width: 65rpx;
					height: 65rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.dataName {
			background-color: #fff;
			overflow: hidden;
			height: 41%;

			.dataItem {
				height: 110rpx;
				line-height: 64rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 45rpx;
				font-size: 12px;
				color: #767676;
				border-bottom: solid 1px #ececf7;
			}
		}


		.red {
			color: red;
		}

		.grren {
			color: green;
		}

		.yellow {
			color: #fa9900;
		}
	}
</style>