<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 type="selection" width="50"></el-table-column> -->
		            <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">
			<!-- 操作按钮区域的作用域插槽 -->
			<!-- <template slot-scope="scope">
					<el-button type="success" size="mini" @click="readDialogVisible1(scope.row)">抽样单详情</el-button>
			</template> -->
		</el-table-column>
	    </el-table>
            </div>
              <!-- 分页器 -->
		<div class="foottable">
			<label for="" class="pager">
				显示
				<select name="" id="">
					<option value="10">10</option>
					<option value="25">25</option>
					<option value="50">50</option>
					<option value="100">100</option>
				</select>
				项结果
			</label>
			<div class="datatable">
			   显示第 0 至 0 项结果，共 项
			</div>
		</div>
			<!-- <el-table  :data="tableData"  style="width: 100%">
      			<el-table-column
        		prop="num"
        		label="序号"
        		width="80">
      			</el-table-column>
      			<el-table-column
        		prop="year"
        		label="年份"
        		width="80">
      			</el-table-column>
      			<el-table-column
        		prop="task"
        		label="所属任务"
				width="200">
      			</el-table-column>
				  <el-table-column
        		prop="company"
        		label="单位"
				width="120">
      			</el-table-column>
				   <el-table-column
        		prop="reportname"
        		label="报告名称"
				width="200">
      			</el-table-column>
				  <el-table-column
        		prop="state"
        		label="状态"
				width="80">
      			</el-table-column>
				  <el-table-column
        		prop="operation"
        		label="操作"
				width="80">
      			</el-table-column>
    		</el-table> -->
	
	
	</div>
</template>

<script>
export default {
    data() {
      return {
           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'
        }, {
          value: '选项4',
          label: '测试4'
        }],
        value: ''
      }
    },
    methods: {
        returnTask()
        {
            this.$router.push('routineMonitor')
        }
    }
}
</script>

<style>
.btns{
    float:right;
}
.table{
    padding: 10px;
}
</style>