<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>
				<!-- 下拉菜单 -->
                <el-select v-model="value" placeholder="请选择">
                	<el-option
                    	v-for="item in options"
                    	:key="item.value"
                    	:label="item.label"
                    	:value="item.value">
                	</el-option>
                </el-select>
                <!-- 返回按钮 -->
                <el-button class="btns" type="info" size="small" @click="returnTask">
					返回任务列表
				</el-button>
            </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, 25, 50, 100]"
					:page-size="50"
					layout="total, sizes, prev, pager, next, jumper"
					:total="100">
    			</el-pagination>
			</div>
		</div>
	</div>
    
</template>

<script>
	const token = window.sessionStorage.getItem('token')
	export default {
		name: '',
		data() {
			return {
				currentPage1: 5,
        		currentPage2: 5,
        		currentPage3: 5,
        		currentPage4: 4,
                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: []
            }
        },
		 methods: {
        	returnTask(){
            this.$router.push('routineMonitor')
        	},
      		handleSizeChange(val) {
        	console.log(`每页 ${val} 条`);
      		},
      		handleCurrentChange(val) {
        		console.log(`当前页: ${val}`);
      		}
    		},
    }
</script>

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