<script setup lang="ts">
import { ref, shallowRef, watch } from "vue";
import { httpCreate } from "/@/api/interest/organize";
import { statusOptions } from "./_options"
import { ElMessage, ElOption } from "element-plus"
import Modal from "./cpns/modal.vue"

import CategoryTree from "./cpns/category-tree.vue"

const pageName = "grossProfit";

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

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

function handleCategoryTreeSearch(index?: number) {
  if (index === breadcrumb.value.length - 1) { return }
  const item = breadcrumb.value[index];
  const id = item ? item.id : "";
  categoryTreeRef.value!.changePid(id);
  categoryTreeRef.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="() => handleCategoryTreeSearch()">全部专属一级分类 <span v-if="breadcrumb.length > 0" class="mx-[5px]">/</span> </li>
      <li v-for="(item, index) in breadcrumb" :key="item.id"
        :class="{ 'cursor-pointer': true, 'text-[#ccc]': index === breadcrumb.length - 1 }"
        @click="() => handleCategoryTreeSearch(index)">
        {{ item.cat_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" 
          placeholder="分类状态"
          style="width: 100%" 
          @change="() => categoryTreeRef.onSearch()">
          <ElOption 
            v-for="opt in statusOptions" 
            :key="opt.value" 
            :value="opt.value" 
            :label="opt.label" 
          />
        </ElSelect> -->
        <ElInput 
          @change="() => categoryTreeRef!.onSearch()" 
          v-model="params.cat_name" 
          placeholder="分类名称" 
          size="small" 
          clearable
        />
      </div>
      <div class="flex">
        <ElButton size="small" @click="() => categoryTreeRef!.onSearch()">刷新</ElButton>
      </div>
    </div>

    <!-- 树节点 -->
    <div class="flex-1">
      <CategoryTree 
        ref="categoryTreeRef" 
        :otherParms="params" 
        :breadcrumb="breadcrumb"
        @breadcrumbChange="handleChange" 
      />
    </div>

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