<template>
<div>
    <!-- 数据标准页面 -->
				<el-breadcrumb separator-class="el-icon-arrow-right">
					<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
					<el-breadcrumb-item>{{systemName}}</el-breadcrumb-item>
					<el-breadcrumb-item>数据标准</el-breadcrumb-item>
				</el-breadcrumb>
                 <el-card>
                 <el-table :data="tableData" style="width: 100%" border stripe>

                     <el-table-column prop="subSystem" label="子系统" header-align="center" align="center" width="180">
                     </el-table-column>
                     <el-table-column prop="deviceNum" label="设备个数" header-align="center" align="center" width="180">
                     </el-table-column>
                     <el-table-column prop="measurePointNum" label="测点个数" header-align="center" align="center" width="180">
                     </el-table-column>
                     <el-table-column prop="createDate" label="创建时间" header-align="center" align="center" width="180">
                     </el-table-column>
                     <el-table-column label="操作" header-align="center" align="center" width="180">
                         <template slot-scope="scope">
                             <el-button type="text" size="small" @click="subsystemwatch(scope.row)" :disabled="scope.row.measurePointNum == 0?true:false">查看</el-button>  <!-- 这里要改，当子系统个数为0时，查看按钮不可用 -->
                         </template>
                     </el-table-column>
                     <el-table-column prop="remark" label="备注" header-align="center" align="center" width="180">
                     </el-table-column>

                 </el-table>

                 <!-- 分页区域
                 <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[1, 2, 5, 10]" :page-size="1" layout="total, sizes, prev, pager, next, jumper" :total="4">
                 </el-pagination>  -->

                 <div style="display: flex;justify-content: center">
                     <el-pagination
                             background
                             @current-change="currentChange"
                             @size-change="sizeChange"
                             :current-page="page"
                             :page-size="size"
                             layout="sizes, prev, pager, next, jumper, ->, total, slot"
                             :total="total">
                     </el-pagination>
                 </div>
             </el-card>

</div>
  
</template>


<script>
    export default {
        subSystem: "dataQualitySubsystem",
        data() {
            return {
                value: [],
                systemoptions: [{
                    value: '1',
                    label: '王家岭煤矿',
                    children: [{
                        value: '1',
                        label: '煤流运输系统',
                    }, {
                        value: '2',
                        label: '通风系统',
                    }]
                }, {
                    value: '2',
                    label: '张家岭煤矿',
                }, {
                    value: '3',
                    label: '巴拉素煤矿',
                }, {
                    value: '4',
                    label: 'xxx煤矿'
                }],

                tableData:[],
                // tableData: [{
                //     // system: '主运输系统',
                //     subSystem: '2煤中央皮带子系统',
                //     createDate: '12h',
                //     deviceNum: 3,
                //     measurePointNum:3,
                //     remark: '无'
                // }, {
                //     // system: '通风系统',
                //     subSystem: '主平硐皮带子系统',
                //     createDate: '12h',
                //     deviceNum: 4,
                //     measurePointNum:3,
                //     remark: '无'
                // }, {
                //     // system: '主排水系统',
                //     subSystem: '上仓皮带子系统',
                //     createDate: '12h',
                //     deviceNum: 8,
                //     measurePointNum:3,
                //     remark: '无'
                // // }, {
                //     // system: '安全检测',
                //     // subSystem: 6,
                //     // createDate: '12h',
                //     // deviceNum: 9,
                //     // remark: '无'
                // }],
                page:1,  //当前第几页
                size:10, //当前每页个数
                total:100, //全部数据行数
                checkVisible: false,

                currentSystemId:1,
                currentSystem:"",
                currentCoal:"",
                systemName:'束管检测'

            }
        },
        mounted(){
            this.currentSystemId = window.sessionStorage.getItem("dataQualitySystemId");
            // this.currentCoalId = this.$refs['systemref'].value[0]; //将当前煤矿与id设置为下拉框第一个
            // this.currentSystemId = this.$refs['systemref'].value[1];  //这样子拿不到
            this.initData();
        },
        methods: {
            // handleChange(value) {
            //     this.currentSystemId = value[1];
            //     console.log(this.currentSystemId);
            //     // console.log(value);
            //     // let currentSystemId = value[1];
            //     // console.log(currentSystemId);

            //     let currentCoal = this.$refs['systemref'].getCheckedNodes()[0].pathLabels[0];
            //     console.log(currentCoal); //打印出所选级联label
            //     let currentSystem = this.$refs['systemref'].getCheckedNodes()[0].pathLabels[1];
            //     console.log(currentSystem); //打印出所选级联label
            //     // console.log(this.tableData);
            //     // console.log(this.currentSystemId);
            //     this.initData();
            // },
            getCoalOption(){
                this.getRequest('/dataQualitySubsystem/getAllCoal/').then(resp=>{
                    if (resp){
                        this.coaloptions = resp.data;
                    }
                });
            },
            // 监听 pagesize 改变的事件
            currentChange(currentPage){
                this.page=currentPage;
                this.initData();
            },
            sizeChange(currentSize) {
                this.size = currentSize;
                this.initData();
            },
            subsystemwatch(subsystem) {
                console.log(subsystem.id);
                window.sessionStorage.setItem("dataQualitySubsystemId",subsystem.id); //存到sessionStorage中，下一个页面获取
                this.$router.push({
                    path: '/beamdataQualityDevice',
                });
            },

            initData(){
                this.currentSystemId = parseInt(this.currentSystemId);
                this.currentCoalId = parseInt(this.currentCoalId);
                this.getRequest('/dataQualitySubsystem/getSubsystemBySystemName/?systemName=' + this.systemName +
                    '&page='+ this.page + '&size='+this.size).then( resp =>{
                    if (resp){
                        this.tableData= resp.data;
                        this.total = resp.data.size;
                    }
                })
            }
        },
    }
</script>

<style scoped>

</style>