<template lang='pug'>
    el-container(style="padding:0px;height:77.6vh;")
        el-header(style='height:42px;line-height:42px;border: 1px solid rgba(195, 195, 195, 1);background: #f4f4f4;')
            span.title-bold.title-left-color() 目标数据源管理
        el-main.box_main
            el-card()
                div.tableCard()
                    el-form(:inline="true" :model="dataForm" size="mini" )
                                el-form-item( label="数据源url:" )
                                    el-input( v-model="dataForm.url" placeholder="数据源url" clearable)
                                el-form-item( label="用户名:" )
                                    el-input.input_width( v-model="dataForm.username" placeholder="数据源用户名" clearable)
                                el-form-item(label="数据源ip:")
                                    el-input.input_width( v-model="dataForm.ip" placeholder="数据源ip" clearable)
                                el-form-item( label="说明信息:")
                                    el-input.input_width( v-model="dataForm.detail" placeholder="说明信息" clearable)
                                el-button(@click="getDataList" icon="el-icon-search" type="primary" size="mini") 查询
                                el-button(@click="reSet()" type="primary" size="mini" icon="el-icon-refresh-right") 重置
                                el-button( v-if="isAuth('sys:user:save')"  style="float:right;" size="mini" icon="el-icon-plus" type="primary" @click="addOrUpdateHandle()") 新增
                el-table(:data="dataList" @sort-change='sortChange' style="width:100%;" v-loading="dataListLoading" :stripe="true" :header-cell-style="{background:'#EEF8FF',color:'#333333'}")
                    el-table-column( type='index', header-align='center', align='center', label='序号')
                      template(scope="scope")
                        span {{scope.$index+(pageIndex - 1) * pageSize + 1}}
                    el-table-column( prop="url" header-align="center" align="center" label="数据源url" sortable='custom' width='300')
                        //template(slot-scope='scope')
                    el-table-column( prop="username" header-align="center" align="center" label="用户名" sortable='custom')
                    el-table-column( prop="password" header-align="center" align="center" label="密码" sortable='custom')
                    el-table-column( prop="stationId" columnKey="station_id" header-align="center" align="center" label="站点id" sortable='custom')
                    el-table-column( prop="ip" header-align="center" align="center" label="数据源服务器ip" sortable='custom' width='200')
                    el-table-column( prop="port" header-align="center" align="center" label="数据源端口" sortable='custom')
                    el-table-column( prop="detail" header-align="center" align="center" label="说明信息" sortable='custom' width='200')
                        //template(slot-scope='scope')
                            font(:title="scope.row.url") {{scope.row.detail | ellipsis}}
                    el-table-column( prop header-align="center" align="center" label="操作" width='200')
                        template( slot-scope="scope")
                            //el-button(type="success" plain size="mini"  @click="queryHandle(scope.row)") 详情
                            el-button(type="text" size="mini"  v-if="isAuth('sys:datasource:update')" @click="addOrUpdateHandle(scope.row)") 修改
                            el-button(type="text" size="mini" v-if="isAuth('sys:datasource:delete')" @click="deleteHandle(scope.row.id)") 删除
        el-footer.box_footer
            el-pagination(@size-change="sizeChangeHandle" background  @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize"  :total="totalPage" layout="total, sizes, prev, pager, next, jumper")
            //- 弹窗, 新增 / 修改
            add-or-update(v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshdatalist="getDataList")
</template>

<script>
    import AddOrUpdate from './datasource-add-or-update'

    export default {
        name: 'sys-datasource',
        filters: {
            ellipsis(value) {
                if (!value) return ''
                if (value.length > 55) {
                    return value.slice(0, 55) + '...'
                }
                return value
            }
        },
        data() {
            return {
                dataForm: {},
                dataList: [],
                pageIndex: 1,
                pageSize: 10,
                totalPage: 0,
                dataListLoading: false,
                dataListSelections: [],
                resetPasswordVisible: false,
                addOrUpdateVisible: false,
                queryDetailVisible: false,
                configRoleVisible: false,
                allJob: []
            }
        },
        components: {
            AddOrUpdate
            // queryDetail,
            // configRole,
            // resetPassword
        },
        watch: {
            totalPage() { //注意这个函数的名字必须和你监听data中的属性的名字一样，这样才能当你data中的属性发生变化时，触发这个函数
                let pages = Math.ceil(this.totalPage / this.pageSize)//新数据总页数
                //总页数小于当前页数则重新加载列表数据
                if (pages < this.pageIndex) {
                    this.pageIndex = pages || 1
                    this.getDataList()//获取表格数据的方法
                }
            }
        },
        created() {
            // this.getList()
            this.getDataList()
            // this.getAllJob()
        },
        methods: {
            //重置
            reSet() {
                this.pageIndex = 1
                this.dataForm = {}
                this.getDataList()
            },
            //排序
            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()
            },
            // 获取数据列表
            getDataList() {
                this.dataListLoading = true
                this.$http({
                    url: this.$http.adornUrl('/sysDatasource/list'),
                    method: 'post',
                    data: {
                        ...this.dataForm,
                        page: this.pageIndex,
                        size: this.pageSize,
                        sort: this.sort,
                        order: this.order
                    }
                }).then(data => {
                    // console.log('data', data)
                    if (data && data.code === 0) {
                        this.dataList = data.page.records
                        this.totalPage = data.page.total
                    } else {
                        this.dataList = []
                        this.totalPage = 0
                    }
                    this.dataListLoading = false
                })
            },
            // 每页数
            sizeChangeHandle(val) {
                this.pageSize = val
                this.pageIndex = 1
                this.getDataList()
            },
            // 当前页
            currentChangeHandle(val) {
                this.pageIndex = val
                this.getDataList()
            },
            // 新增 / 修改
            addOrUpdateHandle(id) {
                this.addOrUpdateVisible = true
                this.$nextTick(() => {
                    this.$refs.addOrUpdate.init(id)
                })
            },
            // 删除
            deleteHandle(id) {
                this.$confirm(`确认删除用户?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    closeOnClickModal: false
                }).then(() => {
                    this.$http({
                        url: this.$http.adornUrl('/sysDatasource/delete'),
                        method: 'post',
                        data: [id]
                    }).then(data => {
                        if (data && data.code === 0) {
                            this.$message({
                                message: '操作成功',
                                type: 'success',
                                duration: 1500,
                                onClose: () => {
                                    this.getDataList()
                                }
                            })
                        } else {
                            this.$message.error(data.msg)
                        }
                    })
                })
            }
        }
    }
</script>
<style lang='scss'>
</style>
