<template>
	<view class="qingjia-apply">
		<uni-nav-bar @clickLeft="goBack()" class="nav-bar" height="110rpx" leftWidth="200rpx" leftText="来访项目"
			leftIcon="left" border backgroundColor="#2cade8" color="#fff" fixed statusBar shadow></uni-nav-bar>
		<view class="apply-info">
			<view class="form-content ">
				<view class="form-item border-bottom">
					<view class="form-left">
						<text class="star">*</text>
						<text class="form-left-text">来访事由</text>
					</view>
					<view class="form-right">
						<uni-data-select v-model="formData.purpose" :localdata="range">
						</uni-data-select>
					</view>
				</view>
				<view class="form-item border-bottom">
					<view class="form-left">
						<text class="star">*</text>
						<text class="form-left-text">来访概述</text>
					</view>
					<view class="form-right">
						<input type="text" v-model="formData.name" maxlength="50" placeholder="来访概述" />
					</view>
				</view>
				<view class="form-item border-bottom" style="height: 300rpx;">
					<view class="form-left">
						<text class="form-left-text">来访详述</text>
					</view>
					<view class="form-right">
						<textarea class="apply-reason-text" v-model="formData.description" maxlength="250"
							placeholder="请输入" />
					</view>
				</view>

				<view class="form-item border-bottom">
					<view class="form-left">
						<text class="star">*</text>
						<text class="form-left-text">来访时间</text>
					</view>
					<view class="form-right form-date">
						<uni-datetime-picker v-model="formData.visit_time" :border="false" />
						<!-- <picker mode="date" :value="formData.visit_time" @change="bindStartDateChange">
							<view class="uni-input">{{formData.visit_time}}</view>
						</picker> -->
					</view>
				</view>
				<view class="form-item border-bottom">
					<view class="form-left">
						<text class="star">*</text>
						<text class="form-left-text">离开时间</text>
					</view>
					<view class="form-right form-date">
						<uni-datetime-picker v-model="formData.leave_time" :border="false" />
						<!-- <picker mode="date" :value="formData.leave_time" @change="bindEndDateChange">
							<view class="uni-input">{{formData.leave_time}}</view>
						</picker> -->
					</view>
				</view>
				<view class="form-item border-bottom">
					<view class="form-left">
						<text class="star">*</text>
						<text class="form-left-text">接待人</text>
					</view>
					<view class="form-right">
						<uni-data-select v-model="formData.receptionist" :localdata="userRange">
						</uni-data-select>
					</view>
				</view>
				<view class="form-item border-bottom">
					<view class="form-left">
						<text class="form-left-text">来访单位</text>
					</view>
					<view class="form-right">
						<input type="text" v-model="formData.company" maxlength="50" placeholder="请输入" />
					</view>
				</view>
				<view class="form-item border-bottom">
					<view class="form-left">
						<text class="star">*</text>
						<text class="form-left-text">来访级别</text>
					</view>
					<view class="form-right">
						<uni-data-select v-model="formData.level" :localdata="levelRange">
						</uni-data-select>
					</view>
				</view>
				<view class="form-item border-bottom">
					<view class="form-left">
						<text class="star">*</text>
						<text class="form-left-text">来访人数</text>
					</view>
					<view class="form-right">
						<input type="number" v-model="formData.count_people" maxlength="50" placeholder="来访人数(整数)" />
					</view>
				</view>
				<view class="btn" v-if="showBtns">
					<button type="primary" class="save-btn" @click="nextHandle">下一步</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import nonNullCheck from '../../../utils/nonNullCheck.js';
	export default {
		name: "visit",
		data() {
			return {
				formData: {
					name: '', //来访概述
					purpose: '', //来访事由
					receptionist: '', //接待人
					visit_time: '', //来访时间
					leave_time: '', //离开时间
					description: '', //来访详述
					company: '', //来访单位
					level: '', //来访级别
					count_people: '', //来访人数
				},

				depRange: [],
				publishRangeCon: '',
				menuId: "",
				itemId: "",
				detail: false,
				showBtns:false,
				visitItem: {},
				type: '',
				visitId: '',
				range: [{
					text: "参观",
					value: 10
				}, {
					text: "拜访",
					value: 20
				}, {
					text: "面试",
					value: 30
				}, {
					text: "开会",
					value: 40
				}],
				levelRange: [{
					text: "一般",
					value: 10
				}, {
					text: "重要",
					value: 20
				}],
				userRange: [],
			}
		},
		onLoad(params) {
			if (params.visit) {
				this.visitId = params.visit;
				this.type = params.type;
				this.getVisitItem();
				if(this.type === 'show'){
					this.showBtns = false;
				}else{
					this.showBtns = true;
				}
			} else {
				this.showBtns = true;
			}
		},
		onShow() {
			this.getUserRange();
		},
		methods: {
			//获取用户
			getUserRange() {
				this.$u.api.userList({
					page: 0
				}).then(res => {
					let user = [];
					let obj = {};
					res.forEach(item => {
						obj = {
							value: null,
							text: ''
						};
						obj.value = item.id;
						obj.text = item.name;
						user.push(obj);
					})
					this.userRange = user
				})
			},
			getVisitItem() {
				this.$u.api.visitItem(this.visitId).then(res => {
					this.formData = res;
				})
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			bindStartDateChange: function(e) {
				this.formData.start_time = e.detail.value
			},
			bindEndDateChange: function(e) {
				this.formData.end_time = e.detail.value
			},
			nextHandle(type) {
				let that = this;
				if (!that.paramsCheck()) {
					return;
				} else {
					debugger;
					if (that.formData.id) {
						that.$u.api.visitUpdate(that.formData.id, that.formData).then(res => {
							if (res.err_msg) {

							} else {
								let params = `?visit=${that.formData.id}`;
								uni.navigateTo({
									url: '/pages/workSpace/visit/vpeopleList'+params
								})
							}
						})
					} else {
						that.$u.api.visitCreate(that.formData).then(res => {
							if (res.err_msg) {

							} else {
								uni.navigateTo({
									url: '/pages/workSpace/visit/vpeopleList'
								})
							}
						})
					}
				}
			},
			/* 参数验证 */
			paramsCheck() {
				if (!nonNullCheck(this.formData.purpose)) {
					uni.showToast({
						title: '请输入来访事由',
						icon: "none"
					})
					return false;
				}
				if (!nonNullCheck(this.formData.name)) {
					uni.showToast({
						title: '请输入来访概述',
						icon: "none"
					})
					return false;
				}
				if (!nonNullCheck(this.formData.visit_time)) {
					uni.showToast({
						title: '请选择来访时间',
						icon: "none"
					})
					return false;
				}
				if (!nonNullCheck(this.formData.leave_time)) {
					uni.showToast({
						title: '请选择离开时间',
						icon: "none"
					})
					return false;
				}
				if (!nonNullCheck(this.formData.receptionist)) {
					uni.showToast({
						title: '请选择接待人人',
						icon: "none"
					})
					return false;
				}
				if (!nonNullCheck(this.formData.level)) {
					uni.showToast({
						title: '请选择访问级别',
						icon: "none"
					})
					return false;
				}
				if (!nonNullCheck(this.formData.count_people)) {
					uni.showToast({
						title: '请填写来访人数',
						icon: "none"
					})
					return false;
				}
				return true;
			},


			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},

		}
	}
</script>

<style scoped>
	.qingjia-apply {
		background-color: #f3fbff;
		padding-bottom: 227rpx;
	}

	/* >>>.uni-status-bar {
		height: 0 !important;
	} */

	>>>.uni-navbar-btn-text text {
		font-size: 32rpx !important;
	}

	.apply-info {
		width: 720rpx;
		margin: 0 auto;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		padding: 25rpx 32rpx;
		box-sizing: border-box;
		margin-top: 24rpx;
	}

	.border-bottom {
		border-bottom: 1rpx solid #eeeeee;
	}

	.star {
		color: red;
	}

	.top-title-text {
		padding-left: 24rpx;
		position: relative;
		font-family: PingFang-SC-Medium;
		font-size: 34rpx;
		line-height: 72rpx;
		color: #383838;
	}

	.top-title-text::before {
		content: "";
		width: 6rpx;
		height: 29rpx;
		background-image: linear-gradient(90deg, #164cc3 0%, #2c6fd9 100%);
		border-radius: 3rpx;
		display: block;
		position: absolute;
		left: -4rpx;
		top: 22rpx;
	}

	.form-item {
		/* display: flex; */
		font-family: PingFang-SC-Medium;
		font-size: 30rpx;
		/* line-height: 97rpx; */
		height: 200rpx;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.form-left-text {
		color: #212121;
		margin-bottom: 33rpx;
	}

	.form-left {
		/* min-width: 160rpx; */
		width: 100%;
	}

	.form-right {
		margin-left: 20rpx;
		flex: 1;
		color: #414141;
	}

	.form-right input {
		/* height: 100%; */
		/* height: 60rpx; */
		font-size: 30rpx;
	}

	.form-date>>>.uni-date__x-input {
		height: 97rpx;
		font-size: 30rpx;
	}

	.form-date>>>.uni-icons {
		display: none;
	}

	.qingjia-apply>>>uni-input {
		/* height: 100%; */
		font-size: 30rpx;
	}

	.apply-reason-text {
		width: 653rpx;
		height: 179rpx;
		background-color: #f6f8fc;
		border: solid 1rpx #e5e5e5;
		margin-top: 21rpx;
		padding: 14rpx 24rpx;
		font-size: 26rpx;
		box-sizing: border-box;
	}

	.apply_require {
		margin-top: 0rpx !important;
	}

	.file-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		padding-top: 13rpx;
	}

	.file-wrap {

		margin-top: 20rpx;
		margin-right: 20rpx;
	}

	.file-item {
		width: 155rpx;
		height: 155rpx;
		border: solid 1rpx #e5e5e5;
		text-align: center;
		display: flex;

		align-items: center;
		position: relative;

	}

	.file-content {
		width: 100%;
	}

	.file-item .file-icon {
		width: 37rpx;
		height: 37rpx;

	}

	.file-item .file-name {
		font-family: PingFang-SC-Regular;
		font-size: 20rpx;
		line-height: 17rpx;
		color: #313131;
		margin-top: 11rpx;
		padding: 10rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.file-item>>>.uni-icons {
		width: 26rpx;
		height: 26rpx;
		position: absolute;
		right: -8rpx;
		top: -22rpx;
		/*
    background-color: #d81e06;
    border-radius: 50%;
    font-size: 20rpx !important;
    padding: 5rpx;
    */
		box-sizing: border-box;
	}

	.form-right {
		flex: 1;
		color: #414141;
	}

	/*部门*/
	uni-data-picker {
		width: 100%;
		border: none !important;
	}

	.my-data-picker>>>.input-value-border {
		border: none !important;
	}

	>>>.input-value {
		font-size: 30rpx !important;
		;
	}

	.my-data-picker uni-data-picker {
		width: 100% !important;
	}

	.my-data-picker {
		width: 100%;
		display: flex;
		align-items: center;
		margin-left: -10rpx;
	}

	/* 主体 */
	>>>.uni-navbar__header,
	>>>.uni-status-bar {
		background-image: linear-gradient(90deg, #164cc3 0%, #2c6fd9 100%), linear-gradient(#e60012, #e60012) !important;
	}

	hongtouwenjian-top {
		box-sizing: border-box;
		padding-top: 24rpx;
		padding-right: 15rpx;
		padding-bottom: 20rpx;
		padding-left: 15rpx;
	}

	.hongtouwenjian-top-c {
		background-color: #ffffff;
		border-radius: 10rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		display: flex;
		flex-direction: column;
	}

	.hongtouwenjian-top-c-title {
		display: flex;
		align-items: center;
		height: 85rpx;
		border-bottom: 1px solid #eeeeee;
	}

	.hongtouwenjian-top-c-title-mark {
		width: 6rpx;
		height: 29rpx;
		background-image: linear-gradient(90deg, #164cc3 0%, #2c6fd9 100%), linear-gradient(#f3fbff, #f3fbff);
		background-blend-mode: normal, normal;
		border-radius: 3rpx;
	}

	.hongtouwenjian-top-c-title-txt {
		font-size: 34rpx;
		color: #383838;
	}

	.hongtouwenjian-top-c-item {
		/* display: flex; */
		align-items: center;
		/* height: 100rpx; */
		border-bottom: 1px solid #EEEEEE;
		box-sizing: border-box;
		padding-left: 3rpx;
		padding-right: 12rpx;
		width: 100%;
		line-height: 97rpx;
	}

	.hongtouwenjian-top-c-item:last-child {
		border-bottom: none;
	}

	.hongtouwenjian-top-c-item-left {
		display: flex;
		align-items: center;
		width: 164rpx;
	}

	.hongtouwenjian-top-c-item-left-mark {
		font-size: 30rpx;
		color: #f00808;
	}

	.hongtouwenjian-top-c-item-left-txt {
		font-size: 30rpx;
		color: #212121;
	}

	.hongtouwenjian-top-c-item-middle {
		margin-left: 20rpx;
		flex: 1;
		display: flex;
		align-items: center;
		height: 100%;
	}

	.hongtouwenjian-top-c-item-middle-txt {
		font-size: 30rpx;
		color: #414141;
	}

	.hongtouwenjian-top-c-item-middle-input {
		padding: 0;
		margin: 0;
		outline: none;
		border: none;
		background-color: transparent;
		width: 100%;
		/* height: 100%; */
		height: 60rpx;
		font-size: 30rpx;
		color: #414141;
		display: flex;
		align-items: center;
	}

	.hongtouwenjian-top-c-item-right {
		width: 22rpx;
		height: 25rpx;
	}

	.hongtouwenjian-addbtn {
		display: flex;
		justify-content: flex-end;
		box-sizing: border-box;
		padding-right: 19rpx;
	}

	.hongtouwenjian-addbtn-w {
		padding: 0;
		margin: 0;
		outline: none;
		background-color: transparent;
		width: 90rpx;
		height: 46rpx;
		line-height: 46rpx;
		text-align: center;
		background-color: #0075ff;
		border-radius: 10rpx;
		font-size: 26rpx;
		color: #f3fbff;
	}

	/* 物品列表 */
	.fixed-assets-listBig {
		width: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;
	}

	.fixed-assets-list {
		width: 100%;
		background-color: #FFFFFF;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.fixed-assets-list .apply-info {
		padding-top: 0rpx;
	}

	.fixed-assets-list .top {
		height: 108rpx;
		line-height: 108rpx;
		border-bottom: 1rpx solid #eeeeee;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.fixed-assets-list .top-left-text {
		flex: 1;
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		font-size: 30rpx;
		color: #212121;
	}

	.fixed-assets-list .top-right image {
		width: 26rpx;
		height: 28rpx;
		vertical-align: middle;
	}

	.fixed-assets-list .top-right view {
		height: auto;
		padding-left: 10rpx;
		font-size: 26rpx;
		color: #8b8b8b;
	}

	/*  .fixed-assets-list .bottomBig{
      width: 100%;
    } */
	.fixed-assets-list .bottom {
		/* display: flex;
      justify-content: space-between;
      align-items: center; */
		padding-top: 25rpx;
		font-size: 28rpx;
		color: #616161;
		line-height: 72rpx;
	}

	.fixed-assets-list .bottom-left+.bottom-right {
		width: 50%;
	}

	/* 文件上传进度样式*/
	.u-progress-content {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.u-progress-dot {
		width: 10rpx;
		height: 10rpx;
		border-radius: 50%;
		background-color: #fb9126;
	}

	.u-progress-info {
		font-size: 24rpx;
		padding-left: 10rpx;
		letter-spacing: 2rpx
	}

	.is-hidden {
		visibility: hidden;
	}







	.title {
		font-size: 14px;
		font-weight: bold;
		margin: 20px 0 5px 0;
	}

	.data-pickerview {
		height: 400px;
		border: 1px #e5e5e5 solid;
	}

	.popper__arrow {
		top: -6px;
		left: 50%;
		margin-right: 3px;
		border-top-width: 0;
		border-bottom-color: #EBEEF5;
	}

	.popper__arrow {
		top: -6px;
		left: 50%;
		margin-right: 3px;
		border-top-width: 0;
		border-bottom-color: #EBEEF5;
	}
</style>
