<script setup lang="ts">
import { ref, unref } from "vue";
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 { Company, Card } from "/@/components/RemoteSelect";
import { projectFormConfig } from "./config/_details";
import { projectFormRules } from "./config/_rules";
import {
  BasicForm,
  transform,
  createDefaultData
} from "/@/components/BasicForm";
import { ElForm } from "element-plus";

import dayjs from "dayjs";
// import { httpDetail } from "/@/api/parameter/video";
const pageContentRef = ref<PageContentInstance | null>(null);
const { pageModalRef, handleCreateData, handleConfrim, defaultInfo } =
  usePageModal({
    pageContentRef
  });
const { handleResetClick, handleSearchClick } = usePageSearch();
const { formItems } = projectFormConfig;

const basicFormRef = ref<InstanceType<typeof ElForm>>(null);
const formData = ref<Record<string, any>>(createDefaultData(formItems));
function handleCreate() {
  basicFormRef.value.validate(isValid => {
    if (!isValid) return;
    const params = unref(formData);
    const { time } = params;
    params.starttime = time[0] ? dayjs(time[0]).format("YYYY-MM-DD") : "";
    params.expiretime = time[1] ? dayjs(time[1]).format("YYYY-MM-DD") : "";
    delete params["headname"];
    delete params["suffix"];
    delete params["title"];
    handleConfrim("create", params);
  });
}
</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"
  />
  <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 #company_id>
        <Company v-model="formData.company_id" placeholder="公司" />
      </template>
      <template #card_id>
        <Card v-model="formData.card_id" placeholder="卡类型" />
      </template>
      <template #headname>
        <span>CJ1745</span>
      </template>
      <template #suffix>
        <span>0000~9999</span>
      </template>

      <template #footer>
        <div class="w-full flex justify-end">
          <ElButton type="primary" @click="handleCreate">保存</ElButton>
        </div>
      </template>
    </BasicForm>
  </PageModal>
  <!-- </PageAuth> -->
</template>
