<template>
  <PageWrapper :sidebarWidth="250">
    <template #sidebar>
      <DepartTree @select="onTreeSelect" />
    </template>
    <Card :bordered="false" :class="[`${prefixCls}--right-col-card`]">
      <Tabs defaultActiveKey="user-info">
        <TabPane tab="基本信息" key="base-info" forceRender style="width: 1082px">
          <DepartBaseInfoTab :data="departData" />
        </TabPane>
        <TabPane tab="用户信息" key="user-info" v-if="hasPermission('system:departUser:user')">
          <DepartUserInfoTab :data="departData" />
        </TabPane>
        <TabPane tab="部门角色" key="role-info" v-if="hasPermission('system:departUser:role')">
          <DepartRoleInfoTab :data="departData" />
        </TabPane>
      </Tabs>
    </Card>
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { provide, ref } from 'vue';
  import { useDesign, usePermission } from '@jdlinker/func';
  import { PageWrapper } from '@jdlinker/ui';
  import DepartTree from './components/DepartTree.vue';
  import DepartBaseInfoTab from './components/DepartBaseInfoTab.vue';
  import DepartUserInfoTab from './components/DepartUserInfoTab.vue';
  import DepartRoleInfoTab from './components/DepartRoleInfoTab.vue';
  import { Card, Tabs, TabPane } from 'ant-design-vue';

  const { hasPermission } = usePermission();
  const { prefixCls } = useDesign('depart-user');
  provide('prefixCls', prefixCls);

  // 当前选中的部门信息
  let departData = ref({});

  // 左侧树选择后触发
  function onTreeSelect(data) {
    departData.value = data;
  }
</script>
<style lang="less" scoped>
  @import './index.less';
  :deep(.ant-card-body) {
    padding: 1px;
  }
  :deep(.jeecg-basic-table-form-container) {
    padding: 0;
  }
  :deep(.ant-tabs-nav-wrap) {
    padding-left: 15px;
  }
</style>
