<template>
	<!-- 工单详情 -->
	<view class="card_tickets_details">
		<uv-navbar title="工单详情" :placeholder="true" :titleStyle="{color:'#ffffff'}" leftIconColor="#ffffff"
			bgColor="#1d345e" @leftClick="leftClick"></uv-navbar>
		<uv-form :model="userInfo" :rules="rules" :labelStyle="{color:'#ffffff'}" labelPosition="left" labelWidth="80"
			:borderBottom="false" ref="form">
			<uv-form-item label="工单编号" prop="orderNo">
				<uv-input v-model="userInfo.orderNo" disabledColor="rgba(245, 247, 250,.3)" disabled
					placeholder="请填写工单编号" border="surround" color="#fff"></uv-input>
			</uv-form-item>
			<uv-form-item label="项目名称" prop="projectName">
				<uv-input v-model="userInfo.projectName" disabledColor="rgba(245, 247, 250,.3)" disabled
					placeholder="请填写项目名称" border="surround" color="#fff"></uv-input>
			</uv-form-item>
			<uv-form-item label="工单内容" prop="orderContent">
				<uv-textarea v-model="userInfo.orderContent" disabled border="surround" placeholder="请输入工单内容"
					:textStyle="{color: '#fff'}" :customStyle="{background: 'transparent',}"></uv-textarea>
			</uv-form-item>
			<uv-form-item label="派单时间" prop="updateTime">
				<uni-datetime-picker v-model="userInfo.updateTime" disabled />
			</uv-form-item>
			<uv-form-item label="完成时间" prop="finishTime">
				<uni-datetime-picker type="datetime" :start="start" :end="end" v-model="userInfo.finishTime"
					@change="change" />
			</uv-form-item>
			<uv-form-item label="责任人" prop="updateBy">
				<uv-input v-model="userInfo.updateBy" disabledColor="rgba(245, 247, 250,.3)" disabled
					placeholder="请填写责任人" border="surround" color="#fff"></uv-input>
			</uv-form-item>
			<uv-form-item label="附件上传" prop="fileList">
				<uv-upload :fileList="userInfo.fileList" name="3" :maxCount="1" multiple
					:previewFullImage="true"></uv-upload>
			</uv-form-item>
			<uv-form-item label="工单备注" prop="orderRemark">
				<uv-textarea v-model="userInfo.orderRemark" border="surround" placeholder="请输入内容"
					:textStyle="{color: '#fff'}" :customStyle="{background: 'transparent',}"></uv-textarea>
			</uv-form-item>
		</uv-form>
		<view style="width:100%;height:120rpx;"></view>
		<view class="repairs_btn_bottom" @click="submit" v-if="userInfo.orderStatus != '2'">
			<uv-button style="margin-bottom: 20rpx;" type="primary" text="提交"></uv-button>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onShow, onReady } from "@dcloudio/uni-app";
	import { getLocalStorage } from "@/utils/cache";
	import { PutRepairOrder } from "@/api/order";
	import { ref } from 'vue';
	const start = ref(Date.now() - 10 * 24 * 3600000)
	const end = ref(Date.now() + 10 * 24 * 3600000)
	const userInfo : any = ref({
		orderNo: '',
		projectName: '',
		orderContent: '',
		updateTime: '',
		finishTime: '',
		updateBy: '',
		fileList: [],
		orderRemark: '',
	})
	const rules = ref({
		'finishTime': {
			type: 'string',
			required: true,
			message: '请选择完成时间',
			trigger: ['blur', 'change']
		},
		'orderRemark': {
			type: 'string',
			required: true,
			message: '请填写工单备注',
			trigger: ['blur', 'change']
		},
	})
	const form : any = ref(null)
	// 提交
	function submit() {
		form.value.validate().then(() => {
			PutRepairOrder(userInfo.value).then((res : any) => {
				if (res.code == 200) {
					uni.showToast({
						icon: 'success',
						title: '处理完成',
						duration: 2000
					})
					// 延时跳转
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});
					}, 2000)
				}
			})
		}).catch(() => {
			uni.showToast({
				icon: 'error',
				title: '校验失败'
			})
		})
	}
	// 选择时间
	function change(params : any) {
		console.log('----change事件:', params);
	}
	onReady(() => {
		// #ifdef APP-PLUS
		plus.navigator.setStatusBarStyle("light");
		// #endif
	})
	onShow(() => {
		// #ifdef APP-PLUS
		plus.navigator.setStatusBarStyle("light");
		// #endif
		const info = getLocalStorage('ticketsDetails')
		userInfo.value = info
	})
	function leftClick() {
		uni.navigateBack({
			delta: 1
		});
	}
</script>

<style lang="scss" scoped>
	::v-deep .uv-textarea--disabled {
		background-color: rgba(245, 247, 250, .3) !important;
	}

	::v-deep .uni-date-editor--x__disabled {
		opacity: unset !important;
		background-color: rgba(245, 247, 250, .3) !important;
	}

	::v-deep .uni-date-editor--x__disabled .uni-date-x {
		background-color: unset !important;
		color: #fff !important;
	}

	::v-deep .uni-date-x {
		background-color: unset !important;
		color: #fff !important;
	}

	::v-deep .uni-date-x--border {
		border: 1rpx solid #e5e5e5 !important;
	}

	.card_tickets_details {
		padding: 0rpx 30rpx 30rpx 30rpx;
		width: calc(100% - 60rpx);
	}

	.repairs_btn_bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx;
		background-color: #1d345e;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
		padding-bottom: constant(safe-area-inset-bottom); //兼容 IOS<11.2
		padding-bottom: env(safe-area-inset-bottom); //兼容 IOS>11.2
	}
</style>