<template>
    <div>
        <el-form ref="form" inline :model="form">
            <el-form-item label="日志类型:">
                <el-select v-model.trim="form.type" clearable 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.searchValue" clearable placeholder="请输入筛选数据"></el-input>
            </el-form-item>
            <el-form-item>
                <Timeinterval :interval="3" ref="Timeinterval"></Timeinterval>
            </el-form-item>
            <el-form-item>
                <el-button size="small" type="primary" icon="el-icon-search" @click="onSubmit">查询</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="70" align="center" label="序号">
                        <template scope="scope">
                            <span>{{ (form.pageNum - 1) * form.pageSize + scope.$index + 1 }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column
                        prop="type"
                        show-overflow-tooltip
                        align="center"
                        label="日志类型"
                        min-width="100px"
                    >
                        <template slot-scope="scope">
                            {{
                                scope.row.type == 0
                                    ? '电站 '
                                    : scope.row.type == 1
                                    ? '装置'
                                    : scope.row.type == 2
                                    ? '线路'
                                    : scope.row.type == 3
                                    ? '台区'
                                    : scope.row.type == 4
                                    ? '发电用户'
                                    : scope.row.type == 5
                                    ? '用电用户'
                                    : scope.row.type == 6
                                    ? '主网监测点'
                                    : scope.row.type == 7
                                    ? '配网监测点'
                                    : ''
                            }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="operatorDescribe"
                        show-overflow-tooltip
                        align="center"
                        label="描述"
                        min-width="240px"
                    ></el-table-column>

                    <el-table-column
                        prop="createTime"
                        show-overflow-tooltip
                        align="center"
                        label="操作时间"
                        min-width="100px"
                    ></el-table-column>
                    <el-table-column
                        prop="createBy"
                        show-overflow-tooltip
                        align="center"
                        label="操作人员"
                        min-width="100px"
                    ></el-table-column>
                </el-table>
                <el-pagination
                    background
                    align="right"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="form.pageNum"
                    :page-sizes="[20, 30, 40, 50, 100]"
                    :page-size="form.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    class="mt10"
                ></el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
import { terminalLog } from '@/api/Accountreview/index.js'
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: {
                searchValue: '',
                type: '',
                pageSize: 20,
                pageNum: 1,
                searchBeginTime: '',
                searchEndTime: ''
            },
            total: 0,
            typeList: [
                {
                    id: 0,
                    name: '电站'
                },
                {
                    id: 1,
                    name: '装置'
                },
                {
                    id: 2,
                    name: '线路'
                },
                {
                    id: 3,
                    name: '台区'
                },
                {
                    id: 4,
                    name: '发电用户'
                },
                {
                    id: 5,
                    name: '用电用户'
                },
                {
                    id: 6,
                    name: '主网监测点'
                },
                {
                    id: 7,
                    name: '配网监测点'
                }
            ],
            multipleSelection: [],
            loading: false,
            vh: 0,
            zoom: '', //图表焦点校验

            tableData: []
        }
    },
    created() {},
    mounted() {
        this.zoom = 1 / document.body.style.zoom

        this.setHeight()
        window.addEventListener('resize', this.setHeight)

        this.onSubmit()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.zoom = 1 / document.body.style.zoom
            this.vh = window.sessionStorage.getItem('appheight') - 83
        },
        onSubmit() {
            this.form.searchBeginTime = this.$refs.Timeinterval.timeValue[0]
            this.form.searchEndTime = this.$refs.Timeinterval.timeValue[1]
            terminalLog(this.form).then(res => {
                this.tableData = res.data.records
                this.total = res.data.total
            })
        },

        handleSelectionChange(val) {
            this.multipleSelection = val
        },
        handleSizeChange(e) {
            this.form.pageSize = e
            this.onSubmit()
        },
        handleCurrentChange(e) {
            this.form.pageNum = e
            this.onSubmit()
        }
    },

    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>
