<template>
    <div class="flex-container">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
            <!-- 搜索区域 -->
            <a-form layout="inline">
                <a-row :gutter="24">
                    <a-col :md="4" :sm="24">
                        <a-form-item label="部门名称">
                            <a-input v-model="queryParams.condition" placeholder="请输入"/>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="24">
                        <a-form-item label="上级部门">
                            <treecheck @select="treeSelect" ref="tree1" :createFun="getList"></treecheck>
                        </a-form-item>
                    </a-col>
                    <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
            <a-col :md="6" :sm="24">
                 <a-button type="primary" icon="search" @click="reflashTable">搜索</a-button>
                <a-button style="margin-left: 8px" type="primary" icon="plus"
                          @click="teeAddClick('add')">添加部门</a-button>
            </a-col>
          </span>
                </a-row>
            </a-form>
        </div>
        <s-table
                ref="table"
                size="small"
                class="flex-filling"
                style="word-break: break-all;"
                :columns="columns"
                :data="rowdata"
                bordered
        >
            <template slot="operation" slot-scope="text, record">
        <span>
          <a @click="teeAddClick(record.id)">编辑</a>
          <a-divider type="vertical"/>
          <a-popconfirm title="是否要删除此行？" @confirm="treeDeleteClick(record.id)">
            <a>删除</a>
          </a-popconfirm>
            <!-- <a-divider type="vertical" v-if="record.pids.split(',').length<4"/>
             <a @click="showModalNext(record.id)" v-if="record.pids.split(',').length<4">添加下一级</a>-->
        </span>
            </template>
        </s-table>
        <user-modal ref="modal1" @ok="agencyOk"></user-modal>
    </div>

</template>

<script>
    import {departmentList, deptDelete, getList} from '@/api/system'
    import STable from '@/components/table/'
    import userModal from '@/views/system/modal/userModal'
    import treecheck from '@/components/sysmanage/treeCheck'

    export default {
        name: "departmentManage",
        components: {
            treecheck,
            STable,
            userModal
        },
        data() {
            return {
                columns: [
                    {dataIndex: 'name', hide: true, sort: true, title: '部门名称', description: '123', width: 220},
                    {dataIndex: 'fullName', sort: true, title: '部门全称', width: 120},
                    {dataIndex: 'num', sort: true, title: '排序', width: 120},
                    {dataIndex: 'tips', sort: true, title: '备注', width: 120},
                    {dataIndex: 'pName', sort: true, title: '上级部门', width: 120},
                    {title: '操作', key: 'action', width: 250, scopedSlots: {customRender: 'operation'}}
                ],
                queryParams: {
                    pid: '',
                    condition: ''
                },
                getList: getList,
                rowdata: parameter => {
                    let params = {
                        page: parameter.pageNo,
                        limit: parameter.pageSize
                    }
                    let obj = this.queryParams
                    return departmentList(Object.assign(params, obj)).then(res => {
                        // let data_tmp = new Array()
                        // data_tmp.push({ code: 0, name: '系统' })
                        // res.rows.forEach(element => {
                        //   if (!element['pcode']) {
                        //     element['pcode'] = 0
                        //   }
                        //   data_tmp.push(element)
                        // })
                        // let list = FlatToNested(data_tmp, { idProperty: 'code', parentProperty: 'pcode' })
                        let data = {
                            data: res.rows,
                            pageSize: parameter.pageSize,
                            pageNo: parameter.pageNo,
                            totalCount: res.total
                        }

                        return data
                    })
                }
            }
        },
        methods: {
            //树级筛选
            treeSelect(data) {
                let id = "";
                if (data) {
                    id = data.id;
                }
                this.queryParams.pid = id;
                this.reflashTable();
            },
            reflashTable() {
                this.$refs.table.refresh({search: true})
                this.$refs.tree1.createList()
            },
            //新增或修改部门
            teeAddClick(edit) {
                if (edit !== "add") {
                    this.$refs.modal1.showModal(edit);
                } else {
                    let type = "add"
                    this.$refs.modal1.showModal(type, this.reflashTable());
                }
            },
            //删除部门,不能删除有用户的部门，因为现在用户删除为逻辑删除，所以存在逻辑上删除了的用户的部门也删除不了
            treeDeleteClick(id) {
                deptDelete({deptId: id}).then(res => {
                    if (res.code == 400) {
                        this.$notification.error({message: res.message, description: '删除失败', duration: 4})
                    }
                    this.reflashTable();
                })
            },
            //部门刷新
            agencyOk() {
                this.reflashTable();
            }
        }
    }
</script>
<style scoped>
    th.column-money,
    td.column-money {
        text-align: right !important;
    }

    .ant-table.ant-table-bordered .ant-table-title {
        border: none !important;
    }

    .card {
        margin-bottom: 24px;
    }

    .ant-card-body {
        padding: 0 !important;
    }
</style>


