<script setup lang="ts">
import { reactive, ref, unref } from "vue";
import { httpList } from "/@/api/parameter/good";
import { httpList as httpGroupList } from "/@/api/operate/setComGood";

import { PageSearch, usePageSearch } from "/@/components/PageSearch";
import searchFormConfig from "./search.config";
import { responseHandle } from "/@/utils/responseHandle";
import { useNav } from "/@/layout/hooks/useNav";
import { ElMessage } from "element-plus";
import { useColumns } from "./columns";

const { columns } = useColumns();
const { logout } = useNav();
const showModel = ref(false);
const loading = ref(false);
const dataList = ref([]);
const tableRef = ref();
const handleSelection = ref([]);
const initform = {
  page: 1,
  size: 10
};

const pagination = reactive({
  total: 0,
  pageSize: 10,
  currentPage: 1,
  background: true
});

const emit = defineEmits(["reload", "save-btn-click"]);
let otherParams: Record<any, any> = {};
const ruleForm = ref({ ...initform });
const group_id = ref("");
const good_type = ref("");
const { handleSearchClick, handleResetClick } = usePageSearch(
  params => {
    otherParams = params;
    onSearch();

    return {
      result: {},
      deleteProps: []
    };
  },
  () => {
    otherParams = {};
    onSearch();
  }
);

const handleCurrentChange = (current: number) => {
  ruleForm.value.page = current;
  onSearch();
};

function handleReset() {
  ruleForm.value = { ...initform };
  // handleResetClick();
}

async function show(_group_id, type = "") {
  showModel.value = true;
  group_id.value = _group_id;
  good_type.value = type;

  await onSearch();
}

function handleSelectionChange(val) {
  handleSelection.value = val;
}

//列表展示
async function onSearch() {
  loading.value = true;
  let res = {};
  const model = {
    group_id: group_id.value,
    type: good_type.value,
    status: "1",
    ...otherParams,
    ...ruleForm.value
  };
  if (group_id.value === "") {
    res = await httpList(model);
  } else {
    res = await httpGroupList(model);
  }
  //
  const { code, data, message } = res;

  responseHandle({
    code,
    message,
    logout,
    handler: () => {
      const { list, count } = data ?? {};
      dataList.value = list ?? [];
      pagination.total = count ?? 0;
      pagination.pageSize = ruleForm.value.size;
      pagination.currentPage = ruleForm.value.page;
    }
  });
  loading.value = false;
}

function handleConfirm() {
  const selectList = unref(handleSelection);
  if (selectList.length === 0) return ElMessage.error("至少选择一个商品！");
  emit("save-btn-click", selectList);
  showModel.value = false;
}

defineExpose({
  show
});
</script>

<template>
  <el-dialog
    v-model="showModel"
    :close-on-press-escape="false"
    center
    append-to-body
    destroy-on-close
    top="5vh"
    title="添加商品"
    :width="'1040px'"
  >
    <div relative>
      <!-- <PageSearch
        class="search"
        @reset-btn-click="handleReset"
        @search-btn-click="handleSearchClick"
        :form-config="searchFormConfig"
      /> -->
      <div v-loading="loading">
        <PureTable
          ref="tableRef"
          border
          align="left"
          row-key="id"
          table-layout="auto"
          :size="'small'"
          :data="dataList"
          :columns="columns"
          :pagination="pagination"
          :paginationSmall="true"
          :header-cell-style="{ background: '#fafafa', color: '#606266' }"
          @selection-change="handleSelectionChange"
          @current-change="handleCurrentChange"
        />
      </div>

      <el-button
        absolute
        bottom-0px
        right="20px"
        type="primary"
        @click="handleConfirm"
        size="small"
        >保存</el-button
      >
    </div>
  </el-dialog>
</template>

<style lang="scss" scoped>
:deep(.el-pagination) {
  justify-content: flex-start !important;
}

.search {
  padding: 0px !important;
}
</style>
