<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 plain class="btns" size="medium" @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="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>
			<!-- <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 {
		   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'
        }, {
          value: '选项4',
          label: '测试4'
        }],
        value: ''
      }
    },
		mounted: function() {
			this.getJgCdList()
		},
		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.getJgCdList()
		},
    methods: {
		/** 监听每页显示多少数据的改变 */
			handleSizeChange(newSize) {
				this.queryInfo.pageSize = newSize
				this.gettaskList()
			},
			
			/** 监听页码的改变 */
			handleCurrentChange(newPage) {
				this.queryInfo.pageNum = newPage
				this.gettaskList()
			},
			// 获取承担单位报告列表
				async getJgCdList(id) {
				const result = await this.$http.post('getJgCdList', {
					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.rows
				}
				console.log(this.tableData)
				},
        returnTask()
        {
            this.$router.push('specialMonitor')
        }
    }
}
</script>

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