<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 { projectFormConfig } from "./config/_details";
import { projectFormRules } from "./config/_rules";
import {
  BasicForm,
  transform,
  createDefaultData
} from "/@/components/BasicForm";

import addModel from "./cpns/addModel.vue";
import { useResponseHandle } from "/@/hooks/useAsync";
import LadderModal from "./cpns/ladder-modal.vue";
import LadderTable from "./cpns/ladder-table.vue";
import { ComCard } from "/@/components/RemoteSelect";
import OrderDialog from "/@/components/PageListModal";
import { ElForm, ElMessage } from "element-plus";
import PageListModall from "/@/components/PageListModall";
import contentConfig1 from "./config/content.config1";

const responseHandle = useResponseHandle();
const ladderModalRef = ref<InstanceType<typeof LadderModal>>(null);
const pageContentRef = ref<PageContentInstance | null>(null);
const modelRef = ref<InstanceType<typeof OrderDialog>>(null);
const actionModalRef = ref<InstanceType<typeof addModel>>(null);
const { pageModalRef, handleCreateData, handleConfrim, defaultInfo } =
  usePageModal({
    pageContentRef
  });
const { handleResetClick, handleSearchClick } = usePageSearch();
const { formItems } = projectFormConfig;
const PageListModalReff = ref<InstanceType<typeof PageListModall>>(null);
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 { group_id, list } = formData.value;
    const params = {
      group_id,
      list: []
    };
    let isok = true;
    list.forEach(item => {
      const num = Number(item.inventory ?? "");
      const model = {
        good_id: item.id,
        inventory: num
      };
      params.list.push(model);
      if (num === 0) {
        isok = false;
      }
    });
    if (!isok) {
      ElMessage.warning("库存数不能为空！");
      return;
    }

    handleConfrim("create", params);
    // emit("create", params);
  });
}
function Create() {
  pageContentRef.value.getPageData({ id: "" });
}
async function handleDetailData(id, type) {
  actionModalRef.value.onShow("兑换商品库存", type, id);
}
function modularShow() {
  // if (!formData.value.group_id) return ElMessage.warning("请选择公司卡类型！");
  modelRef.value.show("", "2");
}
function handleAddOrder(list) {
  console.log(list);
  list.forEach(item => {
    const { id } = item;
    let findex = formData.value.list.findIndex(e => e.id + "" == id + "");
    if (findex == -1) {
      let model = Object.assign(item, {
        img: item.good_cover_img,
        good_id: item.id,
        jump_type: "2",
        jump_param: `/good?id=${item.id}`,
        style_type: "",
        title: ""
      });
      formData.value.list.push(model);
    }
  });
}
function aa(id) {
  console.log(PageListModalReff);
  PageListModalReff.value.show(id);
  // console.log(id);
}
</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="({ id }) => handleDetailData(id, 'preview')"
    @update-btn-click="({ id }) => handleDetailData(id, 'update')"
    @log-btn-click="({ id }) => aa(id)"
  />
  <PageListModal2 ref="PageListModalReff" :modal-config="contentConfig1" />
  <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 #list>
        <LadderTable
          :readonly="false"
          :ladder="formData.list"
          @choose="() => modularShow()"
          @update="({ data, index }) => ladderModalRef.onDisplay(data, index)"
          @delete="index => formData.list.splice(index, 1)"
        />
      </template>
      <template #footer>
        <div class="w-full flex justify-end">
          <ElButton type="primary" @click="handleCreate">保存</ElButton>
        </div>
      </template>
    </BasicForm>
  </PageModal>

  <OrderDialog ref="modelRef" @save-btn-click="handleAddOrder" />
  <addModel ref="actionModalRef" @submitOk="Create" />
  <!-- </PageAuth> -->
</template>
