<template>
    <div style="width: 100%">
			<div slot="header" class="clearfix">
				<el-breadcrumb separator-class="el-icon-arrow-right">
					<el-breadcrumb-item >首页</el-breadcrumb-item>
					<el-breadcrumb-item>监测任务</el-breadcrumb-item>
					<el-breadcrumb-item>专项监测</el-breadcrumb-item>
					<el-breadcrumb-item>牵头报告单位列表</el-breadcrumb-item>
				</el-breadcrumb>
			</div> 

			<div class="headSearch">
			<el-row :gutter="50" style="margin-right: 0px;">
				<el-form :inline="true">
					<!-- <el-form style="display: flex; flex-direction: row;" > -->
					<el-form-item label="年度" class="select" size="small">
						<el-date-picker v-model="queryInfo.year" style="width: 110px;" value-format="yyyy" type="year" clearable />
					</el-form-item>
					<el-form-item label="任务名称" class="select" size="small">
						<el-input v-model="queryInfo.task_name"></el-input>
					</el-form-item>
					<el-button type="success" size="small">查询</el-button>
					<el-button plain class="btns" size="medium" @click="returnTask()">
						返回
					</el-button>
				</el-form> 
			</el-row>
		</div>

            
        <!-- 表格区域 -->
		<div class="table">
			<!--  表格数据区域-->
			<el-table ref="multipleTable" 
					:data="tableData" 
					border 
					stripe 
					highlight-current-row 
					style="width: 100%"
					:row-style="rowStyle" 
					:cell-style="cellStyle" 
					@selection-change="handleSelectionChange">
				<el-table-column label="序号" width="50px">
				<template slot-scope="scope">
					{{ scope.$index+1 }}
				</template>
				</el-table-column>

				<el-table-column :key="table.label" 
							  v-for="table in tableHeader" 
							 :label="table.label" 
							 :prop="table.prop" align="center"
							 :width="table.width" 
							 :fixed="table.fixed" />
				<el-table-column label="操作" align="center" fixed="right">
				</el-table-column>
	    	</el-table>
				<!--分页器区域-->
			<div class="block">
				 <el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage4"
					:page-sizes="[10, 15, 20, ]"
					:page-size="queryInfo.pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total"
					background />
    			
			</div>
		</div>
	</div>
    
</template>

<script>
	const token = window.sessionStorage.getItem('token')
	export default {
		name: '',
		data() {
			return {
				total:0,
				queryInfo:{
					year:'',
					task_name:'',
					starttime:'',
					endtime:'',
					ispublic:'',
					pageSize:10,
					pageNum:1,
					task_class:'专项监测'
				},
                cellStyle: {
					padding: 2 + 'px'
				},
				rowStyle: {
					height: 35 + 'px'
				},
				tableHeader: [{
						label: '年份',
						prop: '',
						width: 50
						// fixed: 'left'
					},
					{
						label: '所属任务',
						prop: '',
						width:200
						// fixed: 'left'
					}, {
						label: '单位',
						prop: '',
						width: 150
						// fixed: 'left'
					},
					{
						label: '报告名称',
						prop: '',
						width: 200
					},
					{
						label: '状态',
						prop: '',
						width: 180
					}
				],
                options: [{
					value: '选项1',
					label: '测试1'
					}, {
					value: '选项2',
					label: '测试2'
					}, {
					value: '选项3',
					label: '测试3'
					}],
			// 数据表格数据
				tableData: []
            }
        },
		mounted: function() {
			this.getJgQtouList()
		},
		created: function() {
			console.log(this.$route.params.task_id)
			// this.unit_id = this.$route.params.unit_id
			this.task_id = this.$route.params.task_id
			this.getJgQtouList()
		},
		 methods: {
			  /** 监听页码的改变 */
			handleCurrentChange(newPage) {
				this.queryInfo.pageNum = newPage
				this.getJgQtouList()
			},
			/** 监听每页显示多少数据的改变 */
			handleSizeChange(newSize) {
				this.queryInfo.pageSize = newSize
				this.getJgQtouList()
			},
			
			/** 监听页码的改变 */
			handleCurrentChange(newPage) {
				this.queryInfo.pageNum = newPage
				this.getJgQtouList()
			},
			// 获取牵头单位报告列表
				async getJgQtouList() {
				const result = await this.$http.post('getJgQtouList', {
					task_id: this.task_id,
					pageSize:this.queryInfo.pageSize,
					pageNum:this.queryInfo.pageNum
				})
				console.log( result.data)
				console.log(this.queryInfo.pageSize)
				if (result.data.code == 0) {
				this.tableData = result.data.data
				}
				console.log(this.tableData)
				},
				
        	returnTask(){
            this.$router.push('routineMonitor')
        	},
      		handleSizeChange(val) {
        	console.log(`每页 ${val} 条`);
      		},
      		handleCurrentChange(val) {
        		console.log(`当前页: ${val}`);
      		}
    		},
    }
</script>

<style>
.btns{
	float:right;
	padding: 10px;
}
.table{
	padding: 10px;
}
.foottable .pager{
	float: left;
	
}
.footer {
		padding: 5px 0;
		border-top: 1px solid #e5e5e5;
		text-align: center;
		}
.headSearch{
		margin-left: 25px;
}
</style>