<template>
    <div>
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
                <Timeinterval ref="interval" :interval="4"></Timeinterval>
            </el-form-item>
            <el-form-item label="用户类型:">
                <el-select v-model="value" placeholder="请选择">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
        <div>
            <el-button type="primary" icon="el-icon-plus" @click="added">新增用户</el-button>
            <el-button type="primary" icon="el-icon-delete">删除用户</el-button>
        </div>
        <el-table
            stripe
            :data="dataList.slice((form.pageNum - 1) * form.pageSize, form.pageNum * form.pageSize)"
            :height="height"
            border
            style="width: 100%"
            header-cell-class-name="table_header"
            highlight-current-row
            @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="62"></el-table-column>
            <!-- <el-table-column prop="number" label="序号" width="80">
                <template scope="scope">
                    <span>{{ (form.pageNum - 1) * form.pageSize + scope.$index + 1 }}</span>
                </template>
            </el-table-column> -->
            <el-table-column
                v-for="(item, index) in tableHeaderAdministration"
                :prop="item.prop"
                :label="item.label"
                :key="index"
                :min-width="item.width"
                show-overflow-tooltip
                :sortable="item.sortable"
            ></el-table-column>

            <el-table-column label="操作" min-width="160px">
                <el-button type="primary" icon="el-icon-view" size="mini">查看</el-button>
                <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
            </el-table-column>
        </el-table>
        <el-pagination
            align="right"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="form.pageNum"
            :page-sizes="[20, 30, 40, 50]"
            :page-size="form.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            class="mt10"
        ></el-pagination>
        <el-dialog :title="title" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <el-form :inline="true" :model="information" class="demo-form-inline">
                <el-form-item label="用户名称:">
                    <el-select v-model="value" placeholder="请输入用户名称">
                        <el-input v-model="information.name"></el-input>
                    </el-select>
                </el-form-item>
                <el-form-item label="用户类型:">
                    <el-select v-model="information.value" placeholder="请选择">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import Timeinterval from '@/views/components/TimePicker/index4'
export default {
    components: { Timeinterval },
    props: {},
    data() {
        return {
            form: {
                pageNum: 1,
                pageSize: 20
            },
            information: [],
            options: [],
            multipleSelection: [],
            value: '',
            dataList: [
                // {
                //     areaName: '123'
                // }
            ],
            title: '',
            dialogVisible: false,
            tableHeaderAdministration: [
                { prop: 'areaName', label: '用户名称', width: 160 },
                { prop: 'gdName', label: '用户类型', width: 160 },
                { prop: 'bdName', label: '所属区域', width: 160 },
                { prop: 'devName', label: '电压等级(V)', width: 160 },
                { prop: 'devName', label: '用户协议容量(MVA)', width: 160 },
                { prop: 'devName', label: '拟接入容量(MVA)', width: 160 },
                { prop: 'devName', label: '创建者', width: 160 },
                { prop: 'devName', label: '创建日期', width: 160 }
            ],
            height: null,
            total:0
        }
    },
    created() {},
    mounted() {
        this.$refs.interval.timeOptions = [{ label: '周', value: 4 }]
        this.height = window.sessionStorage.getItem('appheight') - 188
    },
    methods: {
        onSubmit() {
            console.log(this.$refs.interval.timeValue)
        },
        // 新增
        added() {
            this.title = '新增用户'
            this.dialogVisible = true
        },
        // 关闭弹框
        handleClose(){
            this.dialogVisible = false
        },
        handleSelectionChange(val) {
            this.multipleSelection = val
        },
        handleSizeChange(val) {
            this.form.pageSize = val
            // this.administratione();
        },

        handleCurrentChange(val) {
            this.form.pageNum = val
            // this.administratione();
        }
    },

    computed: {},

    watch: {}
}
</script>
<style lang="scss" scoped></style>
