<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"
import { statusOptions } from "./_options"
import { ElMessage } from "element-plus"

const pageName = "business";
const parent = ref(null)
const breadcrumb = ref<any[]>([]);
const visible = shallowRef(false)
const data = ref<any>({})
const params = ref<Record<string, string>>({ status: "", cat_name: "", company_name: '' });

const organizeTreeRef = ref<InstanceType<typeof OrganizeTree> | null>(null);
const 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);
}

watch(() => breadcrumb.value,() => {
  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">
      <li @click="() => handleOrganizeTreeSearch()">
        全部专属一级分类
        <span v-if="breadcrumb.length > 0" 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">
        <ElSelect v-model="params.status" style="width: 100%" placeholder="专属类型状态"  @change="() => organizeTreeRef.onSearch()">
          <ElOption v-for="opt in statusOptions" :key="opt.value" :value="opt.value" :label="opt.label" />
        </ElSelect>
        <ElInput
          v-model="params.cat_name"
          placeholder="专属类型名称"
          clearable
          size="small"
          @change="() => organizeTreeRef!.onSearch()"
        />
        <ElInput
          v-model="params.company_name"
          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="breadcrumb"
        @breadcrumb-change="handleBreadcrumbChange"
      />
    </div>

    <Modal 
      v-model:data="data" 
      v-model:visible="visible"
      @refresh="organizeTreeRef.onSearch()"
      :breadcrumb="breadcrumb"
      :pid="data.pid"
    />
  </PageAuth>
</template>
