<template>
	<view class="hzIndex">
		<hzHeader title="物资申请"></hzHeader>
		<!-- <view class="banner-box">
			<image v-if="currentTabIndex == 0" src="/static/images//epidemic/epidemic-banner.jpeg" mode=""></image>
			<image v-if="currentTabIndex == 1" src="/static/images//epidemic/epidemic-banner.jpeg" mode=""></image>
		</view> -->
		<view class="hzContent">
		<view class="main">
			<view class="tab-box">
				<view class="tab-item" :class="currentTabIndex == 0 ? 'active' : ''" @click="currentTabIndex = 0">物资申请<view class="activeLine" v-if="currentTabIndex == 0"></view></view>
				<view class="tab-item" :class="currentTabIndex == 1 ? 'active' : ''" @click="currentTabIndex = 1">申请记录<view class="activeLine" v-if="currentTabIndex == 1"></view></view>
			</view>
			<view v-if="currentTabIndex == 0">
				<view class="form-box" style="border-radius: 10upx; margin: 20upx 0px;">
					<view class="form-item" style="border: none;">
						<text class="label">姓　　名:</text>
						<view class="ipt-box"><input class="top-t" v-model="formData.userName" placeholder="请输入姓名" type="text" maxlength="50" disabled="true" /></view>
					</view>
					<view class="form-item" style="border: none;">
						<text class="label">联系方式:</text>
						<view class="ipt-box"><input class="top-t" v-model="formData.phone" placeholder="请输入联系方式" type="text" maxlength="50" disabled="true" /></view>
					</view>
					<view class="form-item"  style="border: none;">
						<text class="label">部　　门:</text>
						<view class="ipt-box"><input class="top-t" v-model="formData.orgName" placeholder="请输入部门" type="text" maxlength="50" disabled="true" /></view>
					</view>
					<view class="form-item" >
						<text class="label">事　　由:</text>
						<view class="ipt-box">
							<textarea style="border: 1px solid #eee;width:auto;height: 160upx;padding: 10upx;border-radius: 10upx;font-size: 26upx;color: #666;" v-model="formData.reason"  maxlength="120" placeholder="请输入(120字以内)"/>
							<!-- <input class="top-t" v-model="formData.reason" placeholder="请输入部门" type="text" maxlength="50" disabled="true" /> -->
						</view>
					</view>
				</view>
				
				<view v-for="(item, index) in formData.supplies" :key="index" class="form-box" >
					<view>
						<view class="visitor">
							<view class="form-item">
								<text class="label">物　　资：</text>
								<view class="select">
									<image class="arrow" src="/static/icons/right-arrow.png" mode=""></image>
									<picker class="picker"  :range="supplyNames" @change="changeDosage($event, index)" range-key="name" >
										<view>{{ supplyNames[item.nameIndex].name }}</view>
									</picker>
								</view>
							</view>
							<view class="form-item">
								<text class="label">单　　位：</text>
								<view class="ipt-box"><input class="name" v-model="supplyNames[item.nameIndex].unit " type="text" disabled="true" /></view>
							</view>
							<view class="form-item">
								<text class="label">数　　量：</text>
								<view class="ipt-box">
									<view class="">
										<input class="name" v-model="item.num" type="number" placeholder="请输入数量" />
									</view>
								</view>
							</view>
							<view class="form-item">
								<text class="label">备　　注：</text>
								<view class="ipt-box">
									<view class="">
										<textarea style="border: 1px solid #eee;width:auto;height: 160upx;padding: 10upx;border-radius: 10upx;font-size: 26upx;color: #666;" v-model="item.remarks"  maxlength="120" placeholder="请输入(120字以内)"/>
									</view>
								</view>
							</view>
							<view class="form-item" v-if="formData.supplies.length > 0 && index > 0">
								<image class="jian" src="../../static/imgs/jian.png" @click="jianBtn(index)" alt=""></image>
							</view>
						</view>
					</view>
				</view>
				<!-- 添加 -->
				<view id="addbtn" class="add clear" @click="addBtn()">
					<view class="addbtn"><text >+ 新增</text></view>
				</view>
				<view class="form-box" style="border-radius: 10upx;margin-top: 20upx;padding-top: 0px;">
					<view class="form-item" >
						<text class="label">审批人:</text>
						<view class="ipt-box select">
							<image class="arrow" src="/static/icons/right-arrow.png" mode=""></image>
							<picker class="picker" v-if="examList.length > 0" :range="examList" @change="changeExamList" range-key="name">
								<view>{{ examList[examIndex].name }}</view>
							</picker>
						</view>
					</view>
				</view>
				
				<view class="occupied"></view>
				<view class="footer-btn footer-btn-color" @click="submit()"><view class="btn">提交</view></view>
			</view>

			<view class="list-box" v-if="currentTabIndex == 1">
				<view class="list-item" v-for="(item, index) in list" :key="index" @click="toDetail(item)">
					<view class="title">
						<!-- <text class="line"></text> -->
						<image src="/static/img/materialIcon.png" mode="" style="width: 35upx;height: 40upx;margin-left: 20upx;vertical-align: middle;"></image>
						<text class="text">物资申请</text>
						<text v-if="item.EXAMINE_STATE ==0" class="statusred" style="color: #ff9000;background-color: #FFEFE3;" >待审核</text>
						<text v-if="item.EXAMINE_STATE ==2" class="statusred" style="color: #BD1515;background-color: #F6DFDF;">已拒绝</text>
						<text v-if="item.EXAMINE_STATE ==1" class="statusred" style="color: #0DB0A7;background-color: #C1EFEA;">已通过</text>
					</view>
					<view class="content">
						<view class="info-item">
							<view class="fl-text">申请人:</view>
							<view  class="fr-text">{{item.USER_NAME}}</view>
						</view>
						<view class="info-item">
							<view class="fl-text">联系电话:</view>
							<view  class="fr-text">{{item.PHONE}}</view>
						</view>
						<view class="info-item">
							<view class="fl-text">预定日期:</view>
							<view  class="fr-text">{{formatDate(item.GMT_CREATED,'dateTime')}}</view>
						</view>
						<view class="info-item">
							<view class="fl-text">申请物资:</view>
							<view class="fr-text">
								<text v-for="(item1, index1) in item.detailList" :key="index1">
									<!-- <text v-if="index1!=0">，</text> -->
									<br v-if="index1!=0">
									{{ item1.MATERIAL_NAME+"("+item1.SPECS+"*"+item1.NUM+")" }}
								</text>
							</view>
						</view>
						<!-- <view  class="info-item" style="width: 100%;text-align: center;" @click="details(item)">
							<text style="width: 100%;color: #4db4ea;font-size: 28upx;">点击查看详情</text>
						</view> -->
					</view>
				</view>
			</view>

			<content-none v-if="currentTabIndex != 0 && list.length == 0" :padTop="20"></content-none>
		</view>
		<load-more v-show="currentTabIndex == 1" :loadingType="loadingType" :contentText="contentText"></load-more>
		</view>
	</view>
</template>

<script>
import { materialAdd,materialList,getMaterialExamUser,getMaterialInfoList} from '@/common/api.js';
import { callbackRequest, convertImgToBase64, alertTip, getStorage,wxSdk,uploadImg ,formatDate} from '@/common/util.js';
import loadMore from '@/components/loadMore.vue';
import contentNone from '@/components/contentNone.vue';
import datetimePicker from '@/components/dateTime.vue';
import uniNumberBox from '@/components/uni-number-box/uni-number-box.vue';
import { pathToBase64 } from '@/js_sdk/mmmm-image-tools/index.js';
let currentTime = new Date().getTime();
let millisecond = 24 * 7 * 60 * 60 * 1000;
export default {
	data() {
		return {
			userId: getStorage('userInfo').userId, //登录用户id
			user: getStorage('userInfo'),
			formatDate:formatDate,
			selectedTime: '',
			currentTabIndex: 0,
			page: 1,
			pageSize: 10,
			supplyNames: [],
			supplyNameIndex: 0, 
			list: [],
			userName: getStorage('userInfo').userName,
			DeptName: getStorage('userInfo').userId,
			phone: getStorage('userInfo').telnumber,
			loadingType: 0, //0-loading前；1-loading中；2-没有更多了
			contentText: {
				contentdown: '上拉加载更多',
				contentrefresh: '正在加载...',
				contentnomore: '没有更多数据了'
			},
			formData:{
			    userId: getStorage('userInfo').userId,
			    userName: getStorage('userInfo').userName,
			    phone: getStorage('userInfo').telnumber,
			    orgId: getStorage('userInfo').department_id,
			    orgName: getStorage('userInfo').departmentName,
			    reason:"",
				examinePersonId:'',
				examinePersonName:'',
			    supplies:[
					{
						name:"",
						nameIndex:'0',
						specs:"",
						num:"",
						remarks:""
					}
			    ]
			},
			examIndex:0,
			examList:[]
		};
	},
	components: {
		loadMore,
		datetimePicker,
		contentNone,
		uniNumberBox
	},
	watch: {
		currentTabIndex: function(newVal, oldVal) {
			this.currentTabIndex = newVal;
			if (this.currentTabIndex==1) {
				this.page = 1;
				this.loadingType = 0;
				this.materialList();
			}else{
				this.getMaterialInfoList();
				this.getMaterialExamUser();
			}
		},
	},
	onLoad(option) {
		this.currentTabIndex = option.currentTabIndex || 0;
		
		if (this.currentTabIndex == 0) {
			this.getMaterialInfoList();
			this.getMaterialExamUser();
		}else{
			this.page = 1;
			this.loadingType = 0;
			this.materialList();
		}
	},
	methods: {
		getMaterialExamUser(){
			let params = {
				method: getMaterialExamUser,
				data: {
					userId: getStorage('userInfo').userId,
					departmentId:getStorage('userInfo').deptIdUrl,
				}
			};
			callbackRequest(params).then(res => {
				res = res.data;
				if (res.returnCode == 1) {
					console.log(res);
					this.examList = res.returnData;
				} else {
					alertTip(res.returnMsg);
				}
			});
		},
		
		getMaterialInfoList(){
			let params = {
				method: getMaterialInfoList,
				data: {
					userId: getStorage('userInfo').userId,
				}
			};
			callbackRequest(params).then(res => {
				res = res.data;
				if (res.returnCode == 1) {
					console.log(res);
					this.supplyNames = res.returnData;
				} else {
					alertTip(res.returnMsg);
				}
			});
		},
		changeExamList(e){
			this.examIndex = e.detail.value;
			this.formData.examinePersonId = this.examList[this.examIndex].id;
			this.formData.examinePersonName = this.examList[this.examIndex].name;
		},
		
		// 选择剂型
		changeDosage(e,index) {
			let cur = this;
			cur.formData.supplies[index].name =this.supplyNames[e.detail.value].name ;
			cur.formData.supplies[index].nameIndex =e.detail.value;
		},
		
		materialList() {
			var data = { userId: this.userId, pageNum: this.page, pageSize: this.pageSize };
			let params = {
				method: materialList,
				data: data
			};
			callbackRequest(params).then(res => {
				if (res.data.returnCode == 1) {
					let result = res.data.returnData;
					if (this.page == 1) {
						this.list = result;
					} else {
						if (result.length > 0) {
							this.list = this.list.concat(result);
							console.log(this.list)
							this.loadingType = 0;
						} else {
							this.loadingType = 2;
						}
					}
				} else {
					alertTip(res.data.returnMsg);
				}
			});
		},
		toDetail: function(item) {
			uni.navigateTo({
				url: '/pages/epidemic/epidemic-supplies-detail?item=' + JSON.stringify(item)
			});
		},
		
		confirm(e) {
			this.selectedTime = e.fulldate;
		},
		// 添加一个药品表单
		addBtn() {
			var obj = { nameIndex: '0',name:"", specs: '',num:'',remarks:''};
			this.formData.supplies.push(obj);
			this.number ++;
		},
		// 删除一个药品表单
		jianBtn(index) {
			// $delete : Vue的语法，响应式
			this.$delete(this.formData.supplies, index);
		},
		submit() {
			console.log(this.formData);
			for(var i=0;i<this.formData.supplies.length;i++){
				this.formData.supplies[i].name = this.supplyNames[this.formData.supplies[i].nameIndex].name;
				this.formData.supplies[i].specs = this.supplyNames[this.formData.supplies[i].nameIndex].unit;
				let obj = this.formData.supplies[i];
				if(!obj.num){
					alertTip('请输入数量');
					return;
				}
			}
			this.formData.examinePersonId = this.examList[this.examIndex].id;
			this.formData.examinePersonName = this.examList[this.examIndex].name;
			let params = {
				method: materialAdd,
				data: this.formData
			};
			callbackRequest(params).then(res => {
				if (res.data.returnCode == 1) {
					alertTip(res.data.returnMsg);
					setTimeout(function() {
						uni.navigateTo({
							url: '/pages/epidemic/epidemic-supplies?currentTabIndex=1'
						});
					}, 1500);
				} else {
					alertTip(res.data.returnMsg);
				}
			});
		}
	},
	onReachBottom() {
		if (this.loadingType !== 0 || this.currentTabIndex == 0) {
			return;
		}
		this.loadingType = 1;
		this.page = this.page + 1;
		this.materialList();
	}
};
</script>

<style lang="scss">
@import '@/static/css/common.scss';
page {
	// background: #f8f8f8;
}
 
// .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: 180upx 10upx 0;
	position: relative;
	z-index: 10;
	.tab-box {
		overflow: hidden;
		// border-radius: 10upx 10upx 0 0;
		// background: rgba(132, 149, 167, 0.8);
		height: 80upx;
		.tab-item {
			float: left;
			height: 70upx;
			width: 30%;
			font-size: 30upx;
			// color: #e5f6ff;
			// text-align: center;
			line-height: 70upx;
		}
		.active {
			// background: #fff;
			color: #333;
			border-radius: 10upx 10upx 0 0;
			font-weight: bold;
		}
		.activeLine{
			background: linear-gradient( 90deg, #50CBA1 0%, #06AEA6 100%), #5685F2;
			border-radius: 10upx;
			width: 80upx;
			height: 10upx;
		}
	}
	.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%;
				}
			}
			.tip-c {
				color: #929292;
				font-size: 25upx;
				margin-left: 20upx;
			}
			.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;
				}
			}
		}
		.upload-box {
			.label {
				float: none;
			}
			.img-box {
				overflow: hidden;
				padding-top: 25upx;
				.img-item {
					float: left;
					width: 210upx;
					height: 210upx;
					border: 1px solid #ddd;
					margin: 0 20upx 20upx 0upx;
					position: relative;
					.img {
						display: block;
						width: 100%;
						height: 100%;
					}
					.remove-btn {
						position: absolute;
						top: -18upx;
						right: -18upx;
						width: 44upx;
						height: 44upx;
						z-index: 2;
					}
				}
				.upload-btn {
					.img {
						width: 60upx;
						height: 60upx;
						margin: 75upx auto 0;
					}
				}
			}
		}
		.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;
		}
	}
	.form-box .form-item:last-child {
		border-bottom: 0px;
	}
	.list-box {
		margin-top: 20upx;
		.list-item {
			background: #fff;
			margin-bottom: 20upx;
			border-radius: 15upx;
			.title {
				border-bottom: #f8f8f8 5upx solid;
				height: 100upx;
				line-height: 100upx;
				.line {
					display: inline-block;
					width: 10upx;
					height: 32upx;
					background: $assistColor;
					margin-top: 4upx;
				}
				.text {
					display: inline-block;
					color: #444;
					font-size: 32upx;
					font-weight: bold;
					margin-left: 20upx;
					vertical-align: middle;
				}
				.status {
					font-size: 26upx;
					color: $assistColor;
					float: right;
				}
				.status1 {
					font-size: 26upx;
					color: #5063c3;
					float: right;
				}
				.status2 {
					font-size: 26upx;
					color: red;
					float: right;
				}
				.statusred {
					width: 160upx;
					height: 60upx;
					line-height: 60upx;
					text-align: center;
					font-size: 24upx;
					border-radius: 50upx;
					float: right;
					margin-right: 30upx;
					margin-top: 25upx;
				}
			}
			.content {
				padding: 10upx 20upx;
				// padding:10upx 10upx 60upx 10upx;
				.info-item {
					overflow: hidden;
					padding-bottom: 10upx;
					.fl-text {
						float: left;
						font-size: 28upx;
						color: #999;
						line-height: 40upx;
					}
					.fr-text {
						float: right;
						font-size: 26upx;
						color: #999;
						line-height: 40upx;
						width: 70%;
						text-align: right;
					}
				}
			}
			.comment-btn {
				float: right;
				font-size: 24upx;
				border-radius: 10upx;
				color: #fff;
				line-height: 50upx;
				text-align: center;
				min-width: 140upx;
				background-color: #00c277;
			}
		}
	}
}

#addbtn {
	height: 100upx;
	background-color: #ffffff;
	border-radius: 20upx;
	color: #333333;
	position: relative;
	margin-top: 20upx;
	line-height: 100upx;
	text-align: center;
	text {
		font-size: 38upx;
		color: #00c277;
	}
}
.addbtn view text:nth-child(1) {
	font-size: 38upx;
	color: #00c277;
}
.addbtn view text:nth-child(2) {
	font-size: 32upx;
	color: #00c277;
}
.tips {
	font-size: 22upx;
	// margin-left: 80upx;
	margin-top: 20upx;
}
.num-box {
	float: right;
	width: 220upx;
	// height: 20upx;
}
</style>
