<script setup lang="ts">
import { PageSearch, usePageSearch } from "/@/components/PageSearch";
import searchConfig from "./config/search.config";
import contentConfig from "./config/content.config";
// import PageAuth from "/@/components/PageAuth";
import { PageModal, usePageModal } from "/@/components/PageModalShell";
import modalConfig from "./config/modal.config";
import { PageContent } from "/@/components/PageContent";
import type { PageContentInstance } from "/@/components/PageContent";
import { projectFormConfig } from "./config/_details";
import { projectFormRules } from "./config/_rules";
import {
  BasicForm,
  transform,
  createDefaultData
} from "/@/components/BasicForm";
import { ElImage } from "element-plus";
import { httpDetail } from "/@/api/parameter/good";
import { ElForm } from "element-plus";
import { ref, unref } from "vue";
// import dayjs from "dayjs";
import { useResponseHandle } from "/@/hooks/useAsync";
// import OrderDialog from "/@/components/PageListModal";
import LadderModal from "./cpns/ladder-modal.vue";
import LadderTable from "./cpns/ladder-table.vue";
import { Unit } from "/@/components/RemoteSelect";
const responseHandle = useResponseHandle();
const ladderModalRef = ref<InstanceType<typeof LadderModal>>(null);
// import { httpDetail } from "/@/api/parameter/video";
const pageContentRef = ref<PageContentInstance | null>(null);
const {
  pageModalRef,
  handleUpdateData,
  handleCreateData,
  handlePreviewData,
  handleConfrim,
  defaultInfo
} = usePageModal({
  pageContentRef
});
const { handleResetClick, handleSearchClick } = usePageSearch();
const { formItems } = projectFormConfig;
// const modelRef = ref<InstanceType<typeof OrderDialog>>(null);
const basicFormRef = ref<InstanceType<typeof ElForm>>(null);
const formData = ref<Record<string, any>>(createDefaultData(formItems));
// function handleCreate() {
//   basicFormRef.value.validate(isValid => {
//     console.log(isValid);
//     // if (!isValid) return;

//     const { group_id, good_id } = formData.value;
//     if (!group_id || good_id.length == 0) return;
//     console.log(formData.value);
//     const params = {
//       group_id,
//       good_id: []
//     };
//     good_id.forEach(si => {
//       console.log(si);
//       params.good_id.push(si.id);
//     });
//     handleConfrim("create", params);
//   });
// }
async function handleUpdate(_ladder, index) {
  formData.value.good_param[index] = _ladder;
}

function handleCreate() {
  basicFormRef.value.validate(isValid => {
    if (!isValid) return;
    const params = unref(formData);
    handleConfrim("create", params);
    // emit("create", params);
  });
}
async function handlePush(_ladder) {
  formData.value.good_param.push(unref(_ladder));
}
async function handleDetailData(row, type) {
  const { id } = row;
  const { code, data, message } = await httpDetail({ id: id });
  responseHandle({
    code,
    message,
    handler: () => {
      if (type === "preview") {
        handlePreviewData(data);
      }
      if (type === "update") {
        formData.value = transform(formItems, data, {});
        handleUpdateData(data);
      }
    }
  });
}

function handleAddOrder(list) {
  list.forEach(item => {
    const { id } = item;
    let findex = formData.value.good_id.findIndex(e => e.id + "" == id + "");
    if (findex == -1) {
      formData.value.good_id.push(item);
    }
  });
}
</script>

<template>
  <!-- <PageAuth :pageName="pageName"> -->
  <PageSearch
    :form-config="searchConfig"
    @search-btn-click="handleSearchClick"
    @reset-btn-click="handleResetClick"
  />
  <PageContent
    ref="pageContentRef"
    :content-config="contentConfig"
    @create-btn-click="handleCreateData"
    @preview-btn-click="row => handleDetailData(row, 'preview')"
    @update-btn-click="row => handleDetailData(row, 'update')"
  />
  <PageModal
    ref="pageModalRef"
    :modal-config="modalConfig"
    :default-info="defaultInfo"
    @confirm-btn-click="handleConfrim"
  >
    <BasicForm
      ref="basicFormRef"
      v-bind="projectFormConfig"
      :form-data="formData"
      :rules="projectFormRules"
      :disabled="false"
      label-width="120px"
    >
      <template #unit_id>
        <Unit v-model="formData.unit_id" placeholder="单位" />
      </template>

      <template #good_param>
        <LadderTable
          :readonly="false"
          :ladder="formData.good_param"
          @choose="() => ladderModalRef.onDisplay()"
          @update="({ data, index }) => ladderModalRef.onDisplay(data, index)"
          @delete="index => formData.good_param.splice(index, 1)"
        />
      </template>
      <template #footer>
        <div class="w-full flex justify-end">
          <ElButton type="primary" @click="handleCreate">保存</ElButton>
        </div>
      </template>
    </BasicForm>
  </PageModal>
  <LadderModal ref="ladderModalRef" @update="handleUpdate" @push="handlePush" />
  <!-- </PageAuth> -->
</template>
