<template>
  <div class="overflow-hidden h-full">
    <BasicTree
      :title="t('组织架构')"
      :toolbar="toolbar"
      search
      expandOnSearch
      :checkable="isCheckable"
      :treeData="treeData"
      :clickRowToExpand="true"
      switcher
      :fieldNames="{ key: 'id', title: 'name' }"
      @select="handleSelect"
      @check="handleCheck"
    >
      <template #title="{ name, departmentType }">
        <a-tag color="processing" v-if="departmentType === 1">公司</a-tag>
        <a-tag color="warning" v-else-if="departmentType === 0">部门</a-tag>
        {{ name }}
      </template>
    </BasicTree>
  </div>
</template>

<script setup lang="ts">
  import { getDepartmentTree } from '/@/api/system/department';
  import { TreeItem } from '/@/components/Tree';
  import { BasicTree } from '/@/components/Tree';
  import { onMounted, ref } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';

  defineProps({
    isCheckable: {
      type: Boolean,
      default: false,
    },
    toolbar: {
      type: Boolean,
      default: false,
    },
  });

  const { t } = useI18n();
  const emits = defineEmits(['select', 'check']);
  const treeData = ref<TreeItem[]>([]);
  async function getList() {
    treeData.value = (await getDepartmentTree()) as unknown as TreeItem[];
  }
  function handleSelect(keys: string) {
    emits('select', keys[0]);
  }

  function handleCheck(keys: string) {
    emits('check', keys);
  }
  onMounted(() => {
    getList();
  });
</script>
<style scoped lang="less">
  :deep(.vben-basic-title) {
    font-size: 14px;
    color: @primary-color;
    font-weight: bold;
    padding-left: 8px;

    &::before {
      width: 4px;
      height: 16px;
      background: @primary-color;
      border-radius: 2px;
      content: '';
      margin-right: 8px;
    }
  }
</style>
