<template>
    <el-container style="padding:0px;height:77vh;">
        <el-header style='height:42px;line-height:42px;border: 1px solid rgba(196, 196, 196, 1);background: #f4f4f4;'>
            <span class="title-bold title-left-color">设备信息管理</span>
            <el-popover placement="bottom" width="150">
                <el-button slot="reference" size='mini' type="primary" icon="el-icon-s-tools"
                    style='float:right;transform:translateY(6px)'>筛选</el-button>
                <el-checkbox-group v-model="checkList">
                    <el-col :span="24">
                        <el-checkbox v-for="(item,index) in tableHeader" :label="item" :key="index">
                            <span>{{item.label}}</span>
                        </el-checkbox>
                    </el-col>
                </el-checkbox-group>
            </el-popover>
        </el-header>
        <el-main class="box_main" style="padding:0px;">
            <el-card>
                <div class="tableCard">
                    <el-row style="margin-top: 5px;margin-bottom: 5px;">
                        <el-col :span="24">
                            <el-radio-group v-model="paramLevel" @change="changeLevel">
                                <el-radio :label="1">本级设备</el-radio>
                                <el-radio :label="2">外接设备</el-radio>
                                <el-radio :label="3">全部设备</el-radio>
                            </el-radio-group>
                            <el-button style="float: right; \margin-right: 10px;"
                                v-if="paramLevel !==3 && isAuth('eq:equ:save')" icon="el-icon-plus" size='mini'
                                type="primary" @click="addHandle">新增
                            </el-button>
                        </el-col>
                    </el-row>
                    <!-- <el-table :data="tableData" @sort-change='sortChange' style="width:100%;" :stripe="true"
                        :header-cell-style="{background:'#EEF8FF',color:'#333333'}" v-loading="loading">
                        <el-table-column type="index" label="序号" width="50" header-align="center" align="center">
                            <template scope="scope">
                                <span>{{scope.$index+(pageIndex - 1) * pageSize + 1}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="level" label="设备所属层级" header-align="center" align="center"
                            sortable='custom'>
                            <template slot-scope="scope">
                                <font v-if="scope.row.level === 1">本级设备</font>
                                <font v-if="scope.row.level === 2">外接设备</font>
                            </template>
                        </el-table-column>
                        <el-table-column prop="sName" column-key='level' label="所属节点名称" header-align="center"
                            align="center" width="180" show-overflow-tooltip sortable='custom'>
                            <template slot-scope="scope">
                                <font v-if="scope.row.level === 1">{{scope.row.stationName}}</font>
                                <font v-if="scope.row.level === 2">{{scope.row.lineName}}</font>
                            </template>
                        </el-table-column>
                        <el-table-column prop="type" label="设备类型" header-align="center" align="center"
                            sortable='custom'>
                            <template slot-scope="scope">
                                <font v-if="scope.row.type === 1">应用服务器</font>
                                <font v-if="scope.row.type === 2">数据库服务器</font>
                                <font v-if="scope.row.type === 3">集群服务器</font>
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="设备名称" header-align="center" align="center"
                            sortable='custom'>
                        </el-table-column>
                        <el-table-column prop="code" width="180" label="设备编码" header-align="center" align="center"
                            sortable='custom'>
                        </el-table-column>
                        <el-table-column prop="specifications" label="设备IP地址" header-align="center" align="center"
                            width="180" sortable='custom'>
                        </el-table-column>
                        <el-table-column prop="port" label="端口" width="80" header-align="center" align="center"
                            sortable='custom'>
                        </el-table-column>
                        <el-table-column prop="factory" label="生产厂家" header-align="center" align="center"
                            sortable='custom'>
                        </el-table-column>
                        <el-table-column label="操作" header-align="center" align="center" width=220>
                            <template slot-scope="scope">
                                <el-button type='text' v-if="paramLevel !==3 && isAuth('eq:equ:edit')"
                                    @click="updateHandle(scope.row.id)">编辑
                                </el-button>
                                <el-button type='text' v-if="isAuth('eq:equ:info')" @click="queryHandle(scope.row)">详情
                                </el-button>
                                <el-button type="text" v-if="paramLevel !==3 && isAuth('eq:equ:delete')"
                                    @click="deleteHandle(scope.row.id)">删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table> -->
                    <drag-table :data="tableData" :header="checkList" :option="tableOption" @getDataList="getDataList"
                        v-loading="loading" :operationNum="3" :isShowOperate="true">
                        <el-table-column slot="fixed" fixed prop="" label="序号" header-align="center" align="center"
                            width=80>
                            <template slot-scope="scope">
                                <span>{{scope.$index+(pageIndex - 1) * pageSize + 1}}</span>
                            </template>
                        </el-table-column>
                        <template slot='sname' slot-scope="scope">
                            <font v-if="scope.row.level === 1">{{scope.row.sname}}</font>
                            <font v-if="scope.row.level === 2">{{scope.row.liName}}</font>
                        </template>
                        <template slot='level' slot-scope="scope">
                            <font v-if="scope.row.level === 1">本级设备</font>
                            <font v-if="scope.row.level === 2">外接设备</font>
                        </template>
                        <template slot='type' slot-scope="scope">
                            <font v-if="scope.row.type === 1">应用服务器</font>
                            <font v-if="scope.row.type === 2">数据库服务器</font>
                            <font v-if="scope.row.type === 3">集群服务器</font>
                        </template>

                        <template slot-scope="scope">
                            <el-button type='text' @click="queryHandle(scope.row)">详情
                            </el-button>
                            <el-button type='text' v-if="paramLevel !==3 && isAuth('eq:equ:edit')"
                                @click="updateHandle(scope.row.id)">编辑</el-button>
                            <el-button type="text" v-if="paramLevel !==3 && isAuth('eq:equ:delete')"
                                @click="deleteHandle(scope.row.id)">删除</el-button>
                        </template>
                    </drag-table>
                </div>
            </el-card>
        </el-main>
        <el-footer>
            <el-pagination background @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
                :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
                layout="total, sizes, prev, pager, next, jumper">
            </el-pagination>
        </el-footer>
        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
        <query-detail v-if="queryDetailVisible" ref="queryDetail" @refreshDataList="getDataList"></query-detail>
    </el-container>
</template>

<script>
    import dragTable from '../../components/tab'
    import AddOrUpdate from './add-or-update'
    import QueryDetail from './query-detail'

    export default {
        data() {
            return {
                addOrUpdateVisible: false,
                queryDetailVisible: false,
                loading: true,
                tableData: [],
                pageIndex: 1,
                pageSize: 10,
                totalPage: 0,
                sort: '',
                order: '',
                paramLevel: 1,
                checkList: [],
                tableHeader: [
                    { label: '设备所属层级', prop: 'level', slot: true },
                    { label: '所属节点名称', prop: 'sname', slot: true },
                    { label: '设备类型', prop: 'type', slot: true },
                    { label: '设备名称', prop: 'name' },
                    { label: '设备编码', prop: 'code' },
                    { label: '设备IP地址', prop: 'specifications' },
                    { label: '端口', prop: 'port', width: 80 },
                    { label: '生产厂家', prop: 'factory' }
                ],
                tableOption: {
                    border: false, //是否边框
                    maxHeight: 500 //高度
                }
            }
        },
        watch: {
            totalPage() { //注意这个函数的名字必须和你监听data中的属性的名字一样，这样才能当你data中的属性发生变化时，触发这个函数
                let pages = Math.ceil(this.totalPage / this.pageSize)//新数据总页数
                //总页数小于当前页数则重新加载列表数据
                if (pages < this.pageIndex) {
                    this.pageIndex = pages || 1
                    this.getDataList()//获取表格数据的方法
                }
            }
        },
        created() {
            this.checkList = [...this.tableHeader]
            this.getDataList()
        },
        components: {
            AddOrUpdate,
            QueryDetail,
            dragTable
        },
        methods: {
            sortChange(column) {
                if (column.order === 'descending') {
                    this.order = 'desc'
                } else {
                    this.order = 'asc'
                }
                if (column.column.columnKey) {
                    this.sort = column.column.columnKey
                } else {
                    this.sort = column.prop
                }
                this.getDataList()
            },
            changeLevel() {
                this.getDataList()
            },
            getDataList(sort, order) {
                this.$http({
                    url: this.$http.adornUrl(`/eqEquipment/list`),
                    method: 'post',
                    data: {
                        stationId: localStorage.getItem('stationId'),
                        level: this.paramLevel,
                        page: this.pageIndex,
                        rows: this.pageSize,
                        sort: sort,
                        order: order
                    }
                }).then(data => {
                    if (data && data.code === 0) {
                        this.tableData = data.page.rows
                        this.totalPage = data.page.total
                    } else {
                        this.tableData = []
                        this.totalPage = 0
                    }
                    this.loading = false
                })
            },
            addHandle() {
                this.addOrUpdateVisible = true
                this.$nextTick(() => {
                    this.$refs.addOrUpdate.init(null, this.paramLevel)
                })
            },
            updateHandle(id) {
                this.addOrUpdateVisible = true
                this.$nextTick(() => {
                    this.$refs.addOrUpdate.init(id, null)
                })
            },
            deleteHandle(id) {
                this.$confirm('确认删除该设备?', '删除设备', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http({
                        url: this.$http.adornUrl(`/eqEquipment/deleteById/` + id),
                        method: 'delete'
                    }).then(data => {
                        if (data && data.code === 0) {
                            this.$message.success('删除成功！')
                            this.getDataList()
                        }
                    })
                }).catch(() => {

                })
            },
            queryHandle(bean) {
                this.queryDetailVisible = true
                this.$nextTick(() => {
                    this.$refs.queryDetail.init(bean)
                })
            },
            // 每页数
            sizeChangeHandle(val) {
                this.pageSize = val
                this.pageIndex = 1
                this.getDataList()
            },
            // 当前页
            currentChangeHandle(val) {
                this.pageIndex = val
                this.getDataList()
            },
            indexMethod(index) {
            return (this.pageIndex - 1) * this.pageSize + index + 1
            }
        }
    }

</script>

<style lang='scss' scoped>
</style>
