<template>
	<div>
		<span style="font-size: 10px;">搜索：</span>
		<el-select style="width: 200px" v-model="currentSubEquipnameId" placeholder="请选择"
			@change="selectCurrentpoint()">
			<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
			</el-option>
		</el-select>
	<el-card>
		<template>

			<el-table :data="tableData" style="width: 100%" @header-click="mpQuality">
				<el-table-column prop="rowKey" label="日期" width="150">
					<template slot-scope="scope">
						{{tableData[scope.$index].rowKey}}
					</template>
				</el-table-column>
				<el-table-column prop="properties" :label="item.name" align="center"
					v-for="(item, index) in tableHeader" :key="item.mpId">

					<el-table-column label="是否存在问题" width="80">
						<template slot-scope="scope">
							{{tableData[scope.$index].Isproblem[index]}}
							<!-- {{tableData[scope.$index].properties[index].isProblem}} -->
						</template>
					</el-table-column>
					<el-table-column label="治理前" width="80">
						<template slot-scope="scope">
							{{tableData[scope.$index].before[index]}}
							<!-- {{tableData[scope.$index].properties[index].before}} -->
						</template>
					</el-table-column>
					<el-table-column label="治理后" width="80">
						<template slot-scope="scope">
							{{tableData[scope.$index].after[index]}}
							<!-- {{tableData[scope.$index].properties[index].after}} -->
						</template>
					</el-table-column>

				</el-table-column>




				<!-- <el-table-column prop="classify" label="所属分类" header-align="center" align="center" width="120">
                    </el-table-column> -->
				<!-- <el-table-column label="测点值" header-align="center" align="center" width="120">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="pointnum(scope.row)">...</el-button>
                        </template>
                    </el-table-column> -->
				<el-table-column label="更多" header-align="center" align="center" width="120">
					<template slot-scope="scope">
						<el-button type="text" size="small" @click="more(scope.row)">...</el-button>
					</template>
				</el-table-column>
			</el-table>
		</template>

		<!-- 分页区域 -->
		<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>
	</el-card>
    <detailDia v-if="detailVisible" ref="detailDialog"></detailDia>
    </div>

</template>


<script>
import detailDia from "./detailDia";
export default {
    
    name:"dataDetail_chart",
     data() {
            return {
                page:1,  //当前第几页
                size:10, //当前每页页数
                total:100, //全部数据量
                visible: false,
                // 当前下拉选框对应的hbase表名
                hbasetablename:'',
                // pointnumVisible:false,
                value: '',
                currentEquipId:0,
                options: [{
                    id: 1,
                    name: '皮带张力'
                }, {
                    id: 2,
                    name: '1#滚筒'
                }, {
                    id: 3,
                    name: '2#滚筒'
                }],
              
                tableData:[{
                    before:[1,2,3],
                    after:[4,5,6]

                }
                
                ],
            
                tableHeader: [],
  
                databaseType: '',
                database: [{
                    value: '选项1',
                    label: 'hbase'
                }, {
                    value: '选项2',
                    label: 'influxdb'
                }, {
                    value: '选项3',
                    label: 'mysql'
                }],
  
                currentPage1: 1,
                currentPage2: 2,
                currentPage3: 3,
                currentPage4: 4,
                detailVisible: false,
                moreVisible: false,
                currentSubEquipnameId:'',
                subEuipname:'',
                currentEquipname:'',
                currentEquipId:''
  
            }
        },
        components:{
             detailDia
         },

        methods: {
            // 点击表头查看测点信息
            mpQuality(column,event){
                // console.log(column);
                // console.log(event);
                if(column.level == 1 && column.property == "properties"){
                    var columnData = this.tableHeader.filter(item=>{
                        return item.measurePointName == column.label;
                    })
                    
                }
                // console.log(columnData);
                this.detailVisible = true;
                this.$nextTick(() => {
                    this.$refs.detailDialog.init(columnData);
                });

            },
           confirmEnding(str, target) {
                var start = str.length-target.length;
                var arr = str.substr(start,target.length);
                if(arr == target){
                     return true;
                }
            return false;
            },
            getMore(row){
                // console.log(row);

            },
            // 改变当前子设备选项
            selectCurrentpoint(){
                 for (let i in this.options) {
                    if (this.options[i].id == this.currentSubEquipnameId){
                        this.subEuipname = this.options[i].name;
                        this.hbasetablename = this.options[i].hbasetablename;
            //              console.log('this.hbasetablename');
            // console.log(this.options[0]);
                        break;
                    }
                }
                this.initData();
            },
            currentChange(currentPage){
                this.page=currentPage;
                this.initData();
            },
            sizeChange(currentSize) {
                this.size = currentSize;
                this.initData();
            },
            watch(id) {
                this.detailVisible = true;
                this.$nextTick(() => {
                    this.$refs.detailDialog.init(id);
                });
            },
            more(id) {
                this.moreVisible = true;
                this.$nextTick(() => {
                    this.$refs.moreDialog.init(id);
                });
            },
            // pointnum(row) {
            //     this.pointnumVisible = true;
            //     this.$nextTick(() => {
            //         this.$refs.pointnumDialog.init(row);
            //     });
            // },
  
            // 根据传来的设备currentEquipId找到对应的子设备选项
            getsubEquipOption(){
                 this.getRequest('/coalManage/getSubEquipmentInfoByEquipmentId/?equipmentId=' + this.currentEquipId).then(resp=>{
                    if (resp){
                        
                        this.options = resp.data;
                        
                        this.hbasetablename = resp.data[0].hbasetablename;
                        // console.log(this.hbasetablename);
                        
                    }
                });
            },
            // 根据子设备id拿到对应的测点，并展示在table中
              initData(){
         
                this.currentSubEquipnameId = parseInt(this.currentSubEquipnameId);
                this.getRequest('/dataQualityMeasurePoint/getMeasurePointbySubEquipmentId/?SubEquipmentId='+ this.currentSubEquipnameId + '&page=' + this.page + '&size=' + this.size).then(resp=>{
                // this.getRequest('/dataList/getMeasurepointInfoBySubEuipId/?SubEuipId=' + this.currentSubEquipnameId + '&page=' + this.page + '&size=' + this.size).then(resp=>{
                    if (resp){
                       
                        this.tableHeader = resp.data;
                     
                        // console.log('this.tableHeader');
                        // console.log(this.tableHeader);
                        this.total = resp.data.size;
                    }
                });
             
                 this.getRequest('/hbase/getMpInfoByHbaseTablename/?hbasetablename='+ this.hbasetablename).then(resp=>{
                       console.log("----------");
                       console.log(this.hbasetablename);
                // this.getRequest('/dataList/getMeasurepointInfoBySubEuipId/?SubEuipId=' + this.currentSubEquipnameId + '&page=' + this.page + '&size=' + this.size).then(resp=>{
                    if (resp){
                         console.log('resp.data');
                        console.log(resp.data);
                        var arr = [];
                        for (var i=0;i<resp.data.length;i++){
                            var o={
                                before: [],
                                after: [],
                                Isproblem:[]
                            };
                            
                            o["rowKey"] = resp.data[i].rowKey;
                            var pronumn = Object.keys(resp.data[0].properties).length;
                            // for(var j = 0;j<pronumn/2;j++){
                                for(var j = 0;j<this.tableHeader.length;j++){

                                for (var key in resp.data[i].properties){
                                        
                                        if(this.confirmEnding(key,"before") && (key.indexOf(this.tableHeader[j].name) == 0) ){     

                                            // o.before.push(resp.data[i].properties[key]);
                                            // j是索引，1是个数
                                            o.before.splice(j,1,resp.data[i].properties[key]);
                                         
                                        } 
                                        if(this.confirmEnding(key,"after") &&  (key.indexOf(this.tableHeader[j].name) == 0) ){    
                                            o.after.splice(j,1,resp.data[i].properties[key]);
                                            // o.after.push(resp.data[i].properties[key]);
                                        } 
                            }
                            }
                            for(var k = 0;k<this.tableHeader.length;k++){
                            o.Isproblem.push(o.before[k]==o.after[k]?"否":"是")
                        }  
                            arr.push(o);
                         
                        }
                        // console.log("arr");
                        // console.log(arr);
                        this.tableData=arr;
                    }   
                    // console.log('this.tableData');
                    // console.log(this.tableData);  
                });       

            },
  
        },
         mounted(){
            this.currentEquipId = window.sessionStorage.getItem("dataList_currentEquipId");
            // 获取子设备选项
               this.getsubEquipOption();
            this.currentSubEquipname = this.options[0].name; //将当前子系统与id设置为下拉框第一个
            this.currentSubEquipnameId = this.options[0].id;
     
            this.timer =  setInterval(()=> {
                // setTimeout(this.initData, 0);
                this.initData()
                // if (this.$router.currentRoute.path != "/operationCenter") {
                //   clearInterval(interval)
                // }
              }, 2000)
       
            
         },
            destroyed() {
                clearInterval(this.timer)
            console.log("here++++++++++++++++++++")
            },
         


}
</script>

<style scoped>

</style>>
