<template>
	<view class="center">
		<view>
			<u-navbar left-text="返回" :autoBack="true" placeholder="true">
			</u-navbar>
		</view>

		<view class="mar-20 br-16" style="background-color: white;">
			<view class="mar-20 fs-32 fw-600" style="text-align: left;">访客登记</view>
			<view class="list-container">
				<view class="list-item">
					<view class="flex" style="flex: 1;text-align: left;">
						<text class="t">*</text>
						<text class="name">访客姓名</text>
					</view>
					<view style="flex: 2;">
						<input class="" style="text-align: left;" placeholder="请输入姓名"
							placeholder-style="color:#999999" />
					</view>
				</view>
				<view class="list-item" @click="show=true">
					<view class="flex" style="flex: 1;text-align: left;">
						<text class="t">*</text>
						<text class="name">到访小区</text>
					</view>
					<view class="flex-column-center" style="flex: 2;">
						<text style="flex: 1;text-align: left;">请选择小区</text>
						<image class="h-20 w-20" src="@/static/icon_r.png"></image>
					</view>
				</view>
				<view class="list-item">
					<view class="flex" style="flex: 1;text-align: left;">
						<text class="t">*</text>
						<text class="name">到访房间号</text>
					</view>
					<view style="flex: 2;">
						<input class="" style="text-align: left;" placeholder="请输入房间号"
							placeholder-style="color:#999999" />
					</view>
				</view>
				<view class="list-item" @click="showDate = true">
					<view class="flex" style="flex: 1;text-align: left;">
						<text class="t">*</text>
						<text class="name">到访时间</text>
					</view>
					<view class="flex-column-center" style="flex: 2;">
						<text style="flex: 1;text-align: left;">{{startTimeValue==""?"请选择到访时间":startTimeValue}}</text>
						<image class="h-20 w-20" src="@/static/icon_r.png"></image>
					</view>
				</view>
				<view class="list-item">
					<view class="flex" style="flex: 1;text-align: left;">
						<text class="t">*</text>
						<text class="name">手机号</text>
					</view>
					<view style="flex: 2;">
						<input class="" style="text-align: left;" placeholder="请输入手机号"
							placeholder-style="color:#999999" />
					</view>
				</view>
				<view class="list-item">
					<view class="flex" style="flex: 1;text-align: left;">
						<text class="t"> </text>
						<text class="name">车牌号</text>
					</view>
					<view style="flex: 2;">
						<input class="" style="text-align: left;" placeholder="请输入车牌号"
							placeholder-style="color:#999999" />
					</view>
				</view>
			</view>
		</view>

		<view class="mt-65">
			<text class="plr-100 ptb-25 br-12 fs-30" style="background:#1FCA7C;color: #fff;">提交</text>
		</view>
		<u-popup :show="show" mode="center" @close="close" @open="open" round="20">
			<view class="flex-column mlr-50" style="width:600rpx;">
				<text class="fs-32 fw-600 mtb-20">选择小区</text>
				<scroll-view scroll-y class="h-400">
					<view v-for="(item, index) in 8" :key="index">
						<view class="fs-24 pad-30" style="border-bottom: 1rpx solid #E9E9E9;">
							<text>西城小区</text>
						</view>
					</view>
				</scroll-view>
				<view class="mt-40">
					<text class="plr-80 ptb-12 br-12" style="background:#1FCA7C;color: #fff;">下一步</text>
				</view>

			</view>
		</u-popup>
		<u-datetime-picker ref="datetimePicker" :show="showDate" v-model="startTime" mode="date" :formatter="formatter"
			:closeOnClickOverlay="true" @confirm="onConfirmStartTime" @cancel="onCloseStartTime"
			@close="onCloseStartTime"></u-datetime-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showDate: false,
				startTimeValue: "",
				startTime: new Date().getTime(),
				show: false,
				list1: [
					"https://zhongqian.xnszz.com/1-images/home/20250213002.png",
				],
				listService: [{
						img: "https://zhongqian.xnszz.com/1-images/home/20250213002.png",
						title: "访客",
						describe: "请点击输入访客信息"
					},
					{
						img: "https://zhongqian.xnszz.com/1-images/home/20250213002.png",
						title: "报修报事",
						describe: "保修报事一键即发"
					},
					{
						img: "https://zhongqian.xnszz.com/1-images/home/20250213002.png",
						title: "生活缴费",
						describe: "水费电费在线缴纳"
					},
					{
						img: "https://zhongqian.xnszz.com/1-images/home/20250213002.png",
						title: "常用电话",
						describe: "随时查找常用电话"
					}
				],
			};
		},
		onLoad(options) {

		},
		onReady() {
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		methods: {
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			onOpenStartTime() {
				this.showDate = true
			},
			onCloseStartTime() {
				this.showDate = false
			},
			onConfirmStartTime(e) {
				this.onCloseStartTime()
				this.startTimeValue = this.$wskj.timeFormat(e.value, 'yyyy-mm-dd')
				this.$emit('onConfirmStartTime', this.startTimeValue)
			},
		}
	};
</script>

<style lang="scss" scoped>
	.center {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background: #f5f5f5;
	}

	.list-container {
		display: flex;
		flex-direction: column;
	}

	.list-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 20rpx 20rpx;
		border-radius: 15rpx;
		border-bottom: 1rpx solid #f5f5f5;
		color: #999999;

		.t {
			width: 30rpx;
			color: #FF0000;
		}

		.name {}
	}
</style>