<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 >{{parentName}}</el-breadcrumb-item>
            <el-breadcrumb-item>查看检测单列表</el-breadcrumb-item>
            </el-breadcrumb>
		</div>
    
    <!-- 检测单表格区域 -->
        <el-table :data="tableData" border stripe highlight-current-row style="width: 100%" >
        <!-- 第一个大表格 -->
        <el-table-column :key="table.label" v-for="table in tableHeader1" :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 style="margin:5px 0" type="success" size="small" @click="getSampleList(scope.row.id)">获取样品列表</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--第一个分页器-->
            <el-pagination @size-change="handleSizeChange1" @current-change="handleCurrentChange1"
                :current-page="queryInfo.pageNum" :page-sizes="[10, 15, 20]" :page-size="queryInfo.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="total" background />
    <!-- 返回按钮 -->
            <div class="btns">
         
                <el-button plain size="medium" @click="returnJcdList()" >返回</el-button>
           
            </div>

            <!-- 查看样品列表弹框 -->
            <el-dialog title="样品列表" :visible.sync="readDialog" width="75%" :close-on-click-modal="false" class="dialogItem">
                <el-form v-if="readDialog">
                <!-- 第二个表格 -->
                <el-table :data="tableData2" border stripe highlight-current-row style="width: 100%" >
                        <el-table-column :key="table.label" v-for="table in tableHeader2" :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 style="margin:5px 0" type="success" size="small" @click="getCheckList(scope.row.jcd.id)">查看检测单详情</el-button>
                            </template>
                        </el-table-column>
                    <!-- 第二个分页器-->
                    <el-pagination @size-change="handleSizeChange2" @current-change="handleCurrentChange2"
                    :current-page="yangInfo.pageNum" :page-sizes="[1,10, 15, 20]" :page-size="yangInfo.pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="total" background />
                </el-table>
                </el-form>
            </el-dialog>
    </div>
</template>

<script>
export default{
    data(){
        return{
            //弹框显隐
            readDialog:false,
            //第一个表格
            tableData:[],
            //第二个表格z`
            tableData2:[],
            //获取检测机构的两个参数
            task_id:'', 
            task_profile_id:'', 
            //获取样品列表的抽样单id
            cyd_id:'',
            //条数
            total:0,
             // 第一个页码
            queryInfo:{
                pageSize:10,
				pageNum:1,
            },
            // 第二个页码
            yangInfo:{
                pageSize:10,
                pageNum:1
            },
            //第一个大表格
            tableHeader1: [{
                label: '抽样单编码',
                            prop: 'cyd_code',
                            width: 180,
                        },{
                            label: '单位名称',
                            prop: 'inspectedUnit.inspected_name',
                            width: 120,
                        },{
                            label: '单位地址',
                            prop: 'inspectedUnit.inspected_address',
                            width: 200,
                        },{
                            label: '单位联系人',
                            prop: 'inspectedUnit.contact_name',
                            width: 200,
                        },{
                            label: '联系人电话',
                            prop: 'inspectedUnit.contact_phone',
                            width: 200,
                        
            }],
            tableHeader2: [{
                            label: '样品名称',
                            prop: 'sample_name',
                            width: 180,
                        },{
                            label: '样品品牌',
                            prop: 'sample_brand',
                            width: 120,
                        },{
                            label: '抽样数量',
                            prop: 'sample_count',
                            width: 200,
                        },{
                            label: '抽样基数',
                            prop: 'sample_base',
                            width: 200,
                        },{
                            label: '生产日期',
                            prop: 'sample_md_date',
                            width: 200,
                        },{
                            label: '样品来源',
                            prop: 'sample_source',
                            width: 200,
                         },
                        // {
                        //     label: '备注',
                        //     prop: 'inspectedUnit.contact_phone',
                        //     width: 200,
                        // }
                        ]
        }
    },
   created() {
       this.cyd_id = this.$route.params.cyd_id
       this.task_id = this.$route.params.task_id,
       this.task_profile_id = this.$route.params.task_profile_id
       this.parentName = this.$route.params.parentName
       console.log(this.parentName)
       this.getJcds()
    //    this.getSamples()
   },
   mounted(){
    if (window.history && window.history.pushState) {
            history.pushState(null, null, document.URL); //这里有没有都无所谓，最好是有以防万一
            window.addEventListener('popstate', this.goBack, false);
            // 回退时执行goback方法
    }
   },
   methods:{
       //获取检测机构列表的接口
        async getJcds() {
             const {data: res} = await this.$http.post("getJcds", {
                pageNum: this.queryInfo.pageNum,
                pageSize: this.queryInfo.pageSize,
                task_id: this.task_id,
                task_profile_id:this.task_profile_id,
             })
             this.tableData = res.data.rows
             this.total = res.data.total
             console.log( this.tableData)
        },
       //第一个分页器
        /** 监听页码的改变 */
        handleCurrentChange1(newPage) {
            this.queryInfo.pageNum = newPage
            this.getJcds()
        },
        /** 监听每页显示多少数据的改变 */
        handleSizeChange1(newSize) {
            this.queryInfo.pageSize = newSize
            this.getJcds()
        },
        //返回按钮
        goBack(){
             this.$router.push({
                name:'getJcds',
                params:{
                    id: this.$route.params.task_id
                }
            }) 
        },


        //第二个分页器
        /** 监听页码的改变 */
        handleCurrentChange2(newPage) {
            this.yangInfo.pageNum = newPage
            this.getSamples()
        },
        /** 监听每页显示多少数据的改变 */
        handleSizeChange2(newSize) {
            this.yangInfo.pageSize = newSize
            this.getSamples()
        },
        //返回
        returnJcdList(){
            // var that = this
            this.$router.push({
                name:'getJcds',
                params:{
                    id: this.$route.params.task_id,
                    parentName:this.parentName,
                }
            })
        },
        //获取样品列表
        async getSampleList(id) {
				this.readDialog = true
				this.getSamples(id)
		},
        async getSamples(id) {
            const {data: res} = await this.$http.post("getSamples",{
                    cyd_id: id,
                    pageNum: this.yangInfo.pageNum,
                    pageSize: this.yangInfo.pageSize
                })
                this.tableData2 = res.data.rows
                console.log(res.data.rows)
        },
        //查看检测单详情
         getCheckList(id){
            this.$router.push({
                name:'readCheck',
                params:{
                   jcd_id: id,
                   task_id:this.$route.params.task_id,
                   task_profile_id:this.$route.params.task_profile_id,
                   parentName:this.parentName,
                }
            })
        },
   
    }
}
</script>
