<template>
  <div class="containe">
    <div class="queryWrap">
      <a-form
        :model="formState"
        name="basic"
        ref="formRef"
        layout="inline"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
        class="ant-row"
      >
        <a-form-item label="商品名称" name="goodsName">
          <a-input v-model:value="formState.goodsName" />
        </a-form-item>
        <a-form-item label="产品编号" name="goodsName">
          <a-input v-model:value="formState.goodsName" />
        </a-form-item>
        <a-form-item label="产品线" name="goodsName">
          <a-input v-model:value="formState.goodsName" />
        </a-form-item>
        <a-form-item label="折扣时间" name="goodsName">
          <a-input v-model:value="formState.goodsName" />
        </a-form-item>
        <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
          <a-button @click="handleReset">重置</a-button>
          <a-button type="primary" @click="getData">查询</a-button>
        </a-form-item>
      </a-form>
    </div>
    <div class="tableWrap">
      <div class="titleWrap">
        <span class="title">商品分类</span>
        <a-button type="primary" @click="handleAdd">新增</a-button>
      </div>
      <a-table :dataSource="dataSource" :columns="columns" :pagination="pagination"> </a-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import { usePagination } from '/@/hooks/myhooks/index';
  import * as GoodsApi from '/@/api/product/goodsApi';
  import { columns } from './schema';

  const formRef = ref();

  const formState = reactive<FormState>({
    goodsName: undefined,
  });

  const dataSource = ref<Goods[]>();

  const getData = () => {
    GoodsApi.search(Object.assign({ pageSize: pagination.pageSize, pageNum: pagination.current }, formState)).then(
      (res) => {
        pagination.total = res.total;
        dataSource.value = res.records;
      },
    );
  };

  const pagination = usePagination(getData);

  const handleReset = () => {
    formRef.value.resetFields();
  };

  const handleAdd = () => {};
</script>

<style lang="less" scoped>
  @import url('/@/style/index.less');
</style>
