<template>
  <div class="p-4">
    <div class="flex bg-[#f2f1f7] rounded-lg w-[300px]">
      <div
        v-for="(item, index) in typeList"
        :key="index"
        class="px-2 py-3 flex-1 flex items-center justify-center cursor-pointer rounded-lg"
        :style="{
          background: item.type === currentType ? '#3162ff1a' : '#f1f2f7',
          color: item.type === currentType ? '#3162ff' : '#666',
        }"
        @click="changeType(item.type)"
      >
        {{ item.text }}
        {{ item.total > 999 ? "999+" : item.total }}
      </div>
    </div>
    <div>
      <!-- <PictureList ref="listRef" :params="imageParams" /> -->
      <ModelList
      @modelTotal="modelTotal"
        v-show="currentType === 'model'"
        ref="modelRef"
        :params="modelParams"
      ></ModelList>

      <PictureList
      @imageTotal="imageTotal"
       v-show="currentType === 'image'" ref="imageRef" :params="imageParams" />

      <WorkFlowList
        @workFlowTotal="workFlowTotal"
        v-show="currentType === 'workFlow'"
        ref="workFlowRef"
        :params="workFlowParams"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
const modalStore = useModalStore();
// definePageMeta({
//   middleware:[
//     function (to:any){
//       if(to.path !== '/search'){
//         modalStore.searchQuery = ''
//       }
//     }
//   ]
// })
import { computed, ref, watch } from "vue";

const route = useRoute();
const { type, keyword } = route.query as {type: string, keyword:string };

const currentType = ref("model");
const modelParams = ref({
  name:modalStore.searchQuery
});
const workFlowParams = ref({
  name:modalStore.searchQuery
});
const imageParams = ref({
  name:modalStore.searchQuery
});
if(type != 'undefined'){
  currentType.value = type
}
// if(keyword){
//   modelParams.value.name = keyword;
//   imageParams.value.name = keyword;
//   workFlowParams.value.name = keyword;
// }
const typeList = ref([
  {
    type: "model",
    total: 0,
    text: "模型",
  },
  {
    type: "workFlow",
    total: 0,
    text: "工作流",
  },
  {
    type: "image",
    total: 0,
    text: "作品",
  },
]);

// 模型的参数
const modelRef = ref(null);

function onSearchModel() {
  if (modelRef.value) {
    modelRef.value?.initPageNUm();
  }
}
onSearchModel();

// 工作流的参数
const workFlowRef = ref(null);

function onSearchWorkFlow() {
  if (workFlowRef.value) {
    workFlowRef.value?.initPageNUm();
  }
}
onSearchWorkFlow();

// 图片的参数
const imageRef = ref(null);

function onSearchImage() {
  if (imageRef.value) {
    imageRef.value?.initPageNUm();
  }
}
onSearchImage()


function handleSearch(newValue: string = "") {
  // if (newValue) {
    modelParams.value.name = newValue;
    imageParams.value.name = newValue;
    workFlowParams.value.name = newValue;
  // }
  onSearchModel();
  onSearchImage();
  onSearchWorkFlow();

  // if (currentType.value === "model") {
  // } else if (currentType.value === "image") {
  // } else {
  // }
}
// 切换类型
function changeType(type: string) {
  currentType.value = type;
  handleSearch();
}


// 返回总数
function modelTotal(total:number){
    typeList.value[0].total = total
}
function workFlowTotal(total:number){
    typeList.value[1].total = total
}
function imageTotal(total:number){
    typeList.value[2].total = total
}

const searchQuery = computed(() => modalStore.searchQuery);
watch(searchQuery, (newValue:string) => {
  handleSearch(newValue);
});
</script>

<style scoped>
.test {
  justify-content: center;
  cursor: pointer;
}
</style>
