<template>
  <div>
    <HeaderTools
      :header-tools="headerTools"
      @header-tools-action="headerToolsAction"
    ></HeaderTools>
    <div class="p-4 pt-0 w-full lg:flex-1">
      <MyContent
        :mainSchema="myContentSchema"
        :pagination="pagination"
        @my-content-action="myContentAction"
      />
    </div>
  </div>
</template>

<script setup>
import myContentJson from "@/json/data-entry/myContentJson.json";
import refineCodes from "@/json/refineCodes.json";
import MyContent from "@/components/lazy-load/global/MyContent.vue";
const { $http: httpService } = useNuxtApp();
const props = defineProps({
  listConflicts: {
    type: Array,
    default: () => [],
  },
});
const emit = defineEmits(["conflict-details"]);
const pagination = ref({
  total: 0,
  page: 1,
  limit: 10,
});
const myContentSchema = computed(() => {
  const baseSchema = JSON.parse(JSON.stringify(myContentJson));

  return {
    ...baseSchema,
    items: props.listConflicts?.hits ?? [],
    pagination: {
      total: props.listConflicts?.total?.value ?? 0,
      page: pagination.value.page,
      limit: pagination.value.limit,
    },
  };
});
const headerTools = computed(() => [
  {
    items: [
      {
        type: "dropdown",
        key: "dropdown",
        name: "refine_codes",
        dropdownSchema: {
          width: "18em",
          modelValue: null, // ✅ اینو بذار
          optionAttribute: "title",
          valueAttribute: "value",
          searchable: false,
          placeholder: "انتخاب کنید",
          items: refineCodes,
        },
      },
      {
        key: "prevNext",
        name: "entityNavigator",
        prevDisabled: false,
        nextDisabled: true,
      },
    ],
  },
]);

function headerToolsAction({ action, data }) {
  if (action === "prev-click") {
  }

  if (action === "next-click") {
  }
}
function myContentAction({ action, payload }) {
  if (action === "conflict_Details") {
    emit("conflict-details", payload);
  }
}
</script>

<style lang="scss"></style>
