<template>
	<view class="app-container">
		<u-navbar leftText="返回" :title="status==0?'违停申诉':status==1?'违停审批':''" :autoBack="true" :placeholder="true" />
		<uni-forms ref="valiForm" :rules="rules" :modelValue="valiForm" label-width="85" v-if="status == 0">
			<uni-forms-item label="复核理由:" name="reason">
				<uni-easyinput type="textarea" v-model="valiForm.reason" placeholder="请输入复核理由" />
			</uni-forms-item>
		</uni-forms>
		<view class="list-item" v-else>
			<!--      <view class="item-cell">
		  <view class="cell-lable">违停记录编号：</view>
		  <view class="cell-value u-line-1"></view>
		</view>
		<view class="item-cell">
		  <view class="cell-lable">违停记录标题：</view>
		  <view class="cell-value"></view>
		</view> -->
			<view class="item-cell">
				<view class="cell-lable">违停人员姓名：</view>
				<view class="cell-value">{{newList.userName}}</view>
			</view>
			<view class="item-cell">
				<view class="cell-lable">所属网格：</view>
				<view class="cell-value">{{newList.gridName}}</view>
			</view>
			<view class="item-cell">
				<view class="cell-lable">所属部门：</view>
				<view class="cell-value">{{newList.partName}}</view>
			</view>
			<view class="item-cell">
				<view class="cell-lable">违停时间：</view>
				<view class="cell-value u-line-1">{{newList.leaveTime}}</view>
			</view>
			<!--      <view class="item-cell">
		  <view class="cell-lable">违停路段：</view>
		  <view class="cell-value"></view>
		</view> -->
			<view class="item-cell">
				<view class="cell-lable">违停时长：</view>
				<view class="cell-value">{{newList.leaveDuty}}分钟</view>
			</view>
			<view class="item-cell">
				<view class="cell-lable">复核理由：</view>
				<view class="cell-value">{{newList.reason}}</view>
			</view>
			<view class="item-cell">
				<view class="cell-lable">复核审批：</view>
				<view class="cell-value">
					<uni-data-checkbox v-model="baseFormData.approval" :localdata="sexs" />
				</view>
			</view>
		</view>
		<fixed-buttom @click="submit" :title="status==0?'提交申诉':status==1?'提交审批':''"></fixed-buttom>
	</view>
</template>

<script>
	import {
		tgwtSs,
		tgwtGet,
		tgwtSp
	} from "@/api/jn/offDuty.js"
	export default {
		data() {
			return {
				status: null,
				valiForm: {
					reason: '',
					id: 0,
				},
				rules: {
					reason: {
						rules: [{
							required: true,
							errorMessage: '复核理由不能为空'
						}]
					},
				},
				newList: [],
				sexs: [{
					text: '同意',
					value: 0
				}, {
					text: '拒绝',
					value: 1
				}, ],
				baseFormData: {
					approval: 0,
					id: 0,
				}
			}
		},
		onLoad(e) {
			this.valiForm.id = e.id
			this.baseFormData.id = e.id
			this.status = e.status
			if (this.status != 0) {
				uni.showToast({
					icon: 'loading',
					title: '加载中'
				});
				tgwtGet(e.id).then(res => {
					this.newList = res.data
					uni.hideToast();
				})
			}
		},
		methods: {
			submit() {
				if (this.status == 0) {
					this.$refs.valiForm.validate().then(res => {
						uni.showToast({
							icon: 'success',
							title: '提交申诉成功'
						});
						tgwtSs(this.valiForm).then((res) => {
							uni.hideToast();
							uni.navigateBack({
								delta: 1
							});
						})
					}).catch(err => {})
				} else {
					uni.showToast({
						icon: 'success',
						title: '审批成功'
					});
					tgwtSp(this.baseFormData).then((res) => {
						uni.hideToast();
						uni.navigateBack({
							delta: 1
						});
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list-item {
		box-sizing: border-box;
		padding: 25rpx;
		background: #fff;
		margin-bottom: 30rpx;
		box-shadow: 0rpx 0rpx 20rpx rgba(57, 118, 241, 0.06);
		border-radius: 16rpx;

		.item-cell {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;

			.cell-lable {
				width: 200rpx;
				font-size: 28rpx;
				color: #9da2ab;
			}

			.cell-value {
				flex: 1;
				font-size: 28rpx;
				font-weight: 400;
				color: #2e2f31;
			}
		}

		&>.item-cell:last-child {
			margin-bottom: 0;
		}
	}
</style>