<template>
	<view class="container">
		<view class="banner-box">
			<image v-if="currentTabIndex == 0" src="/static/imgs/serviceBg11.png" mode=""></image>
			<image v-if="currentTabIndex == 1" src="/static/imgs/serviceBg11.png" mode=""></image>
		</view>
		<view class="main">
			<view class="tab-box">
				<view class="tab-item" :class="currentTabIndex == 0 ? 'active' : ''" @click="currentTabIndex = 0">门禁卡办理</view>
				<view class="tab-item" :class="currentTabIndex == 1 ? 'active' : ''" @click="currentTabIndex = 1">门禁卡办理记录</view>
			</view>
		</view>
		<view class="content" v-if="currentTabIndex == 0">
			<view class="interviewee">
				
				<view class="radio">
					<view class="r-div">
						<text class="input_left">办卡选择</text>
					</view>
					<view class="radiolist" style="border-top:0.5px solid #eeeeee">
						<view style="border-top: none;border-bottom: 0.5px solid #eeeeee;" class="" @click="showradio(index)" v-for="(item, index) in firstCardItems" :key="index" :class="[firstIndex == index ? 'showcolor' : '']">
							<p class="item_title">{{ item.name }}</p>
							<!-- <span class="item_more">{{ item.sub_name }}</span> -->
							<image src="/static/imgs/handel.png" v-if="firstIndex == index" />
						</view>
					</view>
				</view>
				

				<view class="form-box" style="border-radius: 10upx;">
					<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="secondCardItems.length > 0" :range="secondCardItems" @change="changesecondCardItems" range-key="DESCRIPTION">
								<view>{{ secondCardItems[secondIndex].DESCRIPTION }}</view>
							</picker>
						</view>
					</view>
					<view class="form-item" v-if="firstIndex!=2">
						<text class="label"><text style="color: red;">*</text>人员部门:</text>
						<view class="ipt-box"><input class="top-t" v-model="unit" placeholder="请输入人员部门"  maxlength="15" /></view>
						<!-- <view class="ipt-box select">
							<image class="arrow" src="/static/icons/right-arrow.png" mode=""></image>
							<picker class="picker" v-if="deptList.length > 0" :range="deptList" @change="changeDepartment" range-key="name">
								<view>{{ deptList[departmentIndex].name }}</view>
							</picker>
						</view> -->
					</view>
					<view class="form-item">
						<text class="label"><text style="color: red;">*</text>{{pageTitle[firstIndex]}}人员:</text>
						<view class="ipt-box"><input class="top-t" v-model="personnel" placeholder="请输入人员姓名" type="text" maxlength="15" /></view>
					</view>
					<view class="form-item" v-if="firstIndex==0">
						<text class="label"><text style="color: red;">*</text>补办卡号:</text>
						<view class="ipt-box"><input class="top-t" v-model="cardCode" placeholder="请输入补办卡号"  maxlength="15" /></view>
					</view>
					
					<!-- <view class="form-item" v-if="firstIndex==2">
						<text class="label">人员姓名:</text>
						<view class="ipt-box"><input class="top-t" v-model="personnel" placeholder="请输入人员姓名" type="text" maxlength="50" /></view>
					</view> -->
					<view class="form-item" v-if="firstIndex==2">
						<text class="label"><text style="color: red;">*</text>单位:</text>
						<view class="ipt-box"><input class="top-t" v-model="unit" placeholder="请输入单位" type="text" maxlength="15" /></view>
					</view> 
					<view class="form-item" v-if="firstIndex==2">
						<text class="label"><text style="color: red;">*</text>联系方式:</text>
						<view class="ipt-box"><input class="top-t" v-model="personnelPhone" placeholder="请输入手机号码" type="text" maxlength="20" /></view>
					</view> 
					<view class="form-item" v-if="firstIndex==2">
						<text class="label"><text style="color: red;">*</text>出入区域:</text>
						<view class="ipt-box"><input class="top-t" v-model="accessArea" placeholder="请填写出入区域" type="text" maxlength="20" /></view>
					</view>
					<view class="form-item" v-if="firstIndex==2">
						<text class="label"><text style="color: red;">*</text>日期期限:</text>
						<view class="ipt-box"><uni-datetime-picker :clear-icon="false" v-model="dateRange" type="daterange" /></view>
					</view>
					
					<view class="form-item">
						<view style="color: #333;font-size: 30upx;font-weight: bold;padding: 10upx 0px;">
							<text>申请事由：</text>
						</view>
						<view style="width: 100%;border: 1px solid #E5E5E5;margin-top: 20upx;padding: 20upx;height: 350upx;color: #666;border-radius: 10upx;">
							<textarea class="textarea"  v-model="matter"  placeholder="请输入需求描述"  maxlength="100"/>
						</view>
					</view>
				</view>
				<view class="form-box" style="border-radius: 10upx;margin-top: 20upx;">
					<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>
			<view class="occupied"></view>
			<view class="footer-btn" @click="submit"><view class="btn">提交</view></view>
		</view>
		<!-- 检查列表 -->
		<view v-if="currentTabIndex == 1">
			<view class="list-content" v-if="cardList.length > 0">
				<view class="details" v-for="(item, i) in cardList" :key="i" >
					<view class="detail_header" @click="details(item)">
						<text class="blueSign"></text>
						<text class="font-tilte">{{firstCardItems[Number(item.TYPE)-1].name}}申请</text>
						<text v-if="item.EXAMINE_STATE ==0" class="statusred" style="color: #ff9000;" >待审核</text>
						<text v-if="item.EXAMINE_STATE ==2" class="statusred" >已拒绝</text>
						<text v-if="item.EXAMINE_STATE ==1" class="statusred" style="color: #00c277;">已通过</text>
					</view>
					
					<view class="detail_msg">
						<view class="info-item" @click="detail(item)">
							<text>办卡类型：</text>
							<text class="infoSpan">{{item.TYPE_NAME}}</text>
						</view>
						<view class="info-item" @click="details(item)">
							<text>门卡类型：</text>
							<text class="infoSpan">{{item.CARD_TYPE}}</text>
						</view>
						<view class="info-item" @click="details(item)">
							<text>申请人：</text>
							<text class="infoSpan">{{item.USER_NAME}}</text>
						</view>
						<view class="info-item" @click="details(item)">
							<text>申请时间：</text>
							<text class="infoSpan">{{ formatDate(item.APPLY_TIME,'dateTime')}}</text>
						</view>
						
					</view>
				</view>
			</view>
			<content-none v-else :padTop="20"></content-none>
		</view>
		<load-more v-if="currentTabIndex == 1" :loadingType="loadingType" :contentText="contentText"></load-more>
		<!-- <canvas style="width: 300px; height: 300px;" canvas-id="convertImgToBase64"></canvas> -->
		
	</view>
</template>

<script>
import { addCard, getIssueCardByUserId,getAllDept ,getCardType,getDeptExamineAuth  } from '@/common/api.js';
import { callbackRequest, getStorage, alertTip, convertImgToBase64, formatDate,wxSdk ,uploadImg} from '@/common/util.js';
import loadMore from '@/components/loadMore.vue';
import contentNone from '@/components/contentNone.vue';

import { pathToBase64 } from '@/js_sdk/mmmm-image-tools/index.js';
export default {
	components: {
		loadMore,
		contentNone
	},
	data() {
		return {
			formatDate: formatDate,
			//分页
			page: 1,
			pageSize: 10,
			loadingType: 0, //0-loading前；1-loading中；2-没有更多了
			contentText: {
				contentdown: '上拉加载更多',
				contentrefresh: '正在加载...',
				contentnomore: '没有更多数据了'
			},
			deptList: [], 
			departmentIndex:0,
			userInfo: getStorage('userInfo'),
			unit:'',
			cardCode:'',
			personnel:'',
			personnelPhone:'',
			matter:'',
			accessArea:'',
			dateRange:'',
			examIndex:0,
			examList:[],
			
			showIndex: 0,
			currentTabIndex: 0,
			cardList: [],
			index: 0,
			firstCardItems:[{ id: '1', name: '补卡' }, { id: '2', name: '新办卡' }, { id: '3', name: '临时卡' }],
			firstIndex:0,
			secondCardItems:[],//{ id: '1', name: '职工卡' }, { id: '2', name: '聘用人员卡' }, { id: '3', name: '支撑人员卡' },{ id: '4', name: '出入证' }
			secondIndex:0,
			faultType:0,
			pageTitle:['补办','新办','临时'],
			submitFlag:true,
			showAlert:false,
		};
	},
	watch: {
		currentTabIndex: function(newVal, oldVal) {
			if (newVal ==1) {
				this.page = 1;
				this.loadingType = 0;
				this.dataList();
			}else{
				// this.getDepartment();
			}
		}
	},
	
	onLoad(option) {
		this.getDeptExamineAuth();
		this.currentTabIndex = option.currentTabIndex || 0;
		// this.faultType = option.faultType || 0;
		// 部门
		// this.getDepartment();
	},
	onShow() {
		this.getsecondCardItems();
		if (this.currentTabIndex == 0) {
			//this.getDepartment();
		}else{
			this.page = 1;
			this.loadingType = 0;
			this.dataList();
		}
	},
	methods: {
		getDeptExamineAuth(){
			let params = {
				method: getDeptExamineAuth,
				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);
				}
			});
		},
		changeExamList(e){
			this.examIndex = e.detail.value;
		},
		getsecondCardItems(){
			this.secondIndex=0;
			var parentCode = this.firstCardItems[this.firstIndex].id;
			let params = {
				method: getCardType,
				data: {
					type:parentCode,
					userId:this.userInfo.id
				}
			};
			callbackRequest(params).then(res => {
				res = res.data;
				if (res.returnCode == 1) {
					if(res.returnData.length>0){
						this.secondCardItems = res.returnData;
					}else{
						this.secondCardItems = []
					}
				} else {
					alertTip(res.returnMsg);
				}
			});
		},
		dataList() {
			let params = {
				method: getIssueCardByUserId,
				data: {
					userId: this.userInfo.id,
					pageNum: this.page,
					pageSize: this.pageSize,
					// faultType:this.faultType,
					// isInspection:0
				}
			};
			callbackRequest(params).then(res => {
				res = res.data;
				if (res.returnCode == 1) {
					if (this.page == 1) {
						this.cardList = res.returnData || [];
					} else {
						if (res.returnData.length > 0) {
							this.cardList = this.cardList.concat(res.returnData);
							this.loadingType = 0;
						} else {
							this.loadingType = 2;
						}
					}
				} else {
					alertTip(res.returnMsg);
				}
			});
		},
		
		submit() {
			var regPhone = /^1[3|4|5|6|7|8|9]\d{9}$/;
			// var regCard = /^[a-zA-Z0-9_]{0,}$/;
			// var regNumber = /[^\d]/;
			if(this.firstIndex==0){
				if (!this.unit) {
					alertTip('请输入人员部门');
					return false;
				} 
				if (!this.personnel) {
					alertTip('请输入补办人员');
					return false;
				}
				if (!this.cardCode) {
					alertTip('请输入补办卡号');
					return false;
				}
				if (!this.cardCode) {
					alertTip('请输入补办卡号');
					return false;
				}
			}else if(this.firstIndex==1){
				if (!this.unit) {
					alertTip('请输入人员部门');
					return false;
				} 
				if (!this.personnel) {
					alertTip('请输入补办人员');
					return false;
				}
			}else if(this.firstIndex==2){
				if (!this.personnel) {
					alertTip('请输入补办人员');
					return false;
				}
				if (!this.unit) {
					alertTip('请输入单位');
					return false;
				}
				if (!regPhone.test(this.personnelPhone)) {
					alertTip('请输入正确的手机号');
					return false;
				}
				if (!this.accessArea) {
					alertTip('请输入出入区域');
					return false;
				}
				if (!this.dateRange) {
					alertTip('请输入日期限制');
					return false;
				}
			}
			if(!this.submitFlag){
				return false;
			}
			this.submitFlag=false;
			let params = {
				method: addCard,
				data: {
					userId: this.userInfo.id,
					userName: this.userInfo.userName,
					phone: this.userInfo.telnumber,
					orgId: this.userInfo.orgId,
					departmentId:this.userInfo.deptId,
					orgName: this.userInfo.orgName,
					type:this.firstCardItems[this.firstIndex].id,
					typeName:this.firstCardItems[this.firstIndex].name,
					cardType:this.secondCardItems[this.secondIndex].DESCRIPTION,
					unit:this.unit,
					cardCode:this.cardCode,
					personnel:this.personnel,
					personnelPhone:this.personnelPhone,
					personnel:this.personnel,
					matter:this.matter,
					accessArea:this.accessArea,
					startTime:this.dateRange[0],
					endTime:this.dateRange[1],
					examinePersonId:this.examList[this.examIndex].id,
					examinePersonName:this.examList[this.examIndex].name,
					
				}
			};
			console.log(params)
			callbackRequest(params).then(res => {
				res = res.data;
				if (res.returnCode == 1) {
					alertTip(res.returnMsg);
					setTimeout(_ => {
						this.unit = '';
						this.cardCode = '';
						this.personnel = '';
						this.personnelPhone = '';
						this.matter = '';
						this.accessArea = '';
						this.dateRange='';
						this.currentTabIndex = 1;
						this.submitFlag = true;
						
					}, 2000);
				} else {
					alertTip(res.returnMsg);
					this.submitFlag = true;
				}
				
			});
		},
		showradio: function(index) {
			var self = this;
			self.firstIndex = index;
			this.getsecondCardItems();
			
			// if(index==1){
			// 	self.secondCardItems=[{ id: '0', name: '职工卡' },]
			// }
			// if(index==2){
			// 	self.secondCardItems=[{ id: '1', name: '聘用人员卡' }, { id: '2', name: '支撑人员卡' },{ id: '3', name: '出入证' }]
			// }
		},
		
		getDepartment() {
			let data = {
				method: getAllDept,
				data: {}
			};
			callbackRequest(data).then(res => {
				console.log(res);
				if (res.data.returnCode == 1) {
					this.deptList = res.data.returnData;
					for(var i=0;i<this.deptList.length;i++){
						if(this.deptList[i].id==getStorage('userInfo').deptId){
							this.departmentIndex = i;
						}
					}
				}
			});
		},
		navTo(url) {
			uni.navigateTo({
				url
			});
		},
		goEvaluatePage(id) {
			if(this.faultType==1){
				uni.navigateTo({
					url: `/pages/malfunc-repair/malfunc-evaluate?type=9&typeId=${id}`
				});ID
			}else{
				uni.navigateTo({
					url: `/pages/malfunc-repair/malfunc-evaluate?type=6&typeId=${id}`
				});
			}
			
		},
		
		changesecondCardItems(e) {
			this.secondIndex = e.detail.value;
		},
		details: function(item) {
			uni.navigateTo({
				url: '/pages/access-card/access-card-detail?id=' + item.ID
			});
		},
		//选择部门
		changeDepartment(f) {
			this.departmentIndex = f.detail.value;
		},
		
	},
	onReachBottom() {
		if (this.loadingType !== 0 || this.currentTabIndex == 0) {
			return;
		}
		this.loadingType = 1;
		this.page = this.page + 1;
		this.dataList();
	},
};
</script>

<style lang="scss">
@import url('../../static/css/repair/malfunction-repair.css');
@import '@/static/css/common.scss';

.nolist {
	font-size: 30upx;
	color: #797979;
	text-align: center;
	margin-top: 20upx;
}

.container {
	position: relative;
	overflow: hidden;

	.banner-box {
		width: 100%;
		height: 240upx;
		position: absolute;
		top: 0;
		left: 0;

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

		border-radius: 30upx;
	}

	.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 {
				background: #fff;
				color: #333;
				border-radius: 10upx 10upx 0 0;
				font-weight: bold;
			}
		}
	}
}

.list-content {
	font-size: 28upx;
	margin: 0 40rpx;
	.details {
		background: white;
		padding: 0 15upx 15upx;
		// border-radius: 15upx;
		margin-bottom: 10rpx;
		.detail_header {
			border-bottom: #f8f8f8 5upx solid;
			height: 90upx;
			line-height: 90upx;
			// margin: 0;
			// border-radius: 10upx;

			.blueSign {
				height: 28upx;
				width: 5upx;
				background: #00c277;
				display: inline-block;
				margin-left: 20upx;
				vertical-align: middle;
			}

			.font-tilte {
				font-weight: bold;
				margin-left: 20upx;
				vertical-align: middle;
			}
		}

		.detail_msg {
			margin-left: 20upx;
			border-radius: 10upx;
			overflow: hidden;
			view {
				height: 60upx;
				line-height: 60upx;
			}

			.status {
				position: absolute;
				color: red;
				margin-left: 580upx;
				margin-top: -15upx;
			}
		}
	}
}

.statusgr {
	float: right;
	margin-right: 30upx;
	color: #00c277;
}

.statusred {
	float: right;
	margin-right: 30upx;
	color: red;
}

.img-box {
	overflow: hidden;
	padding-top: 20rpx;
	padding-bottom: 10rpx;

	.img-item {
		float: left;
		width: 200upx;
		height: 200upx;
		border: 1px solid #ddd;
		margin: 0 22rpx 20upx 0upx;
		position: relative;
		box-sizing: border-box;

		.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: unset;
		}
	}
}
.detail_msg .info-item {
	font-size: 28upx;
	margin-right: 30upx;
	text {
		display: inline-block;
		width: 140upx;
	}

	.infoSpan {
		width: auto;
		font-size: 28upx;
		color: #666;
		float: right;
	}
}
.form-box {
	background: #fff;
	.form-item {
		overflow: hidden;
		border-bottom: 1px solid #eee;
		padding: 30upx 20upx;
		.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;
			}
		}
		.select {
			.arrow {
				float: right;
				width: 16upx;
				height: 29upx;
				margin-top: 10upx;
			}
			.picker {
				height: 50upx;
				line-height: 50upx;
				font-size: 26upx;
				color: #666;
				margin-left: 10upx;
			}
		}
	}
}

.comment-btn {
	float: right;
	font-size: 24upx;
	border-radius: 10upx;
	color: #fff;
	// line-height: 30upx;
	text-align: center;
	min-width: 120upx;
	margin-right: 30upx;
	background-color: #00c277;
}

.common-shade{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100vh;
	background: rgba(0,0,0,0.7);
	z-index:99;
}

.box {
	display: flex;
	display: -webkit-flex;
}

.box-row-reverse {
	flex-direction: row;
}

/*上下排列*/
.box-column {
	flex-direction: column;
}

/*上下排列*/
.box-left {
	justify-content: flex-start;
}

/*居右*/
.box-right {
	justify-content: flex-end;
}

/*居左*/
.box-center {
	justify-content: center;
}

/*居中*/
.box-between {
	justify-content: space-between;
}

/*两端对齐*/
.box-align-center {
	align-items: center;
}

.box-wrap {
	flex-wrap: wrap;
}
</style>
