<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 :to="{ path: '/dataQualityDevice'}">设备</el-breadcrumb-item>
            <el-breadcrumb-item>子设备</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 页面主体区域 -->
        <el-main>
            <!--<el-select v-model="value" placeholder="请选择煤矿">-->
                <!--<el-option v-for="item in coaloptions" :key="item.value" :label="item.label" :value="item.value">-->
                <!--</el-option>-->
            <!--</el-select>-->
            <!--<el-select v-model="value" placeholder="请选择系统">-->
                <!--<el-option v-for="item in systemoptions" :key="item.value" :label="item.label" :value="item.value">-->
                <!--</el-option>-->
            <!--</el-select>-->
            <!--<el-select v-model="value" placeholder="请选择子系统">-->
                <!--<el-option v-for="item in subsystemoptions" :key="item.value" :label="item.label" :value="item.value">-->
                <!--</el-option>-->
            <!--</el-select>-->
            <!--<el-select v-model="value" placeholder="请选择设备">-->
                <!--<el-option v-for="item in deviceoptions" :key="item.value" :label="item.label" :value="item.value">-->
                <!--</el-option>-->
            <!--</el-select>-->
            <!-- <div class="block">
                <span class="demonstration" style="font-size: 10px;">搜索：</span>
                <el-cascader
                        v-model="value"
                        :options="options"
                        :props="{ expandTrigger: 'hover'}"
                        style="width: 40%;"
                        separator=" | "
                        placeholder="王家岭煤矿 | 煤流运输系统 | 2煤中央皮带子系统 | 头部1#驱动电机"
                        @change="handleChange">
                    <template slot-scope="{ node, data }">
                        <span>{{ data.label }}</span>
                        <span v-if="!node.isLeaf">({{ data.children.length }})</span>
                    </template>
                </el-cascader>
            </div> -->

            <br/>

            <el-card>

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

                    <!--<el-table-column prop="system" label="系统" header-align="center" align="center" width="180" >-->
                    <!--</el-table-column>-->
                    <!--<el-table-column prop="subSystem" label="子系统" header-align="center" align="center" width="180">-->
                    <!--</el-table-column>-->
                    <el-table-column prop="subdevice" 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="subdevicewatch(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>

            <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: "dataQualitySubdevice",
        data() {
            return {
                value: [],
                options: [{
                    value: '1',
                    label: '王家岭煤矿',
                    children: [{
                        value: '1',
                        label: '煤流运输系统',
                        children: [{
                            value: '1',
                            label: '2煤中央皮带子系统',
                            children: [{
                                value: '1',
                                label: '皮带本体',
                            }, {
                                value: '2',
                                label: '头部1#驱动电机',
                            }]
                        }, {
                            value: '2',
                            label: '主平硐皮带子系统'
                        }, {
                            value: '3',
                            label: '上仓皮带子系统'
                        }]
                    }, {
                        value: '2',
                        label: '安全监控系统',
                    }]
                }, {
                    value: '2',
                    label: '张家岭煤矿',
                }, {
                    value: '3',
                    label: '巴拉素煤矿',
                }, {
                    value: '4',
                    label: 'xxx煤矿'
                }],

                tableData:[],
                // tableData: [{
                //     subdevice: '电机本体',
                //     createDate: '12h',
                //     measurePointNum:7,
                //     remark: '无'
                // }],
                page:1,  //当前第几页
                size:10, //当前每页个数
                total:100, //全部数据行数
                checkVisible: false,
                currentdeviceId: 1,

            }
        },
        mounted(){
            this.currentdeviceId = window.sessionStorage.getItem("dataQualitydeviceId");
            console.log(this.currentdeviceId);
            this.initData();
        },
        methods: {
            // 级联表的方法
            handleChange(value) {
                this.currentdeviceId = value[3];
                console.log(this.currentdeviceId);
            },
            // 监听 pagesize 改变的事件
            currentChange(currentPage){
                this.page=currentPage;
                this.initData();
            },
            sizeChange(currentSize) {
                this.size = currentSize;
                this.initData();
            },
            subdevicewatch(subdevice) {
                window.sessionStorage.setItem("dataQualitysubdeviceId",subdevice.id); //存到sessionStorage中，下一个页面获取
                this.$router.push({
                    path: '/powerdataQualityMeasurePoint',
                });
            },
            initData(){
                this.currentdeviceId = parseInt(this.currentdeviceId);
                console.log(this.currentdeviceId);
                this.getRequest('/dataQualitySubdevice/getsubEquipmentbyEquipmentId/?EquipmentId=' + this.currentdeviceId +
                    '&page=' + this.page + '&size='+this.size).then( resp =>{
                    if (resp){
                        this.tableData= resp.data;
                        this.total = resp.data.size;
                    }
                })
            }
        }
    }
</script>

<style>
.el-pagination{
    text-align: center;
}
</style>