<!--
 * @Author: 曹捷
 * @Date: 2019-08-13 10:49:35
 * @LastEditors: 曹捷
 * @LastEditTime: 2021-04-28 11:56:06
 * @Description: 机构管理
 -->
<template>
  <obitUniversalTable name="机构列表">
    <template #btn>
      <a-button type="primary" @click="addDialog(0)">
        <i class="iconfont icon-add-bold p-r-5"></i> 新 增
      </a-button>
    </template>
    <a-table v-if="orgList.length>0" expandRowByClick :loading="loading" :childrenColumnName="'childs'"
      :defaultExpandAllRows="true" :pagination="false" rowKey="orgId" :columns="tableColumns" :dataSource="orgList"
      class="com-table" highlight-current-row style="width: 100%">
      <template #roles="{ record  }" :key="record.orgId">
        <span class="m-r-5" animation="line-left-bottom reverse" v-for="item in record.roles" :key="item.roleId">
          {{item.roleName}}
        </span>
      </template>
      <template #operation="{ record  }" :key="record.orgId">
        <a-button type="link" @click.stop="addDialog(record.orgId)"> 新增</a-button>
        <a-divider type="vertical" style="height: 16px;" />
        <a-button type="link" @click.stop="openBindRole(record )"> 绑定</a-button>
        <a-divider type="vertical" style="height: 16px;" />
        <a-button type="link" @click.stop="editDialog(record )"> 编辑</a-button>
        <a-divider type="vertical" style="height: 16px;" />
        <a-button type="link" @click.stop="remove(record)"> 删除</a-button>
      </template>
    </a-table>
  </obitUniversalTable>
  <orgAdd :addType="addType" :detailsInfo="detailsInfo" v-model:open="addVisable" @reload="getOrgList"></orgAdd>
  <orgBindRoleVue v-model:open="orgBindVisable" :detailsInfo="detailsInfo" @reload="getOrgList"></orgBindRoleVue>
</template>

<script>
import orgAdd from './orgAdd.vue'
import orgBindRoleVue from './orgBindRole.vue'

export default {
  components: { orgAdd, orgBindRoleVue },
  data () {
    return {
      loading: false,
      tableColumns: [
        { dataIndex: 'orgName', title: '机构名称' },
        { dataIndex: 'orgCode', title: '机构编码' },
        { dataIndex: 'shortName', title: '简称' },
        { dataIndex: 'orderNo', title: '排序' },
        { dataIndex: 'orgDesc', title: '描述' },
        { title: '角色', slots: { customRender: 'roles' }, width: '400px' },
        { title: '操作', slots: { customRender: 'operation' } },
      ],
      // 新增编辑相关
      addVisable: false,
      addType: 'add',
      detailsInfo: {},
      orgList: [],
      orgBindVisable: false
    }
  },
  mounted () {
    this.getOrgList()
  },
  methods: {
    openBindRole (item) {
      this.orgBindVisable = true
      this.detailsInfo = item
    },
    // 机构新增和编辑相关  --------------start --------------------------
    addDialog (id) {
      this.detailsInfo = {
        parentId: id
      }
      this.addVisable = true
      this.addType = 'add'
    },
    editDialog (item) {
      this.detailsInfo = item
      this.addVisable = true
      this.addType = 'edit'
    },
    remove (item) {
      let _this = this
      this.$confirm({
        title: '提示',
        content: '是否删除',
        onOk () {
          _this.$http.removeSystemOrgin(item).then((res) => {
            _this.$message.success('删除成功')
            _this.getOrgList(true)
          })
        },
      })
    },
    // 机构新增和编辑相关   -------------------end-------------------
    getOrgList () {
      this.loading = true
      this.$http.getSystemTreeRole().then((res) => {
        this.orgList = res
      }).finally(() => {
        this.loading = false
      })
    },
  },
}
</script>

<style lang="less">
.table-tree {
}
</style>