<template>
	<div>
		<el-form ref="form" :model="zoneForm" label-width="60px" class="custom-label">
			<el-form-item label="时区：" style="margin: 0;">
				<el-select v-model="zoneForm.zoneId" placeholder="请选择" 
					style="width: 90px;" size="small" @change="handleSele">
				    <el-option
				      v-for="item in zoneOptions"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
				</el-select>
				<span class="margin-left-sm margin-right text-sm">{{zoneForm.zoneTime}}</span>
			</el-form-item>
		</el-form>
	</div>
</template>

<script setup name="">
	const { proxy } = getCurrentInstance();
	const data = reactive({
		zoneForm: {
			zoneId: 8,
			zoneTime: ""
		},
		zoneOptions: [{
			value: 1,
			label: "东一区"
		},{
			value: 2,
			label: "东二区"
		},{
			value: 3,
			label: "东三区"
		},{
			value: 4,
			label: "东四区"
		},{
			value: 5,
			label: "东五区"
		},{
			value: 6,
			label: "东六区"
		},{
			value: 7,
			label: "东七区"
		},{
			value: 8,
			label: "东八区"
		},{
			value: 9,
			label: "东九区"
		},{
			value: 10,
			label: "东十区"
		},{
			value: 11,
			label: "东十一区"
		},{
			value: 12,
			label: "东十二区"
		},{
			value: -1,
			label: "西一区"
		},{
			value: -2,
			label: "西二区"
		},{
			value: -3,
			label: "西三区"
		},{
			value: -4,
			label: "西四区"
		},{
			value: -5,
			label: "西五区"
		},{
			value: -6,
			label: "西六区"
		},{
			value: -7,
			label: "西七区"
		},{
			value: -8,
			label: "西八区"
		},{
			value: -9,
			label: "西九区"
		},{
			value: -10,
			label: "西十区"
		},{
			value: -11,
			label: "西十一区"
		},{
			value: -12,
			label: "西十二区"
		}]
	});
	const { zoneForm, zoneOptions } = toRefs(data);
	const handleSele = function(val){
		var d = new Date();
		var len = d.getTime();
		var offset = d.getTimezoneOffset()*60000;
		var utcTime = len + offset;
		let _time = new Date(utcTime + 3600000*val)
		zoneForm.value.zoneTime = proxy.parseTime(_time,`{y}-{m}-{d} {h}:{i}:{s}`);;
	}
	handleSele(8);
	
</script>

<style lang='scss' scoped>
	::v-deep .el-form-item__label,::v-deep .el-input__inner,::v-deep .el-select .el-input .el-select__caret {
	  color: #fff;
	}
	::v-deep .el-input__wrapper{
		border: 1px solid #fff;
		box-shadow: none;
		background-color: transparent;
	}
</style>