<template>
    <div class="router">
        <el-row :gutter="5">
            <el-col :span="12">
                <el-card shadow="always" :body-style="{ padding: '20px' }">
                    <template #header>
                        <div class="card-header">我的部门</div>
                    </template>
                    <el-form :inline="true">
                        <el-form-item label="" >
                            <el-button type="primary" @click="handleAdd">添加部门</el-button>
                            <el-button type="primary">删除部门</el-button>
                        </el-form-item>
                    </el-form>
                    <el-input placeholder="请输入部门名称"></el-input>
                    <el-tree
                        :data="departmentList"
                        :props="treeProps"
                        show-checkbox
                     />
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card shadow="always" :body-style="{ padding: '20px' }">
                    <el-tabs>
                        <el-tab-pane label="基本信息"></el-tab-pane>
                        <el-tab-pane label="部门权限"></el-tab-pane>
                    </el-tabs>
                    <el-empty description="请选择部门" />
                </el-card>
            </el-col>
        </el-row>
        <el-dialog v-model="showDialog" :title="dialogTitle">
            <el-card>
                <el-form ref="form">
                    <el-form-item prop="departmentName" label="部门名称">
                        <el-input></el-input>
                    </el-form-item>
                    <el-form-item prop="departmentType" label="部门类型">
                        <el-input></el-input>
                    </el-form-item>
                </el-form>
            </el-card>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const treeProps = ref({
    label:'label',
    children:'children'
})
const showDialog = ref(false)
let departmentList = ref([
    {
        label:'平田宅邸',
        children:[
            {
                label:'凤凰城'
            }
        ]
    }
])
let dialogTitle = ref('')


function handleAdd(){
    dialogTitle.value = '添加部门'
    showDialog.value = true
}

</script>
<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>