<script setup lang="ts">
import { ref , shallowRef, watch} from "vue";
import { httpCreate } from "/@/api/interest/organize";
import OrganizeTree from "./cpns/organize-tree.vue";
import Modal from "./cpns/modal.vue"

// TODO:权限
import { ElMessage } from "element-plus"
const pageName = "organize";
const breadcrumb = ref<any[]>([]);
const visible = shallowRef(false)
const data = ref<any>({})
const disabledBusiness = shallowRef(false)
const params = ref<Record<string, string>>({ name: "", nickname: "" });

const organizeTreeRef = ref<InstanceType<typeof OrganizeTree> | null>(null);

function handleBreadcrumbChange(depart: any) {
  breadcrumb.value.push(depart);
}

function handleOrganizeTreeSearch(index?: number) {
  if (index === breadcrumb.value.length - 1) return;
  const item = breadcrumb.value[index];
  const id = item ? item.id : "";
  organizeTreeRef.value.changePid(id);
  organizeTreeRef.value.onSearch();
  breadcrumb.value.splice(index + 1);
}

async function handleSubmit(){
  const { companyNo, name, pid = 0} = data.value
  const res = await httpCreate({ companyNo, name, pid })

  if(res.code === 0) {
    visible.value = false
    ElMessage.success('添加成功')
    organizeTreeRef.value.onSearch();
  } else {
    ElMessage.warning('添加失败')
  }
}

watch(() => breadcrumb.value,() => {
  disabledBusiness.value = breadcrumb.value.length !== 0
  const business = breadcrumb.value[breadcrumb.value.length - 1]
  data.value.companyNo = business ? business.companyNo : ''
  data.value.pid = business ? business.id : '0'
},{
  immediate: true,
  deep: true
})
</script>

<template>
  <PageAuth
    class="px-[10px] h-[calc(100vh-60px)] bg-white"
    :pageName="pageName"
    :margin="false"
  >
    <!-- 面包屑 -->
    <ul class="flex cursor-pointer" v-if="breadcrumb.length > 0">
      <li @click="() => handleOrganizeTreeSearch()">
        全部分类
        <span class="mx-[5px]">/</span>
      </li>

      <li
        :class="{
          'cursor-pointer': true,
          'text-[#ccc]': index === breadcrumb.length - 1
        }"
        v-for="(item, index) in breadcrumb"
        :key="item.id"
        @click="() => handleOrganizeTreeSearch(index)"
      >
        {{ item.name }}
        <span class="mx-[5px]" v-if="index !== breadcrumb.length - 1">/</span>
      </li>
    </ul>

    <div class="flex justify-between pt-[20px]">
      <div class="flex gap-1">
        <ElInput
          v-model="params.name"
          placeholder="部门名称"
          clearable
          size="small"
          @change="() => organizeTreeRef.onSearch()"
        />
        <ElInput
          v-model="params.nickname"
          placeholder="员工名称"
          clearable
          size="small"
          @change="() => organizeTreeRef.onSearch()"
        />
      </div>

      <div class="flex">
        <ElButton size="small" type="primary" @click="visible = true">添加</ElButton>
        <ElButton size="small" @click="() => organizeTreeRef.onSearch()">刷新</ElButton>
      </div>
    </div>

    <!-- 树节点 -->
    <div class="flex-1">
      <OrganizeTree
        ref="organizeTreeRef"
        :otherParms="params"
        @breadcrumb-change="handleBreadcrumbChange"
      />
    </div>

    <Modal 
      v-model:data="data" 
      v-model:visible="visible" 
      :disabledBusiness="disabledBusiness" 
      @submit="handleSubmit" 
      />
  </PageAuth>
</template>
