<template>
    <div>
        <el-form ref="form" inline :model="form">
            <el-form-item label="日志类型:">
                <el-select v-model.trim="form.type" clearable multiple collapse-tags placeholder="请选择日志类型">
                    <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="筛选数据:">
                <el-input v-model="form.name" clearable placeholder="请输入筛选数据"></el-input>
            </el-form-item>
            <el-form-item style="margin-bottom: 0px">
                <Timeinterval :interval="3" ref="interval"></Timeinterval>
            </el-form-item>
            <el-form-item>
                <el-button size="small" type="primary" icon="el-icon-search">查询</el-button>
            </el-form-item>
        </el-form>

        <div class="boxS">
            <div class="boxTableS">
                <el-table
                    stripe
                    :data="tableData"
                    v-loading="loading"
                    highlight-current-row
                    border
                    :height="vh - 90"
                    header-cell-class-name="table_header"
                    @selection-change="handleSelectionChange"
                >
                    <el-table-column type="index" width="50" align="center" label="序号"></el-table-column>
                    <el-table-column
                        prop="name"
                        show-overflow-tooltip
                        align="center"
                        label="监测点名称"
                    ></el-table-column>
                    <el-table-column
                        prop="type"
                        show-overflow-tooltip
                        align="center"
                        label="日志类型"
                    ></el-table-column>
                    <el-table-column
                        prop="state"
                        show-overflow-tooltip
                        align="center"
                        label="更改人员"
                    ></el-table-column>
                    <el-table-column
                        prop="time"
                        show-overflow-tooltip
                        align="center"
                        label="更改时间"
                    ></el-table-column>

                    <el-table-column
                        prop="describe"
                        show-overflow-tooltip
                        align="center"
                        label="描述"
                    ></el-table-column>
                </el-table>
                <el-pagination
                    background
                    align="right"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[20, 30, 40, 50, 100]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="tableData.length"
                    class="mt10"
                ></el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
import Area from '@/views/components/Area/Area.vue'
import { dicData } from '@/assets/commjs/dictypeData'
import Timeinterval from '@/views/components/Timeinterval.vue'
export default {
    components: { Area, Timeinterval },
    props: {},
    data() {
        return {
            form: {
                type: [],
                orgId: '',
                monitorTags: []
            },
            pageSize: 20,
            pageNum: 1,
            typeList: [],
            multipleSelection: [],
            loading: false,
            vh: 0,
            zoom: '', //图表焦点校验

            tableData: [
                {
                    name: '35kV1#母线-333太塘线',
                    type: '设备程序升级',
                    state: '超级管理员',
                    time: '2023-2-21',
                    member: '超级管理员',
                    describe: '35kV1#母线-切换线路'
                },
                {
                    name: '110kV-161南马线',
                    type: '设备程序升级',
                    state: '超级管理员',
                    time: '2023-2-21',
                    member: '超级管理员',
                    describe: '110kV-161南马线-切换线路'
                },
                {
                    name: '110kV2#母线-162新达II线',
                    type: '设备程序升级',
                    state: '超级管理员',
                    time: '2023-2-21',
                    member: '超级管理员',
                    describe: '110kV2#母线-162新达II线-切换线路'
                }
            ]
        }
    },
    created() {},
    mounted() {
        this.form.orgId = JSON.parse(window.sessionStorage.getItem('Info')).deptId
        this.zoom = 1 / document.body.style.zoom
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.typeList = dicData('Dev_Ops', [])
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.zoom = 1 / document.body.style.zoom
            this.vh = window.sessionStorage.getItem('appheight') - 83
        },
        handleNodeClick(data) {
            this.form.orgId = data.id
        },
        handleSelectionChange(val) {
            this.multipleSelection = val
        },
        handleSizeChange() {},
        handleCurrentChange() {}
    },

    computed: {},

    watch: {}
}
</script>

<style lang="less" scoped>
@import url('../../../../styles/comStyle.less');
</style>

<style lang="scss" scoped>
.boxS {
    width: 100%;
    // display: flex !important;

    // justify-content: space-between;
}
</style>
