<script setup lang="ts">
import { ref } from "vue";
import { usePermission } from "/@/hooks/usePermission";

import { PageSearch, usePageSearch } from "/@/components/PageSearch";
import { PageContent } from "/@/components/PageContent";
import searchConfig from "./config/search.config";
import contentConfig from "./config/content.config";
import EditModel from "./components/edit-dialog.vue";
import AddModel from "./components/add-dialog.vue";
import ListModalConfig from "./config/ListModal.config";
// import { PageModal, usePageModal } from "/@/components/PageModalShell";
// import modalConfig from "./config/modal.config";

// import { projectFormConfig } from "./config/_details";
// import { projectFormRules } from "./config/_rules";

// import {
//   BasicForm,
//   transform,
//   createDefaultData
// } from "/@/components/BasicForm";

// import addModel from "./components/addModel.vue";
// import { useResponseHandle } from "/@/hooks/useAsync";
// import LadderTable from "./components/ladder-table.vue";
// import { ComCard } from "/@/components/RemoteSelect";
// import OrderDialog from "/@/components/PageListModal";
// import { ElForm, ElMessage } from "element-plus";
import ListModal from "/@/components/ListModal";
const pageName = "shopStock";
const { hasPermissionWithCode, permissions } = usePermission(pageName);
const modelEditRef = ref<InstanceType<typeof EditModel>>(null);
const modelAddRef = ref<InstanceType<typeof AddModel>>(null);
// const responseHandle = useResponseHandle();
// const modelOrderRef = ref<InstanceType<typeof OrderDialog>>(null);
// const actionModalRef = ref<InstanceType<typeof addModel>>(null);
const { pageContentRef, handleResetClick, handleSearchClick } = usePageSearch(
  undefined,
  undefined,
  searchConfig
);
// const { pageModalRef, handleCreateData, handleConfrim, defaultInfo } =
//   usePageModal({
//     pageContentRef
//   });
const ListModalRef = ref<InstanceType<typeof ListModal>>(null);
// 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 { 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);
//   });
// }
// async function handleDetailData(id, type) {
//   actionModalRef.value.onShow("兑换商品库存", type, id);
// }
// function modularShow() {
//   if (!formData.value.group_id) return ElMessage.warning("请选择公司卡类型！");
//   modelOrderRef.value.show(formData.value.group_id, "1");
// }
// 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 showLog(id) {
  console.log(id);
  ListModalRef.value.show(id);
}
function handleAddChangeCheck(item: any, id: string, type: string) {
  if (type === "create") {
    modelAddRef.value.show(item, id, type);
  } else {
    modelEditRef.value.show(item, id, type);
  }
}
</script>

<template>
  <PageAuth :pageName="pageName">
    <PageSearch
      :form-config="searchConfig"
      @search-btn-click="handleSearchClick"
      @reset-btn-click="handleResetClick"
    >
      <template #action>
        <el-button
          type="primary"
          @click="handleAddChangeCheck({}, '', 'create')"
          v-if="hasPermissionWithCode('002')"
        >
          新增
        </el-button>
      </template>
    </PageSearch>
    <PageContent
      ref="pageContentRef"
      :powers="permissions"
      :content-config="contentConfig"
      @preview-btn-click="row => handleAddChangeCheck(row, row.id, 'view')"
      @update-btn-click="row => handleAddChangeCheck(row, row.id, 'edit')"
      @log-btn-click="({ id }) => showLog(id)"
    />

    <!-- <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 #group_id>
          <ComCard v-model="formData.group_id" placeholder="公司卡类型" />
        </template>
        
        <template #list>
          <LadderTable
            :readonly="false"
            :ladder="formData.list"
            @choose="() => modularShow()"
            @update="({ data, index }) => formData.list.splice(index, 1)"
            @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> -->
    <AddModel ref="modelAddRef" @reload="pageContentRef.onSearch()" />
    <EditModel ref="modelEditRef" @reload="pageContentRef.onSearch()" />
    <!-- <OrderDialog ref="modelOrderRef" @save-btn-click="handleAddOrder" /> -->
    <!-- <addModel ref="actionModalRef" @submitOk="Create" /> -->
    <ListModal ref="ListModalRef" :modalConfig="ListModalConfig" />
  </PageAuth>
</template>
