<template>
  <view class="page">
    <u-navbar class="u-navbar" title="新增临时人员" placeholder @leftClick="leftClick" leftIconColor="#fff"  bgColor="#00337A"  :titleStyle="{ color: '#FFF', fontSize: '32rpx' }"/>
	<view class="header">
		<view class="header-item" :class="hIndex == 1 ? 'active' : ''" @click="hIndex = 1">
			身份证
			<view class="activeLine" v-if="hIndex == 1"></view>
		</view>
		<view class="header-item" :class="hIndex == 2 ? 'active' : ''" @click="hIndex = 2">
			关键信息
			<view class="activeLine" v-if="hIndex == 2"></view>
		</view>
		<view class="header-item" :class="hIndex == 3 ? 'active' : ''" @click="hIndex = 3">
			安全培训
			<view class="activeLine" v-if="hIndex == 3"></view>
		</view>
		<view class="header-item" :class="hIndex == 4 ? 'active' : ''" @click="hIndex = 4">
			其他
			<view class="activeLine" v-if="hIndex == 4"></view>
		</view>
	</view>
	<view class="content">
		<view v-show="hIndex == 1">
			<u--form class="idForm" :model="idForm" :rules="rules" ref="vForm" :errorType="errorType">
				<view class="visitor-input-box mb-40">
					<text>身份证号</text><text style="color: red;">*</text>
					<u-form-item prop='idCard' style="width:100%;height: 100%;" >
						 <u--input
							v-model="visitorInfo.idCard"
							type="text" placeholder="请输入" 
							maxlength="18"  border="surround"
						    clearable></u--input>
					</u-form-item>
				</view>
				<view class="visitor-input-box mb-40">
					<text>姓名</text><text style="color: red;">*</text>
					<u-form-item prop='userName' style="width:100%;height: 100%;" >
						 <u--input
							v-model="visitorInfo.userName"
							type="text" placeholder="请输入" 
							maxlength="15" border="surround" 
						    clearable></u--input>
					</u-form-item>
				</view>
				<view class="visitor-input-box mb-40">
					<text>手机号</text><text style="color: red;">*</text>
					<u-form-item prop='phone' style="width:100%;height: 100%;" >
						 <u--input
							v-model="visitorInfo.phone"
							type="number" placeholder="请输入" 
							maxlength="11"  border="surround"
						    clearable></u--input>
					</u-form-item>
				</view>
 
				
				<!-- <view class="submit-box">
					<u-button type="primary" shape="circle" class="submit-btn" @click="formSubmit"
					style="background: linear-gradient( 90deg, #5193FE 0%, #00EEF0 100%);"
					>确 定</u-button>
					<u-button shape="circle" class="submit-btn" @click="back">取 消</u-button>
				</view> -->
			</u--form>
		</view>
		
		
		
		
		
		
	</view>
	
	
	
	
  </view>
</template>

<script>
export default {
  data() {
    return {
		hIndex:1,
    }
  },
  onLoad() {
    console.log('🚀 ~ mounted ~ mounted-index:')  
  },
  onShow() {
  },
  methods: {
	
	
	
	
    // 返回
    leftClick() {
      console.log('返回')
      uni.navigateBack({
      	delta: 1 // 返回
      });
    }
  },

}
</script>

<style lang="scss">
.page {
	width: 100vw;
	height: 100vh;
	background-color: #f8f8f8;
	box-sizing: border-box;
	.header{
		width: 100%;
		height: auto;
		display: flex;
		
		.header-item{
			padding: 0 20rpx;
			height: 100rpx;
			color: #666;
			line-height: 100rpx;
			// display: flex;
			// justify-content: center;
			// align-items: center;
			
			.activeLine{
				background:  #00337A;
				border-radius: 10upx;
				width: 100%;
				height: 6upx;
			}
		}
		.active {
			// background: #fff;
			color: #333;
			font-weight: bolder;
			font-size: 32rpx;
		}
	}
}
</style>
