<template>
    <div>
            <!-- 面包屑导航 -->
            <el-breadcrumb separator-class="el-icon-arrow-right" v-if="this.$router.currentRoute.path!='/home'">
                <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>数据质量</el-breadcrumb-item>
                <el-breadcrumb-item>煤矿</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/dataQualitySystem'}">系统</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/dataQualitySubsystem'}">子系统</el-breadcrumb-item>
                <el-breadcrumb-item>设备</el-breadcrumb-item>
            </el-breadcrumb>
        <!-- 页面主体区域 -->
        <el-main>

            <el-card>
                <el-table :data="tableData" style="width: 100%" border stripe>

                    <el-table-column prop="device" label="设备" header-align="center" align="center" width="180">
                    </el-table-column>
                    <el-table-column prop="subdeviceNum" 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 label="操作" header-align="center" align="center" width="180">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="devicewatch(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="600">
                    </el-table-column>
                </el-table>

                <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>

        </el-main>
    </div>

</template>

<script>
    export default {
        name: "dataQualityDevice",
        data() {
            return {
                value: [],
                options: [{
                    value: '1',
                    label: '王家岭煤矿',
                    children: [{
                        value: '1',
                        label: '煤流运输系统',
                        children: [{
                            value: '1',
                            label: '2煤中央皮带子系统',
                        }, {
                            value: '5',
                            label: '主平硐皮带子系统'
                        }, {
                            value: '6',
                            label: '上仓皮带子系统'
                        }]
                    }, {
                        value: '2',
                        label: '安全监控系统',
                    }]
                }, {
                    value: '2',
                    label: '张家岭煤矿',
                }, {
                    value: '3',
                    label: '巴拉素煤矿',
                }, {
                    value: '4',
                    label: 'xxx煤矿'
                }],

                tableData:[],
                // tableData: [{
                //     // system: '主运输系统',
                //     device: '皮带本体',
                //     subdeviceNum:1,
                //     remark: '无'
                // }, {
                //     // system: '通风系统',
                //     device: '驱动电机',
                //     subdeviceNum:6,
                //     remark: '无'
                // }, {
                //     // system: '主排水系统',
                //     device: '皮带控制及保护',
                //     subdeviceNum:1,
                //     remark: '无'
                // }, {
                //     device: '滚筒',
                //     subdeviceNum:8,
                //     remark: '无'
                // }, {
                //     device: '破碎机',
                //     subdeviceNum: 1,
                //     remark: '无'
                // }],
                page:1,  //当前第几页
                size:10, //当前每页个数
                total:100, //全部数据行数
                checkVisible: false,

                currentSubSystemId:1,
            }
        },
        mounted(){
            this.currentSubSystemId = window.sessionStorage.getItem("dataQualitySubsystemId");
            console.log(this.currentSubSystemId);
            this.initData();
        },
        methods: {
            handleChange(value) {
                this.currentSubSystemId = value[2];
                this.initData();
            },
            // 监听 pagesize 改变的事件
            currentChange(currentPage){
                this.page=currentPage;
                this.initData();
            },
            sizeChange(currentSize) {
                this.size = currentSize;
                this.initData();
            },
            devicewatch(device) {
                window.sessionStorage.setItem("dataQualitydeviceId",device.id); //存到sessionStorage中，下一个页面获取
                this.$router.push({
                    path: '/gasdataQualitySubdevice',
                });
                console.log(device.id);
            },
            initData(){
                this.currentSubSystemId = parseInt(this.currentSubSystemId);
                this.getRequest('/dataQualityDevice/getDeviceBySubsystemId/?subsystemId=' + this.currentSubSystemId + '&page=' + this.page + '&size='+this.size).then( resp =>{
                    if (resp){
                        console.log(resp);
                        this.tableData= resp.data;
                        this.total = resp.data.size;
                    }
                })
            }
        }
    }
</script>

<style scoped>

</style>