<template>
    <AppLayout title="申请信息提交" :use-scroll-view="false" :show-bg-image="false">
        <template #headerleft >
            <view class="btnback">
                <image src="@/static/icon/back.png" @click="navBack"></image>
            </view>
        </template>
        <view class="app-container">
			
           <view class="personal-info">
			   <view class="personal-info-title">个人基本信息</view>
			   <view class="personal-info-list">
				   <view class="personal-info-list-l">
					  <span>*</span> 姓名
				   </view>
				   <view class="personal-info-list-r">
					   <input :value="userInfo.name" class="uni-input" placeholder="请输入你的姓名" />
				   </view>
			   </view>
			   
			   <view class="personal-info-list">
			   		<view class="personal-info-list-l"><span>*</span>联系方式</view>
			   		<view class="personal-info-list-r">
			   			<input :value="userInfo.phone" class="uni-input" placeholder="请输入联系方式" />
			   		</view>
			   </view>
			   
			   <view class="personal-info-list">
			   		<view class="personal-info-list-l"><span>*</span>身份证号</view>
			   		<view class="personal-info-list-r">
			   			<input :value="userInfo.idNumber" class="uni-input" placeholder="请输入身份证号" />
			   		</view>
			   </view>
		   </view>
		   
		   <view class="personal-info">
		   		<view class="personal-info-title">工作单位相关信息</view>
		   		<view class="personal-info-list">
		   			<view class="personal-info-list-l"> 工作单位名称</view>
		   			<view class="personal-info-list-r">
		   				<input class="uni-input" placeholder="请输入工作单位名称" />
		   			</view>
		   		</view>
		   		<view class="personal-info-list">
		   			<view class="personal-info-list-l">工作单位地址</view>
		   			<view class="personal-info-list-r">
		   			   	<input class="uni-input" placeholder="请输入工作单位地址" />
		   			</view>
		   		</view>
		   </view>
		   
		   <view class="personal-info">
		   		<view class="personal-info-title">劳动关系存续期间</view>
		   		<view class="personal-info-list">
		   			<view class="personal-info-list-l"> 开始时间</view>
		   			<view class="personal-info-list-r" @click="changestartTime">
		   				<!-- <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
		   					<view class="uni-input">{{date}}</view>
		   				</picker> -->
						<input class="uni-input" :value="startDate" placeholder="开始时间" />
		   			</view>
		   		</view>
		   		<view class="personal-info-list">
		   			<view class="personal-info-list-l">结束时间</view>
		   			<view class="personal-info-list-r" @click="changeendTime">
		   			   	<input class="uni-input" :value="endDate" placeholder="结束时间" />
		   			</view>
		   		</view>
		   </view>
		   
		   <view class="personal-info">
		   		<view class="personal-info-title">侵权情况描述</view>
		   		<view class="personal-info-list">
		   			<view class="personal-info-list-l"> 描述内容</view>
		   			<view class="personal-info-list-r">
		   				<textarea placeholder="请输入描述内容" />
		   			</view>
		   		</view>
		   </view>
		   <view class="personal-info">
		   		<view class="personal-info-title" @click="open">证据材料上传</view>
		   </view>
		   <button class="tijiao tijiao-pos" @click="tijiao1">提交申请</button>
		   <uni-popup ref="popup" type="bottom"  >
			   <view class="popup-container">
				   <view class="popup-container-title"><h3>证据材料上传</h3></view>
				   <view class="popup-container-list">
						<view class="popup-container-list-title">劳动合同</view>
						<view style="padding: 10rpx;">
						   <uni-file-picker file-mediatype="all"><button class="button" size="mini">选择文件</button></uni-file-picker>
						</view>
				   </view>
				   <view class="popup-container-list">
				   		<view>工资条</view>
				   		<view style="padding: 10rpx;">
				   			<uni-file-picker file-mediatype="all"><button class="button1" size="mini">选择文件</button></uni-file-picker>
				   		</view>
				   </view>				   
				   <view class="popup-container-list">
						<view>考勤记录</view>
						<view style="padding: 10rpx;">
						   <uni-file-picker file-mediatype="all"><button class="button2" size="mini">选择文件</button></uni-file-picker>
						</view>
				   </view>
				   <view class="popup-container-list">
				   		<view>沟通记录截图</view>
				   		<view style="padding: 10rpx;">
				   			<uni-file-picker file-mediatype="all"><button class="button3" size="mini">选择文件</button></uni-file-picker>
				   		</view>
				   </view>
				   <view style="padding-top: 20rpx;">
					   <button class="tijiao" @click="tijiao">提交材料</button>
				   </view>
			   </view>
		   </uni-popup>
		   <DatePicker ref="datePicker" />
        </view>
    </AppLayout>
</template>

<script setup>
import { reactive, inject,computed, watch, ref, onMounted } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
const { $api, debounce, throttle, navBack, safeReLaunch } = inject('globalFunction');
import { storeToRefs } from 'pinia';
import useUserStore from '@/stores/useUserStore';
import DatePicker from '@/components/DatePicker/DatePicker.vue';
import { navTo } from '../../../common/globalFunction';

const { userInfo } = storeToRefs(useUserStore());

// 获取时间选择器组件的引用
const datePicker = ref();
const popup = ref()

const active = ref(1)
const startDate = ref(null)
const endDate = ref(null)


// 选择开始时间
const changestartTime = () => {
    datePicker.value.open({
        title: '选择开始时间',
        success: (selectedDate) => {
            startDate.value = selectedDate;
        },
    });
};
// 选择结束时间
const changeendTime = () => {
	datePicker.value.open({
	    title: '选择结束时间',
	    success: (selectedDate) => {
	        endDate.value = selectedDate;
			if (startDate.value && new Date(startDate.value) > new Date(selectedDate)) {
			    endDate.value = '';
			    $api.msg('结束时间不能小于开始时间!');
			}
	    },
	});
}

const open = () =>{
	popup.value.open('bottom')
}

const tijiao = () => {
	popup.value.close()
}

onMounted(() => {
});

const tijiao1 = () => {
	safeReLaunch('/pages/index/index')
}

</script>

<style lang="stylus" scoped>
.btnback{
    width: 64rpx;
    height: 64rpx;
}
image {
    height: 100%;
    width: 100%;
}
.app-container{
    width: 100%;
    height: 100%;
	background: #EEE;
    display: flex;
	padding-top: 10rpx;
    flex-direction: column;
	
	.personal-info {
		width: 100%;
		background: #fff;
		padding: 20rpx;
		margin-bottom: 10rpx;
		
		.personal-info-title {
			width: 100%;
			// padding: 10rpx 0;
			font-size: 28rpx;
			font-weight: bold;
			
		}
		
		.personal-info-list {
			width: 100%;
			display: flex;
			padding: 10rpx 0;
			border-bottom: 1px solid #EEE;
			
			.personal-info-list-l {
				width: 200rpx;
				color: #B0B0B0;
				font-weight: bolder !important;
				padding-right: 20rpx;
				
				span {
					color: red;
				}
			}
			
			.personal-info-list-r {
				flex: 1;
			}
			
		}
	}
}

.steps {
	height: 200rpx;
}

.popup-container {
	height: 800rpx;
	width: 100%;
	height: 100%;
	overflow: auto;
	background: #fff;
	
	.popup-container-title {
		width: 100%;
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		color: #B0B0B0;
		font-weight: bolder !important;
	}
}

.popup-container-list {
	padding: 0 20rpx;
	padding-top: 20rpx;
	border-bottom: 1px solid #EEE;
}


.popup-container-list-title {
	font-size: 28rpx;
	font-weight: blod;
}

.button {
	border: none !important;
	background: #EEF2FF;
	color: #4338CA;
}

.button1 {
	border: none !important;
	background: #F0FDF4;
	color: #288B4C;
}

.button2 {
	border: none !important;
	background: #FEFCE8;
	color: #A76C17;
}

.button3 {
	border: none !important;
	background: #FEF2F2;
	color: #C23B3B;
}
.tijiao {
	width: 80%;
	background: #58BE6B;
	color: #fff;
}

.tijiao-pos {
	position: absolute;
	bottom: 100rpx;
	left: 10%;
}
</style>
