<template>
    <div class="container">
        <div class="title">拓扑图管理</div>
        
        //<el-row><el-col>标签是属于element的Layout布局控件
        //布局的一行(el-row)的宽度分为24等份，无论一个el-row中有几个el-col，总值加起来等24
        
        <el-form class="el-row query-form" ref="form" :model="form" label-width="100px">
            <el-form-item  class="el-col el-col-6" label="拓扑图名称" prop="name" style="margin-left: 50px;">
                <el-input placeholder="请输入拓扑图名称" v-model="form.name" />
            </el-form-item>
            <el-form-item class="el-col el-col-6" label="类型" prop="type">
                <el-select v-model="form.type">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="物理拓扑图" value=""></el-option>
                    <el-option label="业务拓扑图" value=""></el-option>
                </el-select>
            </el-form-item>
            <el-form-item class="el-col el-col-6" label="状态" prop="status">
                <el-select v-model="form.status">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="已发布" value=""></el-option>
                    <el-option label="未发布" value=""></el-option>
                </el-select>
            </el-form-item>
            <el-button type="primary" size="small" @click="search">查询</el-button>
            <el-button size="small" @click="resetForm">重置</el-button>
        </el-form>
        <pager
            ref="pager"
            :tableConfig="tableConfig"  //列配置
            @add="add"
            @edit="edit"
            @delete="batchDelete"
        ></pager>
            
         <EditTopology ref="dialog" :callback="refresh"></EditTopology>
    </div>  
</template>

<script>
import pager from '@/components/pager/pager'
import { getList, batchDelete } from '@/api/modules/topology'
import EditTopology from './EditTopology.vue'

export default ({
    components: {
        pager,
        EditTopology,
    },
    data() {
        return {
            form:{
                name:undefined,
                type:undefined,
                status:undefined
            },

            tableConfig: {
                boxType: 'checkbox',
                request: getList,
                title: {
                btns: {
                    type: 'primary',
                    icon: 'el-icon-plus',
                    text: '新增',
                    click: 'add',
                },
            },
            columns: [
                {
                    prop: 'name',
                    label: '拓扑图名称',
                    width: 130,
                },
                {
                    prop: 'type',
                    label: '类型',
                    width: 120,
                    align: 'center',
                    render: () => {
                    return '<span>物理拓扑图</span>'
                    },
                },
                {
                    prop: 'des',
                    label: '描述信息',
                    width: 280,
                },
                {
                    prop: 'order',
                    label: '排序号',
                    width: 70 ,
                    align: 'center',
                },
                {
                    prop:'status',
                    label: '状态',
                    width: 80
                },
                {
                    prop: 'operate',
                    width: 220,
                    label: '操作',
                    align: 'center',
                    items: [
                    {
                        text: '详情',
                        click: '',
                    },
                    {
                        text: '编辑',
                        click: 'edit',
                    },
                    {
                        text: '绘制',
                        click: '',
                    },
                    {
                        text: '预览',
                        click: '',
                    },
                    {
                        text: '发布',
                        click: '',
                    }
                    ],
                },
            ],
            btns: {
                type: 'primary',
                text: '删除',
                click: 'delete',
            },
            },
            refresh:()=>{
                this.$refs.pager.query()
            }
        }
    },
    methods: {
        search() {
            this.$refs.pager.setParams(this.form)
            this.$refs.pager.query()
        },
        resetForm() {
            this.$refs.form.resetFields()
            this.$refs.pager.setParams(this.form)
            this.$refs.pager.query()
        },
        batchDelete() {
            let selectList = this.$refs.pager.getSelectList()
            if (!selectList || selectList.length === 0) {
                this.$message.error('请选中拓扑图后进行删除')
                return
            }
            var nameStr = Array.from(selectList, (item) => item.name).join('、')
            this.$confirm(`确定删除拓扑图 [ ${nameStr} ] 吗？`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
            .then(() => {
            var ids = Array.from(selectList, (item) => item.id)
            batchDelete({ ids: ids }).then((result) => {
                if (result.returnCode === '0') {
                this.$message.success('删除成功')
                this.$refs.pager.query()
                }
            })
            })
            .catch(() => {})
        },
        add() {
        this.$refs.dialog.open()
        },
        edit(item) {
        this.$refs.dialog.open(item)
        },
    },
})
</script>
<style scoped>
    /deep/ .el-table  .el-table_1_column_6 .cell{
        text-align: center;
    }
    /deep/ .el-table_1_column_7 .cell{
        text-align: left;
    }
    /deep/ .el-table_1_column_7 .cell{
        padding: 0;
    }
</style>