<template>
	<div>
		<!--标签-->
		<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
			<el-tab-pane label="系统数据" name="first">
				<!-- 系统数据页面 -->
				<el-breadcrumb separator-class="el-icon-arrow-right">
					<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
					<el-breadcrumb-item>瓦斯抽放设备</el-breadcrumb-item>
					<el-breadcrumb-item>系统数据</el-breadcrumb-item>
				</el-breadcrumb>

                <!-- <span style="font-size: 10px;">搜索：</span> -->
        <el-select v-model="currentSubSystemId" placeholder="请选择" @change="selectSubsystem()">
            <el-option v-for="item in options" :key="item.id" :label="item.subSystem" :value="item.id">
            </el-option>
        </el-select>

        <el-card>
            <el-table :data="tableData" style="width: 100%" border stripe>
                <el-table-column type="index" label="#" header-align="center" align="center" width="60">
                </el-table-column>
                <el-table-column prop="name" label="设备名称" header-align="center" align="center" width="150">
                </el-table-column>
                <el-table-column prop="remark" label="描述" header-align="center" align="center" width="500">
                </el-table-column>
                <el-table-column label="操作" header-align="center" align="center" width="150">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="watch(scope.row)">查看</el-button>
                    </template>
                </el-table-column>

            </el-table>

            <!-- 分页区域 -->
            <div style="display: flex;justify-content: flex-end">
                <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-tab-pane>
			<el-tab-pane label="数据标准" name="second">
                 <dataStandard></dataStandard>
			</el-tab-pane>
		</el-tabs>
	
	</div>

</template>

<script>
import dataStandard from "./dataStandard";
    export default {
        name: "checkSystem",
        data() {
            return {
                visible: false,
                options: [{
                    id: 1,
                    subSystem: '煤中央皮带'
                }, {
                    id: 2,
                    subSystem: '主平硐皮带'
                }, {
                    id: 3,
                    subSystem: '上仓皮带'
                }],
                tableData: [{
                    name: '皮带本体',
                    remark: 'YB2-5002-4型，功率900kW，U=6kV,I=105.1A，功率因数0.86',
                }, {
                    name: '头部1#驱动电机',
                    remark: 'YB2-5002-4型，功率900kW，U=6kV,I=105.1A，功率因数0.86',
                }, {
                    name: '头部2#驱动电机',
                    remark: 'YB2-5002-4型，功率900kW，U=6kV,I=105.1A，功率因数0.86',
                }, {
                    name: '头部3#驱动电机',
                    remark: 'YB2-5002-4型，功率900kW，U=6kV,I=105.1A，功率因数0.86',
                }, {
                    name: '头部4#驱动电机',
                    remark: 'YB2-5002-4型，功率900kW，U=6kV,I=105.1A，功率因数0.86',
                }],
                page:1,  //当前第几页
                size:10, //当前每页页数
                total:100, //全部数据量
                currentSystemId:0,
                currentSubSystemId:0,
                currentsubSystem:'',
                // 被激活页签的名称
				activeName: "first",
                systemName: '瓦斯抽放系统',
            }
        },
        mounted(){
            this.getSubsystemOption();
            // this.currentsubSystem = this.options[0].subSystem;
            // this.currentSubSystemId = this.options[0].id;//将当前煤矿与id设置为下拉框第一个
            // this.initData();
           
                
            // this.getSubsystemOption();
            // this.currentsubSystem = this.options[0].subSystem;
            // this.currentSubSystemId = this.options[0].id;//将当前煤矿与id设置为下拉框第一个
            
        },
        methods: {
            selectSubsystem(){
                for (let i in this.options) {
                    if (this.options[i].id == this.currentSubSystemId){
                        this.currentsubSystem = this.options[i].subSystem;
                        break;
                    }
                }
                this.initData();
            },
            getSubsystemOption(){
               
                 this.getRequest('dataList/getSubsystemOptionBySystemName/?systemName=' + this.systemName).then(resp=>{
                    if (resp){
                        console.log(resp.data);
                        this.options = resp.data;
                    }
                  });
               
                // this.getRequest('/dataList/getSubsystemOptionBySystemId/?systemId=' + 7).then(resp=>{
                // if (resp){
                //     console.log(resp.data);
                //     // this.options = resp.data;
                // }
                // });
                
                // this.getRequest('/coalManage/getSystemIdByName/?systemName=' + this.systemName)
                // .then(resp=>{
                //     if (resp){
                //         console.log("resp.data");
                //         console.log(resp.data);
                    // this.currentSystemId = resp.data;
                //        
                //     }
                // });
               
            },
            initData(){
               this.currentSystemId = parseInt(this.currentSystemId);
                this.getRequest('/dataList/getEquipmentBySubsystemId/?subsystemId=' + this.currentSubSystemId + '&page=' + this.page + '&size=' + this.size).then(resp=>{
                    if (resp){
                        this.tableData = resp.data;
                        this.total = resp.data.size;
                    }
                });
               
               
            },
            // 监听 pagesize 改变的事件
            currentChange(currentPage){
                this.page=currentPage;
                this.initData();
            },
            sizeChange(currentSize) {
                this.size = currentSize;
                this.initData();
            },
            // init(id) {
            //     this.visible = true;
            // }
            watch(equip) {
                window.sessionStorage.setItem("dataList_currentEquipId",equip.id); //存到sessionStorage中，下一个页面获取
                this.$router.push({
                    path: '/dataDetail'
                })
            },
             handleClick(tab, event) {
          console.log(tab, event);
        }

        },
         components: {
            dataStandard
          
    }
    }
</script>


            // watchSubDevice(row) {
            //     this.$router.push({
            //         path: '/gasSubDeviceList'
            //     })
            //     window.sessionStorage.setItem("device_id", row.id); //存到sessionStorage中，下一个页面获取
            // }
 


<style scoped>

</style>