<template>
	<view>
		<view class="container">
			<view class="banner-box">
				<image src="/static/imgs/myHealthBanner.png" mode=""></image>
				<!-- <image v-if="currentTabIndex == 4" src="/static/imgs/visitor.png" mode=""></image> -->
			</view>
			<view class="main">
				<view class="tab-box">
					<view class="tab-item" :class="currentTabIndex == 0 ? 'active_tab' : ''" @click="currentTabIndex = 0">库存统计</view>
					<view class="tab-item" :class="currentTabIndex == 1 ? 'active_tab' : ''" @click="currentTabIndex = 1">出入库明细</view>
					<!-- <view class="tab-item" :class="currentTabIndex == 2 ? 'active_tab' : ''" @click="currentTabIndex = 2">通行记录</view> -->
				</view>
				<!-- 物资统计-->
				<view class="reservation-box" style="background-color: #fff;padding-top: 30upx;" v-if="currentTabIndex == 0">

					<view class="list-box" v-if="currentTabIndex == 0 && resourceList.length > 0">
					<view style="border-top:1px solid #d2d2d2;"></view>
						<view class="form-item" style="width: 100%;margin: 5px 0px 5px 0px;">
							<view class="visitcon w15" >类别</view>
							<view class="visitcon w15">规格</view>
							<view class="visitcon w15">总数</view>
							<view class="visitcon w15">剩余</view> 
							<view class="visitcon w15">已发放</view> 
							<view class="visitcon w25">操作</view> 
						</view>
						<view
							style="padding: 10px 5px 10px 5px;border-top:1px solid #d2d2d2;align-items: center;display: flex;"
							class="form-item"
							v-for="(item, index) in resourceList"
							:key="index" 
						>
							<view class="visitcon w15">{{ item.resourceName}}</view>
							<view class="visitcon w15" >{{ item.type }}</view>
							<view class="visitcon w15" >{{ item.total }}</view>
							<view class="visitcon w15" >{{ item.total-item.issuedNum }}</view>
							<view class="visitcon w15" >{{ item.issuedNum }}</view>
							<view class="visitcon w25" >
								<view class="visitconContent w40"  @click="resourceEdit(item.resourceName,'1','0')" >
									入库
								</view>
								<view class="visitconContent w40"  @click="resourceEdit(item.resourceName,'0',item.total-item.issuedNum)">
									出库
								</view>
							</view>
						</view>
					</view>
<!-- 
					<content-none v-if="visitTj.length==0" :padTop="20" style="padding-bottom: 20vh;"></content-none>
					<content-none v-if="currentTabIndex == 0 && visitTj.length==0" :padTop="20" style="padding-bottom: 20vh;"></content-none>
 -->
				</view>

				<!-- 物资明细列表 -->
				<view v-else-if="currentTabIndex == 1" >
					<view class="form-item searchv" style="margin-bottom: 20upx;">
						<picker class="time" mode="date" @change="bindMsgDateChange">
							<view class="">{{ seachListStartdate }}</view>
						</picker>
						<text class="timecenter">至</text>
						<picker class="time" mode="date" @change="seachMsgEnddateChange">
							<view class="">{{ seachListEnddate }}</view>
						</picker>
					</view>
					 
					<view style="border-top:1px solid #d2d2d2;"></view>
					<view class="form-item" style="width: 100%;padding: 20upx 10upx;">
						<view class="visitcon w10">序号</view>
						<view class="visitcon w15">类别</view>
						<view class="visitcon w15">规格</view>
						<view class="visitcon w15">数量</view> 
						<view class="visitcon w15">操作</view> 
						<view class="visitcon w30">时间</view> 
					</view>
					 	<view
					 		style="padding: 20upx 10upx;border-top:1px solid #d2d2d2;align-items: center;display: flex;"
					 		class="form-item"
					 		v-for="(item, index) in resourceDetailList"
					 		:key="index">
					 		<view class="visitcon w10">{{index+1}}</view>
					 		<view class="visitcon w15">{{ item.resourceName }}</view>
					 		<view class="visitcon w15">{{ item.type }}</view>
							<view class="visitcon w15">{{ item.num }}</view>
							<view v-if="item.resourceType == 1" class="visitcon w15">入库</view>
							<view v-else-if ="item.resourceType == 0" class="visitcon w15">出库</view>
							<view class="visitcon w30">{{ item.time }}</view>
					 	</view>
						 <content-none v-if="resourceDetailList.length==0" :padTop="20" style="padding-bottom: 20vh;"></content-none>
					 </view>
 
					
					<load-more v-if="currentTabIndex == 1" :loadingType="loadingType" :contentText="contentText"></load-more>
 
					<!-- <content-none v-if="tjListMsg.length==0" :padTop="20" style="padding-bottom: 20vh;"></content-none>
					<load-more v-if="currentTabIndex == 1" :loadingType="loadingType" :contentText="contentText"></load-more>
 
					 <content-none v-if="currentTabIndex == 1 && tjListMsg.length==0" :padTop="20" style="padding-bottom: 20vh;"></content-none>
					<load-more v-if="currentTabIndex == 1 && currentTabIndex == 1" :loadingType="loadingType" :contentText="contentText"></load-more>
 -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getDate, alertTip, callbackRequest, getStorage, regPhone, formatDate,removeElementOfArray } from '@/common/util.js';
import {getMyHealthyStatistics,getMyHealthyDetailed } from '@/common/api.js';
import loadMore from '@/components/loadMore.vue';
import contentNone from '@/components/contentNone.vue';
import datetimePicker from '@/components/dateTime.vue';
import uniCalendar from '@/components/uni-calendar/uni-calendar.vue';
let currentTime = new Date().getTime();
let millisecond = 24 * 7 * 60 * 60 * 1000;
export default {
	data() {
		return {
		 
			seachListStartdate: this.getDay(),
			seachListEnddate: this.getDay(),
			visitlist:[],
			total:0,
			ycTotal:0,
			depList2:[],
			state:["全部","异常"],
			stateIndex:0,
			visitTj: [],
			tjListMsg: [],	 
			visitStateIndex:0,
			timeoutIndex:0, 
			carTypeIndex:0,
			tmpV:37.6,
			page: 1,
			pageSize: 10,
			resourceList:[
				{total:'100',issuedNum:'20',resourceName:'口罩',resourceType:'1',type:'包'},
				{total:'100',issuedNum:'20',resourceName:'酒精',resourceType:'2',type:'瓶'},
				{total:'100',issuedNum:'20',resourceName:'消毒液',resourceType:'3',type:'瓶'},
				{total:'100',issuedNum:'20',resourceName:'测温枪',resourceType:'4',type:'个'}
			],
			resourceDetailList:[
				{ num:'20',resourceName:'口罩',resourceType:'1',time:'2020-04-09',type:'包'},
				{num:'20',resourceName:'酒精',resourceType:'1',time:'2020-04-09',type:'瓶'},
				{num:'20',resourceName:'消毒液',resourceType:'0',time:'2020-04-09',type:'瓶'},
				{num:'20',resourceName:'测温枪',resourceType:'0',time:'2020-04-09',type:'个'}
			],
			loadingType: 0, //0-loading前；1-loading中；2-没有更多了
			contentText: {
				contentdown: '上拉加载更多',
				contentrefresh: '正在加载...',
				contentnomore: '没有更多数据了'
			},
			insideloadingType: 0,
			userId: getStorage('userInfo').id,
			// userId:"23ee5fc8991240ce8a1b9348c2b7c07e",
			currentTabIndex: 0,
			overTime:"",//0未超时，1超时
			inOrOut:"",//0进1出
		};
	},
	components: {
		loadMore,
		contentNone,
		datetimePicker
	},
	onLoad(option) {
		this.currentTabIndex = option.currentTabIndex || 0;

		if (this.currentTabIndex == 1) {
			this.getMyHealthyDetailedList();
		}else{
			// this.getParkRecordCount();
			// this.getMyHealthyStatistics();
		}
	},
	watch: {
		currentTabIndex: function(newVal, oldVal) {
			if (newVal == 1) {
				this.page = 1;
				this.loadingType = 0;
				this.insideloadingType = 0;
				this.getMyHealthyDetailedList();
			} else {
				this.seachListStartdate=this.getDay();
				this.seachListEnddate= this.getDay();
				this.visitStateIndex=0;
				this.timeoutIndex = 0;
				this.carTypeIndex = 0;
				this.getMyHealthyStatistics();
			}
		}
	},
	methods: {
		resourceEdit(name,type,num){
			console.log("---name--"+name+"--type--"+type+"---num--"+num)
			// if(type == 0){
				uni.navigateTo({
					url: '/pages/prevention-resources/prevention-resources-edit?name='+name+'&num='+num+'&type='+type,
				});
			// }else if(type == 1){
			// 	uni.navigateTo({
			// 		url: '/pages/prevention-resources/prevention-resources-edit?currentTabIndex=1'
			// 	});
			// }
		},
		getMyHealthyStatistics(){
			var self = this;
			let data = {
				method: getMyHealthyStatistics,
				data: {
					"startDate":this.seachStartdate,
					"endDate":this.seachEnddate,
					"userId":this.userId
				 }
			};
			callbackRequest(data).then(res => {
				if (res.data.returnCode == 1) {
					self.total = res.data.returnData.total;
					self.ycTotal = res.data.returnData.ycTotal;
					self.visitTj =  res.data.returnData.visitlist;
					self.depList2 =  res.data.returnData.depList;
					self.depList2 = removeElementOfArray('公司领导',self.depList2)
					self.tmpV =  res.data.returnData.tmpV;
				}
			});
		},
		getDay() {
			var date1 = new Date();
			var year = date1.getFullYear();
			var month = date1.getMonth() + 1;
			if(month<10){
				month = "0"+month;
			}
			var day = date1.getDate();
			// if(day<10){
			// 	day = "0"+day;
			// }
			return year + '-' + month + '-' + day;
		},
		 
		getMyHealthyDetailedList() {
			let data = {
				method: getMyHealthyDetailed,
				data: { 
					page: this.page,
					dep: this.depList2[this.carTypeIndex], 
					startDate: this.seachListStartdate, 
					type:this.state[this.stateIndex],
					endDate: this.seachListEnddate, 
					"userId":this.userId
				}
			};
			callbackRequest(data).then(res => {
				if (res.data.returnCode == 1) {
					if (this.page == 1) {
						this.tjListMsg = res.data.returnData;
					} else {
						if (res.data.returnData.length > 0) {
							this.tjListMsg = [...this.tjListMsg, ...res.data.returnData];
							this.loadingType = 0;
						} else {
							this.loadingType = 2;
						}
					}
				}
			});
		},
		getParkRecordCount(){
			let data = {
				method: getParkRecordCount,
				data: {startDate: this.seachStartdate, endDate: this.seachEnddate}
			};
			callbackRequest(data).then(res => {
				if (res.data.returnCode == 1) {
					this.visitTj = res.data.returnData;
				}
			});
		},

		bindMsgDateChange: function(e) {
			this.page = 1;
			this.loadingType = 0;
			this.seachListStartdate = e.target.value;
			this.getMyHealthyDetailedList();
		},
		seachMsgEnddateChange: function(e) {
			this.page = 1;
			this.loadingType = 0;
			this.seachListEnddate = e.target.value;
			this.getMyHealthyDetailedList();
		},
		 
		stateChange(b){
			this.page = 1;
			this.loadingType = 0;
		 	this.stateIndex = b.detail.value;
		 	this.getMyHealthyDetailedList();
		},
		carTypeChange(b){
			this.page = 1;
			this.loadingType = 0;
			this.carTypeIndex = b.detail.value;
			this.getMyHealthyDetailedList();
		},
 
	},
	onReachBottom() {
		if (this.currentTabIndex == 1) {
			if (this.loadingType !== 0 || this.currentTabIndex != 1) {
				return;
			}
			this.loadingType = 1;
			this.page = this.page + 1;
			this.getMyHealthyDetailedList();
		} 
	}
};
</script>

<style lang="scss">
@import '@/static/css/common.scss';
.searchv {
	margin-top: 0upx;
	text-align: center;
}
.bRed{
	color:#FF0000;
}
.search {
	margin-top: 20upx;
	display: inline-block;
	background-color: #00c277;
	color: #fff;
	margin-left: 2vh;
	font-size: 2vh;
	border-radius: 1vh;
	padding: 1vh 2vh 1vh 2vh;
}
.timecenter {
	font-size: 26upx;
	margin-left: 10upx;
	margin-right: 10upx;
}
.time {
	margin-top: 10upx;
	font-size: 28upx;
	display: inline-block;
	padding: 5px;
	border: 1px solid #c2c2c2;
}
.visitcon {
	display: inline-block;
	text-align: center;
	font-size: 14px;
}
.visitconContent {
	text-decoration: underline;
	display: inline-block;
	text-align: center;
	font-size: 14px;
}
.w40 {
	width: 40%;
}
.w45 {
	width: 45%;
}
.w35 {
	width: 35%;
}
.w25 {
	width: 25%;
}
.w15 {
	width: 15%;
}
.w10 {
	width: 10%;
}
.w20 {
	width: 20%;
}
.w33 {
	width: 33.3%;
}
.w30 {
	width: 30%;
}
.w45 {
	width: 45%;
}
.w50 {
	width: 50%;
}
.w20 {
	width: 20%;
}
.container {
	position: relative;
	overflow: hidden;
	background: #f8f8f8;
	min-height: 100vh;
	.banner-box {
		width: 100%;
		height: 240upx;
		position: absolute;
		top: 0;
		left: 0;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.main {
		margin: 172upx 40upx 0;
		position: relative;

		z-index: 10;

		.tab-box {
			overflow: hidden;
			border-radius: 10upx 10upx 0 0;
			background: rgba(132, 149, 167, 0.8);
			height: 70upx;

			.tab-item {
				float: left;
				height: 70upx;
				width: 50%;
				font-size: 30upx;
				color: #e5f6ff;
				text-align: center;
				line-height: 70upx;
			}

			.active_tab {
				background: #fff;
				color: #333;
				border-radius: 10upx 10upx 0 0;
				font-weight: bold;
			}
		}
		.form-box {
			padding: 20upx 30upx 0upx;
			margin-bottom: 20upx;
			background: #fff;
			.form-item {
				overflow: hidden;
				border-bottom: 1px solid #eee;
				padding: 30upx 0;
				.label {
					float: left;
					width: 150upx;
					font-size: 28upx;
					color: #333;
					font-weight: bold;
					line-height: 50upx;
				}
				.ipt-box {
					margin-left: 160upx;
					input {
						width: 100%;
						height: 50upx;
						line-height: 50upx;
						font-size: 26upx;
						color: #666;
					}
					.pic {
						width: 60upx;
						height: 60upx;
						line-height: 80upx;
					}
				}
				.select {
					.arrow {
						float: right;
						width: 16upx;
						height: 29upx;
						margin-top: 10upx;
					}
					input {
						width: 70%;
					}
				}
				.jian {
					width: 50upx;
					height: 50upx;
					margin-left: 280upx;
				}
				.select {
					.arrow {
						float: right;
						width: 16upx;
						height: 29upx;
						margin-top: 10upx;
					}

					.picker {
						height: 50upx;
						line-height: 50upx;
						font-size: 26upx;
						color: #666;
					}
				}
			}
			.sure-btn {
				width: 100%;
				height: 80upx;
				font-size: 28upx;
				color: #fff;
				text-align: center;
				line-height: 80upx;
				border-radius: 8upx;
				background: #0066cc;
				background: linear-gradient(to right, #ffc200, #ff9000); /*设置按钮为渐变颜色*/
				margin-top: 50upx;
			}
		}
		.list-box {
			.list-item {
				background: #fff;
				margin-bottom: 10upx;
				.title {
					border-bottom: 1px solid #eee;
					padding: 20upx 10upx;
					overflow: hidden;
					line-height: 40upx;
					.line {
						display: inline-block;
						width: 10upx;
						height: 32upx;
						background: $assistColor;
						margin-top: 4upx;
					}
					.text {
						display: inline-block;
						font-size: 28upx;
						color: #444;
						font-weight: bold;
						margin-left: 10upx;
						vertical-align: top;
					}
					.status {
						font-size: 26upx;
						color: $assistColor;
						float: right;
						margin-right:20upx;
					}
					.status1 {
						font-size: 26upx;
						color: #5063c3;
						float: right;
					}
					.status2 {
						font-size: 26upx;
						color: red;
						float: right;
						margin-right:20upx;
					}
				}
				.content {
					padding: 10upx 20upx;
					// border-bottom:1px solid #d2d2d2;
					// border-radius: 10upx;
					// padding:10upx 10upx 60upx 10upx;
					.info-item {
						overflow: hidden;
						padding-bottom: 10upx;
						.fl-text {
							float: left;
							font-size: 26upx;
							color: #444;
							font-weight: bold;
							line-height: 40upx;
						}
						.fr-text {
							float: right;
							font-size: 26upx;
							color: #666;
							line-height: 40upx;
						}
						.green {
							color: #00c277;
						}
						.red{
							color: red;
						}
					}
				}
			}
			.comment-btn {
				float: right;
				font-size: 24upx;
				border-radius: 10upx;
				color: #fff;
				line-height: 50upx;
				text-align: center;
				min-width: 140upx;
				background-color: #00c277;
			}
		}
	}
}

</style>
