<template>
	<view :style="{height:'100vh',overflow:'hidden',background:'#f7f7f7'}">
		<u-status-bar></u-status-bar>
		<u-navbar
			title="调令反馈" 
			:autoBack="true" 
			:titleStyle="{
				fontSize:'18px'
			}" 
			:height='44'
			:safeAreaInsetTop=true
			leftIconSize='20'
			leftIconColor='rgb(153, 153, 153)'
		>
			<view
				slot="right"
				hover-class="is-hover" 
				class="searchBox_right_btn"
				hover-stay-time=100
				@click="myShow"
				>
				<u--image :src="'../../static/images/filter.png'" width="20px" height="20px"></u--image>
			</view>
		</u-navbar>
		<u-tabs 
			:list="tabsOptions" 
			@click="tabsChange" 
			:scrollable=false
			class="tabsClass"
			:activeStyle="{color: 'rgb(37, 157, 255)',fontSize: '16px'}"
			:inactiveStyle="{color: '#606266',fontSize: '16px'}"
			lineColor="transparent"
			itemStyle="height: 44px"
		>
		</u-tabs>
		<div class="mybody">
			<div class="countNum"><text>共{{list.length}}条信息</text></div>
			<div v-for="(item,index) in list" class="listItem" @click="myNavigateTo(item)">
				<div class="row1"><text>{{item.year+'年度调令第'+item.serial+'号'}}</text></div>
				<div class="row2">
					<div><text>{{item.dispatchType}}</text></div>
					<div>
						<text :style="{marginRight:'5px'}">{{item.createUserName}}</text>
						<text>{{item.createTm}}</text>
					</div>
				</div>
			</div>
			<div :style="{height:'100px'}"></div>
		</div>
		
		<u-popup
			:show="show" 
			mode="right"  
			:safeAreaInsetTop='true'
			:closeOnClickOverlay='false'
			@close="close" 
			@open="myShow">
			<view :style="{padding:'10px',width:'250px'}">
				<u-toast ref="uToast"></u-toast>
				<text class="title">按类型</text>
				<u-checkbox-group 
					placement="row"
					v-model="check"
					:style="{padding:'10px 0px 20px 0px'}"
				>
					<u-checkbox name="0" label="水库调洪" class="checkItem"></u-checkbox>
					<u-checkbox name="1" label="人员转移" class="checkItem"></u-checkbox>
				</u-checkbox-group>
				<text class="title">按时间</text>
				<div :style="{display:'flex',marginTop:'10px'}">
					<view 
						class="tmPicker" 
						@click="showStmPicker = true"
						hover-class="is-hover"
						hover-stay-time=100
					>{{getStmStr}}<u-icon name="calendar" size="18" color="#909399"></u-icon>
					</view>
					<text :style="{width:'20%',lineHeight:'32px',textAlign:'center'}">至</text>
				</div>
				<div :style="{display:'flex',marginTop:'10px'}">
					<view 
						class="tmPicker" 
						@click="showEtmPicker = true"
						hover-class="is-hover"
						hover-stay-time=100
					>{{getEtmStr}}<u-icon name="calendar" size="18" color="#909399"></u-icon>
					</view>
					<text :style="{width:'20%'}"></text>
				</div>
				<div :style="{position:'absolute',bottom:'20px',right:'20px',display:'flex'}">
					<u-button 
						:style="{width:'80px',marginRight:'10px'}" 
						text="重置"
						@click="reSet"
					></u-button>
					<u-button 
						:style="{width:'80px'}" 
						color="rgba(217, 0, 27, 1)" 
						type="primary" 
						text="确定"
						@click="submit"
					></u-button>
				</div>
			</view>
			<u-datetime-picker
					:show="showStmPicker"
					v-model="stm"
					mode="datetime"
					closeOnClickOverlay
					@confirm="showStmPicker = false"
					@cancel="showStmPicker = false"
					@close="showStmPicker = false"
			>
			</u-datetime-picker>
			<u-datetime-picker
					:show="showEtmPicker"
					v-model="etm"
					mode="datetime"
					closeOnClickOverlay
					@confirm="showEtmPicker = false"
					@cancel="showEtmPicker = false"
					@close="showEtmPicker = false"
			>
			</u-datetime-picker>
		</u-popup>
	</view>
</template>

<script>	
	import moment from 'moment'
	const tabsOptions = [
					{
						name:'执行中',
						value:1
					},
					{
						name:'完成',
						value:2
					},
				]

	export default {
		data() {
			return {
				tabsOptions:tabsOptions,
				show:false,
				tabVal:1,
				check:['0','1'],
				showStmPicker:false,
				showEtmPicker:false,
				stm:Number(moment(new Date()).add(-7,'days')),
				etm:Number(new Date()),
				list:[],
				// {
				// 	serial:'10',//调度指令编号
				// 	year:'2023',//调度令年度
				// 	executeOrgCode:'执行单位编码',//执行单位编码
				// 	executeOrgName:'执行单位名称',//执行单位名称
				// 	dispatchType:'水库调洪',//调度类型
				// 	forwardOrgName:'抄送单位',//抄送单位
				// 	startTm:'计划执行时间',//计划执行时间
				// 	endTm:'计划结束时间',//计划结束时间
				// 	content:'指令内容',//指令内容
				// 	createTm:'指令日期',//指令日期
				// 	createUserId:'指令发起人id',//指令发起人id
				// 	createUserName:'张三',//指令发起人
				// 	status:'1',//调令状态，0=待下发，1=执行中，2=完成
				// 	createTm:'2023-10-10 12:12:10',
				// 	dispatchId: '14'
					
				// }
			};
		},
		computed: {
			getStmStr() {
				return moment(this.stm).format('YYYY-MM-DD HH:mm:ss')
			},
			getEtmStr() {
				return moment(this.etm).format('YYYY-MM-DD HH:mm:ss')
			},
		},
		methods: {
			tabsChange(item) {
				this.tabVal = item.value
				this.submit()
			},
			myShow() {
				this.show = true
			},
			close() {
				this.show = false
			},
			reSet() {
				this.stm = Number(moment(new Date()).add(-7,'days'))
				this.etm = Number(new Date())
				this.check = ['0','1']
			},
			async submit() {
				try{
					const params = {
						status:this.tabVal,
						dispatchTypeList:this.check,
						dateTimeRangeSo:{
							start:moment(this.stm).format('YYYY-MM-DD HH:mm:sss'),
							end:moment(this.etm).format('YYYY-MM-DD HH:mm:sss')
						}
					}
					console.log('params',params)
					const res = await uni.$http.post('/gunshiApp/xfflood/xfEmerDispatchR/app/list',params)
					console.log('res',res)
					this.list = res.data.data
					this.close()
				}catch(e){
					//TODO handle the exception
					this.$refs.uToast.show({
						type: 'error',
						title: '失败主题',
						message: "请求失败",
					})
					setTimeout(()=>{
						this.close()
					},1000)
				}
			},
			myNavigateTo (record) {
				uni.navigateTo({
				  url: '/pages/orderFeedback/orderInformation?obj='+JSON.stringify({...record,isDisabled:this.tabVal===1?false:true}) // 跳转到对应路径的页面
				});
			}
		},
		created() {
			this.submit()
		},
		onShow() {
			this.submit()
		}
		
	}
</script>

<style lang="scss" scoped>
.myTitleStyle{
	font-size: 30px;
	background-color: red;
	height: 200px;
}
.tabsClass{
	background-color: #ffffff;
	margin-top: 44px;
	height: 44px;
	padding: 0 40px;
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
}
.searchBox_right_btn{
	width: 40px;
	height: 40px;
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.is-hover{
	background-color: #eee;
}
.checkItem{
	margin-right: 10px;
}
.tmPicker{
	width: 100%;
	height: 30px;
	border: 1px solid rgba(240, 240, 240, 1);
	border-radius: 4px;
	margin-right: 10px;
	font-size: 14px;
	display: flex;
	justify-content: space-around;
	align-items: center;
	// padding-left: 10px;
}
.mybody{
	background-color: #ffffff;
	margin: 5px 5px;
	padding: 5px 20px;
	height: calc( 100vh - 100px );
	overflow: scroll;
}
.countNum{
	width: 100%;
	text-align: right;
	font-size: 13px;
}
.listItem{
	width: 100%;
	border-bottom: 1px solid #eee;
	padding: 10px 0;
	display: flex;
	flex-direction: column;
}
.row1{
	font-size: 14px;
	font-weight: 700;
	color: #333333;
	width: 100%;
	height: 30px;
	line-height: 30px;
}
.row2{
	font-size: 12px;
	color: #999999;
	width: 100%;
	height: 30px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
</style>
