<template>
	<view class="box">
		<view class="topheadk">
			<view class="shaiselecttop">
				<view class='shaiselect' @click="shai">筛选</view>
			</view>
			<view class="head">
				<view class="headitem">
					<view class="headitemtop">在审项目数</view>
					<view class="headitembot">{{end==''?'':end[0].ftrialcount}}</view>
				</view>
				<view class="headitem">
					<view class="headitemtop">审结项目数</view>
					<view class="headitembot">{{end==''?'':end[0].fconcludecount}}</view>
				</view>
				<view class="headitem">
					<view class="headitemtop">总项目数</view>
					<view class="headitembot">{{end==''?'':end[0].fcount}}</view>
				</view>
			</view>
			
		</view>
		
		<view class="nodata" v-if="xiangmulist.length==0">暂无数据</view>

		<view class="taizhang" v-else>
			<view class="taizhanghead">
				<view class="taizhangitem">项目编号</view>
				<view class="taizhangitem">项目名称</view>
				<view class="taizhangitem">操作</view>
			</view>
			<view class="taizhangbox">
				<view class="taiboxitem" v-for="(item,index) in xiangmulist" :key="index">
					<view class="taizhangleft" v-if="item.fnumber==null">暂无</view>
					<view class="taizhangleft" v-else>{{item.fnumber}}</view>
					<view class="taizhangmiddle" v-if="item.fname==null">暂无</view>
					<view class="taizhangmiddle" v-else>{{item.fname}}</view>
					<view class="taizhangright" @click="taizhangdetail" :data-item="item">详情</view>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<!-- <view class="dibu">
			<view class="dibuleft">
				<view class="dibuliteml">上一页</view>

				<view class="dibulitemm">
					<view class="di">第</view>
					<view class="dishu">
						<input type="number">
					</view>
					<view class="ye">页</view>

				</view>
				<view class="dibulitemx ">下一页</view>
			</view>

			<view class="diburight">
				共30页
			</view>
		</view>
		 -->

		<view class="register" v-if="tizhangshow" @click="hide">
			<view class="taizhangwrap" @click.stop="hidek">
				<view class="wrapbox">
					<view class="wrapitem">
						<view class="wrapitemleft">项目类型</view>
						<picker @change="bindPickerChange" :value="index" :range="projectlist" range-key="fname">
							<view class="wrapitemright">

								<view class="uni-input projectname">{{projectname}}</view>

								<!-- <input type="text" /> -->
							</view>
						</picker>
					</view>


					<view class="wrapitem">
						<view class="wrapitemleft">主管部门</view>
						<picker @change="bindstationrChange" :value="stationindex" :range="stationlist" range-key="fname">
							<view class="wrapitemright">

								<view class="uni-input projectname">{{stationname}}</view>

								<!-- <input type="text" /> -->
							</view>
						</picker>
					</view>

					<view class="wrapitem">
						<view class="wrapitemleft">年度</view>
						<picker @change="yearchange" :value="yearindex" :range="yeararr">
							<view class="wrapitemright">



								<view class="nianduleft">
									<view class="uni-input projectname">{{yearname}}</view>
									<!-- <input type="text" /> -->
								</view>

								<view class="nianduright">
									<image src="../../static/img/number.png" mode=""></image>
								</view>

							</view>
						</picker>
					</view>
					<view class="wrapitem">
						<view class="wrapitemleft">时间</view>
						<view class="time">

							<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">


								<view class="timeleft">
									{{startdate}}
									<!-- <input   placeholder="" /> -->
									<!-- <input type="text" placeholder="" /> -->
								</view>
							</picker>
							<view class="timemiddle"></view>
							<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="endDateChange">


								<view class="timeleft">
									{{endate}}
									<!-- <input   placeholder="" /> -->
									<!-- <input type="text" placeholder="" /> -->
								</view>
							</picker>
						</view>
					</view>

				</view>

				<view class="zibot">
					<view class="reset" @click="reset">重置</view>
					<view class="chaxun" @click="search">查询</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	import app from "../../App.vue";
	export default {

		data() {

			return {
				tizhangshow: false,
				fprojectcategory: '',
				fintorg: '',
				sendyear: '',
				submitdateone: '',
				submitdatetwo: '',
				xiangmulist: [],
				projectlist: [],
				index: 0,
				// 咨询单位
				danweilist: [],
				danweiindex: 0,
				end: '',
				yeararr: [],
				yearindex: -1,
				startdate: '开始时间',
				endate: '结束时间',
				projectname: '项目类型',
				danweiname: '主管部门',
				stationname: '请选择主管部门',
				stationindex: 0,
				document: '',
				stationlist: [],
				yearname: '请选择年度',
			}
		},


		onLoad() {
			// 获取今年
			var date = new Date();
			var jinyear = date.getFullYear();
			console.log(jinyear);
			var qianyear = jinyear - 19
			for (var i = qianyear; i <= jinyear; i++) {
				this.yeararr.push(i)
			}

			// var sdate = new Date();
			// let syear = date.getFullYear();
			// let smonth = date.getMonth() + 1;
			// let sday = date.getDate();
			// let sday = date.getDate();
			// this.startdate=syear+'-'+smonth+'-'+sday;
			// this.endate=syear+'-'+smonth+'-'+sday


			//获取项目类型
			this.getprojectkind();
			// 获取咨询单位列表
			this.getzixundanwei();
			this.getzhugaunlist()


		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},



		// computed: {
		// 	startDate() {
		// 		return this.getDate('start');
		// 	},
		// 	endDate() {
		// 		return this.getDate('end');
		// 	}
		// },
		methods: {
			hide(){
				this.tizhangshow=false
			},
			hidek(){
				
			},
			// 获取主管部门列表
			getzhugaunlist() {
				let that = this;
				console.log(9988776655)
				let url = "project/Get_ComDepartment";
				// console.log('8877665544',param)
				app.post(url, '', 'get').then(r => {
					console.log(r);
					that.stationlist = r.data

				}).catch(err => {
					console.log(err)
				})
			},
			bindstationrChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.stationindex = e.target.value;
				this.stationname = this.stationlist[e.target.value].fname;
				this.document = this.stationlist[e.target.value].fid;
				console.log(this.document)

			},
			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}`;
			},
			// 筛选
			shai() {
				this.tizhangshow = !this.tizhangshow
				// 点击筛选
			},
			reset() {
				this.startdate = '开始时间';
				this.endate = '结束时间';
				this.projectname = '项目类型';
				this.danweiname = '主管部门',
					this.yearindex = -1
			},
			// 显示项目类型
			getprojectkind() {
				let url = "project/Get_ProjectType";

				app.post(url, '', 'get').then(r => {
					console.log(r)
					this.projectlist = r.data;
					console.log(this.projectlist);

					// this.xiangmulist=r.data;
					// console.log(this.xiangmulist)

				}).catch(err => {
					console.log(err)
				})
			},

			// 选择项目
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value;
				this.fprojectcategory = this.projectlist[e.target.value].fname;
				this.projectname = this.projectlist[e.target.value].fname
			},

			// 修改日期

			bindDateChange: function(e) {
				this.startdate = e.target.value;
				this.submitdateone = e.target.value;
			},

			endDateChange(e) {
				this.endate = e.target.value;
				this.submitdatetwo = e.target.value;
			},

			//获取主管部门
			getzixundanwei() {
				let that = this;
				console.log(9988776655)
				let url = "project/Get_Document";


				app.post(url, '', 'get').then(r => {
					console.log(r);
					that.danweilist = r.data;
					// that.danweilist=JSON.stringify(that.danweilist)
					console.log(that.danweilist)
					// that.ftrialnumber=r.data[0].ftrialnumber;
					// that.fconcludenumber=r.data[0].fconcludenumber;

					// console.log('1234567890',JSON.stringify(r))
					// that.rizhilist = r.data;
					// console.log(that.rizhilist)
				}).catch(err => {
					console.log(err)


				})
			},
			danweichange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.danweiindex = e.target.value;
				this.fintorg = this.danweilist[e.target.value].fname;
				this.danweiname = this.danweilist[e.target.value].fname;
			},
			// 年改变
			yearchange(e) {
				this.yearindex = e.target.value;
				this.sendyear = this.yeararr[e.target.value];
				this.yearname = this.yeararr[e.target.value];
			},

			gettiazhanglist() {
				let that = this;
				console.log(9988776543)
				let url = "project/Get_GetRptaudit";

				let param = {
					toaudit: 'document',
					fprojectcategory: that.fprojectcategory,
					document: that.fintorg,
					sendyear: that.sendyear,
					submitdateone: that.submitdateone,
					submitdatetwo: that.submitdatetwo,
					fteam: '',
					fintorg: '',
					document:that.document
				};
				console.log('8877665544', param)
				app.post(url, param, 'get').then(r => {
					console.log(r)

					// console.log('1234567890',r)
					// 	let data=JSON.stringify(r)
					// console.log(JSON.stringify(r))
					this.xiangmulist = r.data;
					let newxiangmulist = this.xiangmulist;
					let xiangmu = []
					for (var obj of newxiangmulist) {
						// console.log(obj)
						xiangmu.push(obj)
					}
					// console.log(xiangmu)
					var end = xiangmu.splice(-1);
					that.end = end;

					console.log('3783747494389', this.end)

					var len = xiangmu.length;
					len = len - 1;
					console.log(len)
					xiangmu.splice(len, 1);
					console.log(xiangmu)

					this.xiangmulist = xiangmu;
					console.log(typeof(xiangmu))

				}).catch(err => {
					console.log(err)
				})

			},

			search() {
				console.log(7766554)
				this.gettiazhanglist();
				this.tizhangshow = false
			},


			// 项目台账详情
			taizhangdetail(e) {
				console.log(e)
				let item = e.target.dataset.item;
				console.log(item)
				item = JSON.stringify(item);
				uni.navigateTo({
					url: '../zhugauntaidetail/zhugauntaidetail?item=' + item + "&type=" + 5
				})
			},


		},
		onShow() {
			// 获取台账列表
			this.gettiazhanglist()
		},
		//上拉触底事件
		onReachBottom: function() {
			console.log(999)
			// let page=this.page;
			// page++;
			// this.page=page;
			// this.get_shuban_infor()
		},





	}
</script>

<style>
	page {
		background: #F9F9F9;
	}
	.topheadk{
		position: fixed;
		top:0;
		left:0;
		background: #fff;
		width:750rpx;
	}

	.head {
		width: 750rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 32rpx 0;
		box-sizing: border-box;
		background: #fff;


	}
	.taizhang{
		margin-top:250rpx!important
	}

	.headitem {
		width: 350rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 0 40rpx;
		box-sizing: border-box;
		border-right: 1rpx solid #BDC4CE;
	}

	.headitem:last-child {
		border-right: none
	}

	.headitemtop {
		color: #06121E;
		font-size: 28rpx;

	}

	.headitembot {
		color: #0093FF;
		font-size: 32rpx;
		margin-top: 15rpx;
	}

	.taizhangbox {
		padding: 0 34rpx;
		box-sizing: border-box;
	}

	.taizhang {
		/* padding: 32rpx;
		box-sizing: border-box; */
		width: 686rpx;
		margin: 32rpx auto 0;
		background: #fff;
		box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.03);
		opacity: 1;
		border-radius: 20px;
		padding-bottom: 28rpx;
		box-sizing: border-box;
		margin-bottom: 200rpx;

	}

	.taizhanghead {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 28rpx 50rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid #eee;
	}

	.taizhangitem {
		color: #06121E;
		font-size: 28rpx;
		font-weight: bold;
	}

	.taiboxitem {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		box-sizing: border-box;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.taiboxitem:last-child {
		border-bottom: none
	}

	.taizhangleft {
		color: #06121E;
		font-size: 28rpx;
	}

	.taizhangmiddle {
		color: #06121E;
		font-size: 28rpx;
		width: 284rpx;
		margin-left: 62rpx;
		line-height: 1.3;
		text-align: center;
	}

	.taizhangright {
		color: #0093FF;
		font-size: 28rpx;
		margin-left: 56rpx;

	}

	.dibu {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		width: 750rpx;
		height: 104rpx;
		padding: 0 32rpx;
		box-sizing: border-box;
		background: #fff;
		position: fixed;
		bottom: 0;
		left: 0
	}

	.dibuleft {
		display: flex;
		align-items: center;
		margin-right: 72rpx;
	}

	.dibulitemm {
		display: flex;
		align-items: center;
	}

	.dishu {
		width: 40rpx;
		height: 30rpx;
		border: 1rpx solid #707070;
		border-radius: 4rpx;
		margin: 0 6rpx;
		font-size: 0;
		display: flex;
		align-items: center;
		justify-content: center;


	}

	.dishu input {
		width: 100%;
		height: 30rpx;
		line-height: 30rpx;
		padding: 5rpx 0;
		box-sizing: border-box;
		text-align: center;
		font-size: 26rpx;
		color: #8C9198;
		/* height:20rpx; */

	}

	.dibuliteml,
	.di,
	.ye,
	.dibulitemx,
	.diburight {
		color: #06121E;
		font-size: 28rpx;
	}

	.dibuliteml {
		margin-right: 36rpx
	}

	.dibulitemx {
		margin-left: 36rpx
	}

	/* 评审类型 */
	.wrapitem {
		display: flex;
		align-items: center;
		margin-top: 40rpx;
	}

	.wrapitemleft {
		width: 120rpx;
	}

	.wrapitemleft {
		color: #06121E;
		font-size: 28rpx
	}

	.wrapitemright {
		width: 544rpx;
		height: 76rpx;
		background: rgba(238, 238, 238, 1);
		opacity: 1;
		border-radius: 8rpx;
		margin-left: 18rpx;
		display: flex;
		align-items: center;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.wrapitemright input {
		width: 100%;
		color: #8C9198;
		font-size: 28rpx;
	}

	.nianduright {
		width: 14rpx;
		height: 22rpx;
		font-size: 0;
	}

	.nianduleft {
		width: 500rpx;

	}

	.nianduright image {
		width: 100%;
		height: 100%;
	}

	.time {
		display: flex;
		align-items: center;
		margin-left: 18rpx;
	}

	.timeleft {
		width: 232rpx;
		height: 76rpx;
		background: rgba(238, 238, 238, 1);
		opacity: 1;
		border-radius: 8rpx;
		padding: 15rpx 20rpx;
		box-sizing: border-box;
		color: #8C9198;
		font-size: 28rpx;

	}

	.timeleft input {
		width: 100%;
		color: #8C9198;
		fotn-size: 28rpx;
	}

	.timemiddle {
		width: 39rpx;
		background: rgba(189, 196, 206, 1);
		border: 1rpx solid rgba(189, 196, 206, 1);
		opacity: 1;
		margin: 0 20rpx;
	}

	.chaxun {
		width: 200rpx;
		height: 64rpx;
		background: rgba(0, 147, 255, 1);
		opacity: 1;
		border-radius: 8rpx;
		color: #F9F9F9;
		font-size: 24rpx;
		text-align: center;
		line-height: 64rpx;

	}

	.projectname {
		color: #8C9198;
		font-size: 28rpx;
	}
</style>