<template>
  <div class="role-container">
    <div class="left">
      <div class="header">
        机构管理
      </div>
      <div class="body">
        <el-tree :data="dataList" :props="props" :default-expand-all="true" @node-click="handleNodeClick" />
      </div>
    </div>

    <div class="right">
      <div class="header">
        <div class="btn">
          <el-button type="primary" @click="dialogVisible = true">新增</el-button>
          <el-button type="primary">修改</el-button>
        </div>
      </div>
      <div class="body">
        <el-table ref="multipleTable" v-loading="loading" :data="tableData" tooltip-effect="dark" border style="width: 100%">
          <el-table-column type="selection" />
          <el-table-column prop="pid" label="序号" />
          <el-table-column prop="name" label="机构名称" />
          <el-table-column prop="parentName" label="上级机构名称" show-overflow-tooltip />
          <el-table-column prop="orderNum" label="排序" />
          <el-table-column prop="delFlag" label="状态">
            <template #default="scoped">
              <el-tag v-if="scoped.row.delFlag === 1" type="success" effect="dark">正常</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="200" />
        </el-table>
      </div>
    </div>

    <el-dialog title="增加" :visible.sync="dialogVisible">
      <div class="body">
        <el-form :model="ruleForm" :rules="rules" label-width="100px">
          <el-form-item label="上级机构">
            <el-input />
          </el-form-item>
          <el-form-item label="机构名称">
            <el-input />
          </el-form-item>
          <el-form-item label="排序">
            <el-input />
          </el-form-item>
          <el-form-item label="状态">
            <el-radio-group>
              <el-radio label="正常" />
              <el-radio label="禁用" />
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" span class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { systemSysDeptList2API, systemSysDeptTreeAPI } from '@/api/Account/organ'

export default {
  name: 'Organ',

  data() {
    return {
      props: {
        label: 'text'
      },
      dataList: [],
      page: {
        limit: 10,
        offset: 0,
        deptId: ''
      },

      tableData: [],
      loading: false,

      dialogVisible: false,

      ruleForm: [],
      rules: []
    }
  },

  created() {
    this.disposeTreeData()
    this.getSystemSysDeptList2(this.page)
  },

  methods: {
    async disposeTreeData() {
      const res = await systemSysDeptTreeAPI()
      this.dataList.push(res)
    },

    async getSystemSysDeptList2(data) {
      this.loading = true
      const res = await systemSysDeptList2API(data)
      this.tableData = res.map((item, index) => {
        return { ...item, pid: index + 1 }
      })
      this.loading = false
    },

    handleNodeClick(data) {
      this.page.deptId = data.id
      this.getSystemSysDeptList2(this.page)
    }
  }

}
</script>

<style scoped lang="scss">
  .role-container {
    display: flex;

    .left {
      margin-right: 25px;
      padding: 10px 5px;
      width: 300px;
      background-color: #f4f5fb;

      .header {
        border-bottom: 2px solid #aaaaaa;
        height: 40px;
      }
    }

    .right {
      width: 100%;

      .btn {
        margin-bottom: 20px;
      }
    }
  }
</style>
