<!--
 * @Author: zwq
 * @Date: 2021-04-06 19:33:11
 * @LastEditors: zwq
 * @LastEditTime: 2021-04-13 10:41:11
 * @Description:
-->
<template>
  <el-container style="margin:30px">
    <el-aside>
      <side-tree v-if="menuList.length>0" :menu-list="menuList" @getOrganization="getOrganization" />
    </el-aside>
    <el-main style="border:2px solid #E4E4E4;border-radius:10px;margin-left:10px">
      <organization-manege v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
    </el-main>
  </el-container>
</template>

<script>
import sideTree from '../system-manage/sideTree'
import organizationManege from '../system-manage/organizationManege'
import { getOrgList } from '@/api/org'
export default {
  components: { sideTree, organizationManege },
  data() {
    return {
      menuList: [],
      addOrUpdateVisible: false,
      organizationInfo: {},
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      listQuery: {
        current: 1,
        size: 500
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      // edit here
      this.menuList.splice(0, this.menuList.length)
      const res = await getOrgList(this.listQuery)
      if (res.code === 0) {
        this.menuList = res.data.records
      }
    },
    getOrganization(data) {
      this.addNew(data.id)
    },
    // 新增 / 修改
    addNew(id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id)
      })
    }
  }
}
</script>
<style scoped>
.el-container >>> .el-aside{
  border:2px solid #E4E4E4;
  border-radius:10px;
  background-color: white;
  min-height:550px;
  width:30%;
  padding-top:20px
}
</style>
