<template>
	<div class="">
		<TopNav navTitle="预警指令反馈" />

		<div class="contentBox">
			<div class="item_box item">
				<van-field 
					v-model="formData.time" 
					placeholder="请选择处置时间"
					rows="2" 
					label="处置时间" 
					label-width="60px" 
					input-align="right"
					right-icon="arrow-down" 
					@click="show = true" />
				<van-popup 
					v-model:show="show" 
					position="bottom" 
					:style="{height:'30%'}">
					<van-datetime-picker 
						v-model="time" 
						type="datatime" 
						title="选择时间"
						@confirm="chooseTime"
						@cancel="show = false"
					/>
				</van-popup>
			</div>
			<div class="item_box item">
				<van-field 
					v-model="fknrCnt" 
					label="处置地点" 
					autosize type="textarea" 
					label-width="60px"
					placeholder="请输入处置地点"/>
			</div>

			<div class="item_box item">
				<van-field 
					v-model="formData.czcs" 
					placeholder="请选择处置措施"
					rows="2" label="处置措施" label-width="60px" input-align="right"
					right-icon="arrow-down" @click="isShowType = true" />
				<van-action-sheet v-model:show="isShowType">
					<van-picker 
						:columns="diposalMeasure"
						@confirm="chooseCzcs"
						@cancel="isShowType = false" 
					/>
				</van-action-sheet>
			</div>

			<div class="item_box item">
				<van-field 
					v-model="formData.czjg" 
					rows="2" 
					label="处置结果" 
					placeholder="请选择处置结果"
					label-width="60px" input-align="right"
					right-icon="arrow-down" @click="isShow = true" />
				<van-action-sheet v-model:show="isShow">
					<van-picker 
						:columns="disposalResults"
						@confirm="chooseCzjg"
						@cancel="isShow = false" 
					/>
				</van-action-sheet>
			</div>

			<div class="item_box item itemTextArea">
				<van-field 
					v-model="formData.czjgms" 
					rows="2" 
					label="处置经过描述" 
					autosize 
					type="textarea" 
					label-width="100px"
					maxlength="200" 
					placeholder="请输入处置经过描述" 
					show-word-limit/>
			</div>

			<div class="item_box item">
				<div class="flex-item">
					<van-field 
						v-model="formData.czmj" 
						label="处置民警" 
						autosize 
						type="textarea" 
						label-width="60px"
						placeholder="请输入处置民警"/>
						<div class="czBtn"  @click="addMj">按钮</div>
				</div>
				<div class="policeCardWrap">
					<div class="policeCardCon" v-for="(item,index) in mjList" :key="index">
						<div class="policeCard">{{item}}</div>
						<span class="close" @click="deleteMj(index)">
							<van-icon name="close"></van-icon>
						</span>
						
					</div>
				</div>
			</div>

			<div class="info_box item_box">
				<div class="title">文件上传</div>
				<van-uploader :after-read="afterRead" v-model="fileList" />
			</div>
		</div>
		<div @click="formSubmit()" class="btnWrap">
			<van-button :loading="loading" round block type="primary">提交</van-button>
		</div>
	</div>
</template>

<script setup>
import TopNav from "../../../components/topNav.vue";
import router from "../../../router";
import { ref, onMounted } from "vue";
const time = ref(new Date())
const loading = ref(false)
const show = ref(false)
const isShow = ref(false)
const isShowType = ref(false)
const formData = ref({
	time: '', //时间
	czcs:'',//处置措施
	czjg:'',//处置结果
    disposalArea: '',
    diposalMeasure: '1',
    disposalResults: '1',
    czjgms: '',
    czmj: '',
    imageUrl: []
})
const index1 = ref('')
const index2 = ref(0)
const diposalMeasure = ref(['抓捕', '管控'])
const disposalResults = ref(['抓获', '未抓获'])
const mjList = ref(['张三'])
const upImgGroup = ref([])
const fileList = ref([]);

// 选择时间
function chooseTime(val){
	formData.value.time = dateFormat(val)
	show.value = false
}

// 选择处置措施
function chooseCzcs(val){
	formData.value.czcs = val
	isShowType.value = false
}

// 选择处置结果
function chooseCzjg(val){
	formData.value.czjg = val
	isShow.value = false
}

function formSubmit(e) {
	let that = this
	router.push("/yjzl");
    // uni.showModal({
    //     content: '是否提交反馈信息',
    //     confirmText: '确认',
    //     showCancel: false,
    //     success(res) {
    //         if (res.confirm) {
    //             that.$post('/dispatchWarning/yjzl/doDeal', {
    //                 'czsj': that.date,
    //                 'czddxz': that.formData.disposalArea,
    //                 'czcs': that.formData.diposalMeasure,
    //                 'czjg': that.formData.disposalResults,
    //                 'czjgms': that.formData.czjgms,
    //                 'czmj': that.mjList.join(','),
    //                 'yjzlId': that.xqId,
    //                 'fileids': that.imgs.join(',')
    //             }).then(res => {
    //                 uni.navigateBack({
    //                     delta: 2
    //                 })
    //             }).catch(err =>{
    //                 uni.showToast({
    //                     title:err
    //                 })
    //             })
    //         }
    //     }
    // })
}
// 删除民警
function deleteMj(index) {
    mjList.value.splice(index, 1)
}
// 新增民警
function addMj() {
    mjList.value.push(formData.value.czmj)
    formData.value.czmj = ''
}
// 时间处理
function dateFormat(time) {
    let date = new Date(time);
    let year = date.getFullYear();
    let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
    let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
    let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
    let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
    let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
    return year + "-" + month + "-" + day + ' ' + hours + ':' + minutes + ':' + seconds;
}

function 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}`;
}


function afterRead(file) {
}
</script>

<style lang="scss" scoped>
@import "../../../assets/styles/mixin.scss";
.contentBox{
	margin-top: 14vw;
	padding: 3vw 2vw;
	box-sizing: border-box;
	.item{
		margin-bottom: 4vw;
		.flex-item{
			position: relative;
			.czBtn{
				width: 10vw;
				position: absolute;
				top: 4vw;
				right: 4vw;
				color: rgb(66, 136, 231);
				@include font_size($font_medium_s);
			}
		}
		.policeCardWrap {
			padding: 1vw;
			box-sizing: border-box;
			display: flex;
			flex-wrap: wrap;
			.policeCardCon {
				position: relative;
				@include font_size($font_medium_s);
				background-color: #092C5D;
				margin-right: 2vw;
				text-align: center;
				margin-bottom: 2vw;
				border-radius: 1vw;
				color: #fff;
				.policeCard {
					padding: 1vw 5vw;
					box-sizing: border-box;
				}
				.close{
					position: absolute;
					right: 0vw;
					top: 0vw;
				}
			}

		}
	}
	.info_box{
		padding: 4vw;
		box-sizing: border-box;
		.title {
			@include font_size($font_medium);
			margin-bottom: 4vw;
		}

	}
	.itemTextArea{
		::v-deep .van-field__control{
			height: 200px !important;
		}
	}
}

.btnWrap {
	padding: 2vw 4vw;
}
	

	
</style>
