<template>
	<view :class="{'gray':store.isgray==1}">
		<view class="form">
			<picker @change="bindType" :value="typeIndex" :range="typeArr" range-key="value">
				<view class="f-row aic jcb box">
					<view class="title">
						请假类型：
					</view>
					<view class="f-row aic">
						<view :class="[{'choose':typeIndex==null},{'choosed':typeIndex!=null}]">
							{{typeIndex!=null?typeArr[typeIndex].value:'请选择'}}
						</view>
						<uni-icons type="right" color="#333333"></uni-icons>
					</view>
				</view>
			</picker>
			<!-- <uni-datetime-picker type="date" @change="chooseStart">
				<view class="f-row aic jcb box">
					<view class="title">
						开始时间：
					</view>
					<view class="f-row aic">
						<view :class="[{'choose':!start},{'choosed':start}]">
							{{start?start:'请选择'}}
						</view>
						<uni-icons type="right" color="#333333"></uni-icons>
					</view>
				</view>
			</uni-datetime-picker> -->
			<picker mode="date" fields="day" @change="chooseStart" :value="start">
				<view class="f-row aic jcb box">
					<view class="title">
						开始时间：
					</view>
					<view class="f-row aic">
						<view :class="[{'choose':!start},{'choosed':start}]">
							{{start?start:'请选择'}}
						</view>
						<uni-icons type="right" color="#333333"></uni-icons>
					</view>
				</view>
			</picker>
			
			<picker mode="date" fields="day" @change="chooseEnd" :value="end">
				<view class="f-row aic jcb box">
					<view class="title">
						结束时间：
					</view>
					<view class="f-row aic">
						<view :class="[{'choose':!end},{'choosed':end}]">
							{{end?end:'请选择'}}
						</view>
						<uni-icons type="right" color="#333333"></uni-icons>
					</view>
				</view>
			</picker>
			<!-- <uni-datetime-picker type="date" @change="chooseEnd">
				<view class="f-row aic jcb box">
					<view class="title">
						结束时间：
					</view>
					<view class="f-row aic">
						<view :class="[{'choose':!end},{'choosed':end}]">
							{{end?end:'请选择'}}
						</view>
						<uni-icons type="right" color="#2C2C2C"></uni-icons>
					</view>
				</view>
			</uni-datetime-picker> -->
			<view class="f-row aic jcb input_box">
				<view class="title">
					工作单位：
				</view>
				<input v-model="gzdw" type="text" placeholder="请输入"
					placeholder-style="font-size: 28rpx;color: #999999;" />
			</view>
			<view class="f-row aic jcb input_box">
				<view class="title">
					行政级别：
				</view>
				<input v-model="xzjb" type="text" placeholder="请输入"
					placeholder-style="font-size: 28rpx;color: #999999;" />
			</view>
			<view class="f-row aic jcb input_box">
				<view class="title">
					请假地点：
				</view>
				<input v-model="xjdd" type="text" placeholder="请输入"
					placeholder-style="font-size: 28rpx;color: #999999;" />
			</view>
			<!-- <view class="f-row aic jcb box">
				<view class="title">
					请假时长：
				</view>
				<view class="f-row aic">
					<view class="choose">
						小时
					</view>
				</view>
			</view> -->
		</view>
		<view class="lines">

		</view>
		<view class="reason f-col">
			<view class="title">
				请假事由：
			</view>
			<textarea v-model="reason" placeholder="请输入请假事由" placeholder-style="font-size: 28rpx;color: #999999;"
				cols="30" rows="10"></textarea>
		</view>
		<view class="lines">

		</view>
		<view class="progress_box">
			<view class="title">
				审批流程：
			</view>
			<view class="progress f-row aic">
				<view class="f-col aic ">
					<image class="avatar" src="" mode=""></image>
					<text>发起人</text>
				</view>
				<image class="line" src="../../static/line.png" mode=""></image>
				<view class="f-col aic">
					<image class="avatar" src="" mode=""></image>
					<text>部门领导</text>
				</view>
				<image class="line" src="../../static/line.png" mode=""></image>
				<view class="f-col aic">
					<image class="avatar" src="" mode=""></image>
					<text>人事部门</text>
				</view>
			</view>
		</view>
		<view class="btn f-col aic">
			<view class="" @click="qjAdd">
				提交
			</view>
		</view>
		<!-- <uni-popup ref="typepop" type="bottom" border-radius="10px 10px 0 0">
			<view class="pop">
				<view class="popbtn f-row aic jcb">
					<view class="cancel">
						取消
					</view>
					<view class="confirm">
						确定
					</view>
				</view>
				<view class="type">
					<view class="" v-for="item,i in 8" :key="i">
						年假
					</view>
				</view>
			</view>
		</uni-popup> -->
	</view>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance
	} from 'vue';
	import {
		qjAddApi,
		startMutilProcessApi,
		getDictItemsApi
	} from '@/network/api.js';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		useStore
	} from '@/store';
	import dayjs from 'dayjs';
	const store = useStore()
	const {
		proxy
	} = getCurrentInstance()
	// const typepop = ref(null)
	// const openPop = () => {
	// 	typepop.value.open()
	// }
	// const closePop = () => {
	// 	typepop.value.close()
	// }
	onLoad(() => {
		getDictItems()
	})
	const typeArr = ref([])
	const typeIndex = ref(null)
	const bindType = (e) => {
		typeIndex.value = e.detail.value
	}
	const start = ref("")
	const end = ref("")
	const reason = ref("")
	const chooseStart = (e) => {
		start.value = e.detail.value
	}
	const chooseEnd = (e) => {
		end.value = e.detail.value
	}
	/**行政级别*/
	const xzjb = ref('')
	/**工作单位*/
	const gzdw = ref('')
	/**休假地点*/
	const xjdd = ref('')
	const qjAdd = () => {
		if (typeIndex.value == null) return proxy.$toast('请选择请假类型')
		if (!start.value) return proxy.$toast('请选择开始时间')
		if (!end.value) return proxy.$toast('请选择结束时间')
		if (!gzdw.value.trim()) return proxy.$toast('请输入工作单位')
		if (!xzjb.value.trim()) return proxy.$toast('请输入行政级别')
		if (!xjdd.value.trim()) return proxy.$toast('请输入请假地点')
		if (!reason.value.trim()) return proxy.$toast('请输入请假事由')
		qjAddApi({
			qjlx: typeArr.value[typeIndex.value].value,
			starttime: start.value,
			endtime: end.value,
			sy: reason.value,
			createBy: store.userinfo.username,
			qjname: store.userinfo.realname,
			sysOrgCode: store.userinfo.orgCode,
			phone: store.userinfo.phone,
			qxjxzjb: xzjb.value,
			gzdw: gzdw.value,
			xjdd: xjdd.value
		}).then((res) => {
			if (res.success) {
				startMutilProcess(res.message)

			}
		}).catch((err) => {

		})
	}
	const startMutilProcess = (id) => {
		startMutilProcessApi({
			flowCode: "dev_cxc_qxj_zg_001",
			id,
			formUrl: "cxcQxjZg/vue/CxcQxjZgFrom",
			formUrlMobile: "leaveApplication"
		}).then((res) => {
			if (res.success) {
				proxy.$toast(res.message)
				setTimeout(() => {
					uni.navigateBack()
				}, 2000)
			}
		}).catch((err) => {
			console.log(err);
		})
	}
	const getDictItems = () => {
		getDictItemsApi().then((res) => {
			if (res.success) {
				typeArr.value = res.result
			}
		})
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	// .pop{
	// 	background-color: #fff;
	// 	border-radius: 20rpx 20rpx 0 0;
	// }
	.btn {
		border-top: 1px solid #EFEFEF;
		height: 120rpx;
		justify-content: center;
		position: fixed;
		bottom: 0;
		width: 100vw;

		view {
			width: 690rpx;
			height: 88rpx;
			background: #01508B;
			border-radius: 16rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 88rpx;
		}
	}

	.input_box {
		height: 100rpx;

		.title {
			font-size: 28rpx;
			color: #333333;
		}

		input {
			flex: 1;
			height: 100%;
			text-align: right;
			font-size: 28rpx;
			color: #333333;
		}
	}

	.form {
		padding: 0 30rpx;
		background-color: #fff;

		.title {
			font-size: 28rpx;
			color: #333333;
		}

		.box {
			height: 100rpx;
		}

		.box:not(:last-child) {
			border-bottom: 1px solid #EFEFEF;

		}

		.choose {
			font-size: 28rpx;
			color: #999999;
		}

		.choosed {
			font-size: 28rpx;
			color: #333333;
		}
	}

	.reason {
		background-color: #fff;
		margin-top: 20rpx;

		height: 290rpx;
		padding: 30rpx;

		.title {
			font-size: 28rpx;
			color: #333333;

		}

		textarea {
			width: 100%;
			margin-top: 20rpx;
		}
	}


	.progress_box {
		background-color: #fff;
		margin-top: 20rpx;
		padding: 30rpx;

		.title {
			font-size: 28rpx;
			color: #333333;
		}

		.avatar {
			width: 78rpx;
			height: 78rpx;
			border-radius: 38rpx;
			background-color: #333333;
			margin-top: 30rpx;
		}

		text {
			font-size: 24rpx;
			color: #333333;
			margin-top: 10rpx;
		}

		.line {
			width: 91rpx;
			height: 17rpx;
			margin: 0 40rpx;
		}
	}

	.lines {
		height: 20rpx;
		background-color: #F8F8F8;
	}
</style>