<template>
	<div>
		<!-- 审核页面 -->
		<!-- <u-table style="margin-top: 10px;" v-if="show==0">
			<u-tr>
				<u-th>审批名称</u-th>
				<u-th>审批状态</u-th>
				<u-th>操作</u-th>
			</u-tr>
			<u-tr v-for="(iteam,index) in dataList" :key="index">
				<u-td>{{iteam.tittle}}</u-td>
				<u-td style="color: #2979FF;">
					{{iteam.condition}}
				</u-td>
				
				<u-td>
					<view class="" @click="toXiang(iteam)">
						查看详情
					</view>
				</u-td>
			</u-tr>
			
		</u-table> -->
		<view class="" style="padding: 10px;background-color: rgb(245,246,248);">
			<u-search bg-color='#fff' :show-action='false' input-align='center' shape="shape" style="margin-top: 5px;" placeholder="输入指标名称" v-model="keyword" @search="zhibiao" @custom="zhibiao"></u-search>
		</view>
		
		<u-grid :col="4" :border="true">
				<u-grid-item @click="openBumen" style="height: 35px;">
					<text class="grid-text">部门<u-icon name="arrow-down"></u-icon></text>
				</u-grid-item>
				<u-grid-item @click="openShi"  style="height: 35px;">
					<picker fields="month" mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<text class="grid-text">时间<u-icon name="arrow-down"></u-icon></text>
						<!-- <view>时间</view> -->
					</picker>
					
						<!-- <u-col span="8">
							<u-icon name="arrow-down"></u-icon>
						</u-col> -->
					<!-- <view class="grid-text">时间</view> -->
				</u-grid-item>
				<u-grid-item @click="openStace" style="height: 35px;">
					<text class="grid-text">状态<u-icon name="arrow-down"></u-icon></text>
				</u-grid-item>
				<u-grid-item @click="openShenStace" style="height: 35px;">
					<text class="grid-text">审批<u-icon name="arrow-down"></u-icon></text>
				</u-grid-item>
			</u-grid>
		<!-- <u-dropdown  @open='openPick'>
			<u-dropdown-item v-model="value1" title="状态" :options="options1" @change='seleStace'></u-dropdown-item>
			<u-dropdown-item title="时间">
				<view class="slot-content">
					
				</view>
			</u-dropdown-item>
		</u-dropdown> -->
		<!-- <picker fields="month" mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange" v-model="pickertimeShow">
			<view>{{ date }}</view>
		</picker> -->
		<!-- <u-picker mode="time" :defaultTime="defaultTime" v-model="pickerShow" :params="params" end-year="2030" @confirm="confirm"></u-picker> -->
		<el-card  shadow="never" class="box-card" v-for="(iteam,index) in dataList" @click.native="toXiang(iteam)" :body-style="{ padding: '10px' }" :key="index">
		 
		  <el-descriptions :column="1">
			  <template slot="title" style="margin-bottom: 5px !important">
				{{iteam.tittle}}
			   <el-tag style="margin-left: 10px;" size="mini" effect="plain" v-if="iteam.result=='审批通过'">{{iteam.result}}</el-tag>
			   <el-tag style="margin-left: 10px;" size="mini" effect="plain" v-else-if="iteam.result=='审批中'" type="success">{{iteam.result}}</el-tag>
			   <el-tag style="margin-left: 10px;" size="mini" effect="plain" v-else-if="iteam.result=='驳回'" type="danger">{{iteam.result}}</el-tag>
			   <el-tag style="margin-left: 10px;" size="mini" effect="plain" v-else>{{iteam.result}}</el-tag>
			  </template>
			  <template slot="extra">
			   {{iteam.monthdays}}
			  </template>
		      <!-- <el-descriptions-item label="被考核部门">
				  <view class="" v-for="(item,index1) in iteam.executivedepartment" :key="index1">
					  {{item}}
				  </view>
			  </el-descriptions-item> -->
			  <el-descriptions-item label="统计周期" style="margin-top:-15px !important" labelStyle="margin-top:-15px !important" contentStyle="margin-top:-15px !important">
				  <view class="" v-if="iteam.cycle==1" >
				  	{{iteam.year}}年
				  </view>
				  <view class="" v-if="iteam.cycle==5">
				  	{{iteam.year}}年-{{iteam.quarter}}季度
				  </view>
				  <view class="" v-if="iteam.cycle==4">
				  	{{iteam.year}}年-{{iteam.month}}月
				  </view>
				  <view class="" v-if="iteam.cycle==6">
				  	{{iteam.year}}年
				  </view>
				  <view class="" v-if="iteam.cycle==0">
				  	{{iteam.year}}年{{iteam.month}}月
				  </view>
			  </el-descriptions-item>
			  <el-descriptions-item label="当前节点">{{iteam.node}}</el-descriptions-item>
		  </el-descriptions>
		</el-card>
		<u-loadmore :status="bottonSta" :icon-type="iconType" :load-text="loadText" />
		<!-- <u-picker mode="selector" :default-selector="[0]" v-model="show" @confirm="confirm" :range="range" :range-key="label"></u-picker> -->
		<u-picker mode="selector" v-model="show"  :default-selector="[0]" :range="selectorObj" range-key="cateName" @confirm='confirm'></u-picker>
		<u-picker mode="selector" v-model="shenShow"  :default-selector="[0]" :range="shenSelectorObj" range-key="cateName" @confirm='confirmShen'></u-picker>
		<!-- <u-popup height="50%" mode="bottom" v-model="bumenShow">
			<el-cascader filterable clearable :options="departmentList" :show-all-levels="false" :props="props1"></el-cascader>
		</u-popup> -->
		<el-dialog :close-on-click-modal="false" width="100%" :visible.sync="bumenShow">
		  <el-cascader-panel placeholder="请选择部门" filterable clearable :options="departmentList" :show-all-levels="false" :props="props1" @change='clickBu'></el-cascader-panel>
		</el-dialog>
	</div>
</template>

<script>
	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 - 10;
		} else if (type === 'end') {
			year = year + 10;
		}
		month = month > 9 ? month : '0' + month;
		day = day > 9 ? day : '0' + day;
	 
		return `${year}-${month}-${day}`;
	}
	export default {
		
		data() {
		    return {
				bottonSta:'loading',
				showData:{},
				shenShow:false,
				keyword:'',
				// 部门列表
				      departmentList:[],
				props1: {
				        checkStrictly: true,
				        value: "id",
				        label: "name",
				        children: "children",
				        emitPath:false,
				      },
				bumenShow:false,
				// range: ['一', '片', '冰', '心', '在', '玉', '壶'],
				pickertimeShow:false,
				date: getDate({
								format: true
							}),
							startDate: getDate('start'),
							endDate: getDate('end'),
				value1:'',
				selectorObj: [{
								cateName: '全部',
								id: 0,
							},{
								cateName: '起草',
								id: 1,
							},
							{
								cateName: '审批中',
								id: 2,
							},
							{
								cateName: '通过',
								id: 3,
							},
							{
								cateName: '驳回',
								id: 3,
							},
							
						],
				shenSelectorObj: [{
								cateName: '全部',
								id: 0,
							},{
								cateName: '已处理',
								id: 1,
							},{
								cateName: '未处理',
								id: 2,
							},
							
							
						],
				searchInfo: {
						state:0,
				        page: 1,
				        pagesize: 10
				      },
				show:false,
				liangDataList:[],
				dataList:[]
		    }
			
		},
		onShow() {
			this.searchInfo= {
						state:0,
				        page: 1,
				        pagesize: 10
				      }
		    this.getData()
		    this.getGrouplist()
		},
		onLoad(){
			
			// if (this.$store.state.isLogin==false) {
			// 	window.location.href = 'https://www.hxgk.group/jumpapiurl/?url=http://new.hxgk.group/sj/index';
			// }
		},
		onReachBottom(){
			this.searchInfo.pagesize=this.searchInfo.pagesize+10,
			
			this.getData()
			
			console.log("我已经滚动到底部了")
		},
		methods: {
			zhibiao(val){
				console.log(val)
				this.searchInfo.title=this.keyword
				this.getData()
			},
			
			clickBu(val){
				console.log(val)
				this.searchInfo.department = val.toString();
				this.getData()
			},
			// 获取部门
			getGrouplist(){
			   const departmentFrom={
				id:309
			}
			this.$u.api.Duty.departmentlist(departmentFrom).then(res => {
				// alert(JSON.stringify(res))
				
				if(res.code==0){
					this.departmentList=res.data
					console.log(this.departmentList)
				}
					
			})
			
			
		
			},
			openBumen(){
				this.bumenShow=true
			},
			confirm(val){
				const index = val[0]
				console.log(val[0])
				this.searchInfo.state=this.selectorObj[index].id
				this.getData()
				
			},
			confirmShen(val){
				const index = val[0]
				console.log("index")
				console.log(val[0])
				console.log(val[0]==0)
				if(val[0]==0){
					console.log("searchInfoTrue")
					this.searchInfo= {
								state:0,
						        page: 1,
						        pagesize: 10
						      }
							  
				}else{
					this.searchInfo.isset=this.shenSelectorObj[index].id
					
				}
				this.getData()
			},
			openStace(){
				console.log("696")
				this.show=true;
			},
			openShenStace(){
				console.log("696")
				this.shenShow=true;
			},
			openShi(){
				console.log("696")
				this.pickertimeShow=true;
				console.log(this.pickertimeShow)
			},
			bindDateChange: function(e) {
						this.searchInfo.time = e.detail.value;
						this.getData()
						console.log(e.detail.value)
					},
			seleStace(val){
				this.searchInfo.state=val
				this.getData()
			},
			getData(){
				this.bottonSta='loading'
				// if(this.bottonSta=='loading'){
				// 	this.$u.api.Duty.seeflowlog(this.searchInfo).then(res => {
				// 		// alert(JSON.stringify(res))
				// 		if(res.code==0){
				// 			this.dataList=res.data.list
				// 			if (res.data.count<res.data.pageSize) {
				// 				this.bottonSta='nomore'
				// 			}
				// 		}
							
				// 		})
				// }
				this.$u.api.Duty.seeflowlog(this.searchInfo).then(res => {
					// alert(JSON.stringify(res))
					if(res.code==0){
						this.dataList=res.data.list
						if (res.data.count<res.data.pageSize) {
							this.bottonSta='nomore'
						}
					}
						
					})
				
			},
			thumbChange(index) {
				this.show=index
			},
			toXiang(iteam){
				
				if(iteam.class==1){
					// 定性
					this.$u.route('/pages/approval/dingxing', iteam);
					
				}
				if(iteam.class==2){
					// 定性
					this.$u.route('/pages/approval/dingliang', iteam);
				}
				
			},
			toZhi(iteam){
				this.$u.route('/pages/task/details', iteam);
			},
		}
	}
</script>

<style  lang="scss" scoped>
::v-deep.el-descriptions__title{
	margin-bottom: -15px !important;
}
::v-deep.el-descriptions__header{
	margin-bottom: 0px !important;
}
::v-deep.el-descriptions__body .el-descriptions__table{
	margin-top: -15px !important;
}
::v-deep.el-descriptions :not(.is-bordered) .el-descriptions-item__cell{
	padding-bottom: 0px;
	margin-top: -15px;
}
</style>
