<template>
	<view class="tabBody">
		<div class="searchBox">
			<div class="searchBox_left">
				<u-search 
					shape="square"
					:clearabled="true"
					:showAction=false
					v-model="searchVal"
					placeholder='请输入工程名称/上报人'
					height=40
				>
				</u-search>
			</div>
			<div class="searchBox_right">
				<view 
					hover-class="is-hover" 
					class="searchBox_right_btn"
					hover-stay-time=100
					@click="myShow"
					>
					<u--image :src="'../../../static/images/filter.png'" width="22px" height="22px"></u--image>
				</view>
			</div>
		</div>	
		<div class="mybody">
			<div class="countNum"><text>共{{getSearchVal.length}}条信息</text></div>
			<div v-for="(item,index) in getSearchVal" class="listItem" @click="toForm(index)">
				<div>
					<div class="row1"><text>{{item.projectName}}</text></div>
					<div class="row2">
						<div>
							<text :style="{marginRight:'5px'}">{{item.reporter}}</text>
							<text>{{item.reportTime}}</text>
						</div>
					</div>
				</div>
				<div class="icon" v-show="item.isRead===0"></div>
			</div>
			<div :style="{height:'100px'}"></div>
		</div>
		<u-popup 
			:show="show" 
			mode="right"  
			:safeAreaInsetTop='true'
			@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="check1"
					:style="{padding:'10px 0px 20px 0px'}"
				>
					<u-checkbox name="1" label="水库" class="checkItem"></u-checkbox>
					<u-checkbox name="2" label="水电站" class="checkItem"></u-checkbox>
				</u-checkbox-group>
				<div :style="{display:'flex',alignItems:'center'}">
					<text class="title">按上报时间</text>
					<u-switch v-model="isTime" size="20" :style="{margin:'2px 0 0 10px'}"></u-switch>
				</div>
				<div :style="{display:'flex',marginTop:'10px'}" v-if="isTime">
					<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'}" v-if="isTime">
					<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'

	export default {
		data() {
			return {
				show:false,
				showStmPicker:false,
				showEtmPicker:false,
				searchVal:'',
				stm:Number(moment(new Date()).add(-7,'days')),
				etm:Number(new Date()),
				isTime:false,
				check1:['1','2'],
				list:[]
			}
		},
		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')
			},
			getSearchVal() {
				if(this.searchVal){
					return this.list.filter(o => (o.projectName?.indexOf(this.searchVal)>-1 || o.reporter?.indexOf(this.searchVal)>-1))
				}else{
					return this.list
				}
			},
		},
		methods: {
			myShow() {
				this.show = true
			},
			close() {
				this.show = false
			},
			reSet() {
				this.isTime = false
				this.stm = Number(moment(new Date()).add(-7,'days'))
				this.etm = Number(new Date())
				this.check1 = ['1','2']
			},
			async submit() {
				if(!moment(this.stm).isBefore(this.etm)){
					this.$refs.uToast.show({
						type: 'error',
						title: '失败主题',
						message: "开始时间需小于结束时间",
					})
					return
				}
				try{
					const params = {
						projectTypes:this.check1.length===0?['999']:this.check1,
					}
					if(this.isTime){
						params.timeSo = {
							start:moment(this.stm).format('YYYY-MM-DD HH:mm:ss'),
							end:moment(this.etm).format('YYYY-MM-DD HH:mm:ss'),
						}
					}
					console.log('params',this.check1==[])
					const res = await uni.$http.post('/gunshiApp/xfflood/xfProjectRun/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)
				}
			},
			toForm(myIndex) {
				uni.navigateTo({
				  url: '/pages/gqzq/gqxx/qkForm?obj='+JSON.stringify({list:this.getSearchVal,myIndex:myIndex}) // 跳转到对应路径的页面
				});
			},
		},
		created() {
			this.submit()
		},
	}
</script>

<style lang="scss" scoped>
.tabBody{
	background-color: rgba(247, 247, 247, 1);
	height: 100%;
	// display: flex;
	// flex-direction: column;
	// align-items: center;
}
.searchBox{
	height: 62px;
	width: 100%;
	background-color: #ffffff;
	border-bottom: 1px solid #eee;
	display: flex;
	align-items: center;
}

.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;
	align-items: center;
	justify-content: space-between;
}
.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;
}
.icon{
	width: 10px;
	height: 10px;
	border-radius: 5px;
	background-color: red;
}
.searchBox_left{
	width: 82%;
	padding-left: 15px;
}
.searchBox_right{
	width: 18%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.searchBox_right_btn{
	width: 40px;
	height: 40px;
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.is-hover{
	background-color: #eee;
}
.title{
	display: inline-block;
	font-size: 16px;
}
.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;
}
</style>
