<template>
    <div class="Inspection">
        <el-row>
            <el-col :span="24">
                <el-form :inline="true" :model="form" class="demo-form-inline">
                    <el-form-item label="监测点:">
                        <el-input v-model.trim="form.a" placeholder="请输入" clearable></el-input>
                    </el-form-item>

                    <el-form-item>
                        <Area @click="handleNodeClick" ref="area" class="box"></Area>
                    </el-form-item>

                    <el-form-item>
                        <Timeinterval :interval="3" ref="interval"></Timeinterval>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="onSubmit" class="ml10" icon="el-icon-search">查询</el-button>
                        <!-- <el-button type="primary" icon="el-icon-download">导出</el-button> -->
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col class="left" :style="'height:' + vh + ';'" :span="5"><Tree ref="tree" /></el-col>
            <el-col :span="19">
                <el-tabs v-model.trim="form.activeName" @tab-click="handleClick" type="border-card">
                    <el-tab-pane label="非谐波" name="1" v-loading="loading"><Tab :list="list" /></el-tab-pane>
                    <el-tab-pane label="谐波电压" name="2" v-loading="loading"><Tab :list="list" /></el-tab-pane>
                    <el-tab-pane label="谐波电流" name="3" v-loading="loading"><Tab :list="list" /></el-tab-pane>
                    <el-tab-pane label="合格率" name="4" v-loading="loading"><Tab :list="list" /></el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import Tree from './tree.vue'
import Tab from './tab.vue'
import { MonitoringPoint } from '@/api/MonitoringPoint.js'
import Area from '@/views/components/Area/Area.vue'
import Timeinterval from '../../../../components/Timeinterval.vue'
// import { dictypeData } from "@/api/user";
export default {
    components: { Tree, Tab, Area, Timeinterval },
    props: {},
    name: 'InspectionPoint',
    data() {
        return {
            vh: undefined,
            list: [],
            loading: true,
            form: {
                monitor: '', // 所属单位
                company: '', //监测点
                time: '', // 统计日期
                id: '', //树选中的id
                activeName: '1' //区分是那个节点
            },
            //所属单位数据数据

            CompanyList: []
        }
    },
    created() {
        // this.dictionaries()
    },

    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.onSubmit()
    },

    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.device = window.devicePixelRatio
            this.vh = window.sessionStorage.getItem('appheight') - 195 + 'px'
        },

        handleClick(tab, event) {
            this.onSubmit()
        },
        // 字典表
        // dictionaries() {
        //   dictypeData().then(res => {
        //     res.data.forEach(item => {
        //       if (item.name == "单位") {
        //         this.CompanyList = item.children;
        //       }
        //     });
        //   });
        // },
        // 切换选项
        handleNodeClick(data) {
            // console.log(data);
        },
        // 表格查询
        onSubmit() {
            this.loading = true
            this.form.id = this.$refs['tree'].id
            MonitoringPoint(this.form).then(res => {
                this.list = res.data
                this.loading = false
            })
        }
    },

    computed: {
        vhs() {
            return this.vh - 800
        }
    },

    watch: {}
}
</script>
<style lang="less" scoped>
.Inspection {
    .left {
        padding: 10px 0;
        overflow-y: auto;
        border: 1px solid #000;
    }
}
// ::v-deep .el-form-item {
//   margin-bottom: 0;
//   }
</style>
