<template>
  <div>
    <page-layout>
      <a-row :gutter="[0,2]">
        <a-col :span="24" style="height: 100%;">
          <a-card style="width: 100%;">
            <!-- <pro-query :searchParam="searchParam" @on-search="search"></pro-query> -->
            <!-- 库存统计列表 -->
            <pro-table  rowKey="id" ref="tableRef" :fetch="fetch" :columns="columns"
              :toolbar="toolbar" :param="state.param" :pagination="pagination">
            </pro-table>
          </a-card>
        </a-col>
      </a-row>
    </page-layout>
  </div>
</template>
<script>
  import {
    message,
    Modal as modal
  } from '@hwork/ant-design-vue';
  import {
    ExclamationCircleOutlined
  } from '@ant-design/icons-vue';
  import {
    page
  } from "@/api/wms/statistics";
  import {
    reactive,
    createVNode,
    ref,
  } from 'vue';

  export default {
    components: {},

    setup() {

      const tableRef = ref()

      const columns = [{
        dataIndex: "index",
        key: "index",
        title: "序号",
        width: 60,
        fixed: 'left',
        align: 'center'
      },
      {
          dataIndex: "sku_code",
          key: "sku_code",
          title: "物料编号",
          width: 150,
        }, {
          dataIndex: "sku_name",
          key: "sku_name",
          title: "物料名称",
          width: 200,
        },
        {
          dataIndex: "sku_qty",
          key: "sku_qty",
          title: "数量",
          width: 100,
        }
      ];

      /// 数据来源 [模拟]
      const fetch = async (param) => {
        var response = await page(param);
        console.log("response", response)
        return {
          total: response.data.total,
          data: response.data.record,
        };
      };

      const pagination = {
        params: {
          pageNum: 1,
          pageSize: 20,
        },
        reportCode: "InventoryInfo",
        // showSizeChanger: true, // 显示可改变每页条数
        // pageSizeOptions: ["10", "20", "50", "100"], // 每页条数选项设置
        showTotal: total => `共 ${total} 条记录`, // 显示总条数
        showSizeChange: (current, pageSize) => (this.params.pageSize = pageSize) // 改变每页条数时更新显示
      };

      const state = reactive({
        selectedRowKeys: [],
        param: {},
      });

      const searchParam = [
        // {
        //   key: "palletCode",
        //   type: "input",
        //   label: "托盘号"
        // },
        // {
        //   key: "projectName",
        //   type: "input",
        //   label: "项目名称"
        // },
      ]

      const search = function(value) {
        console.log("主表查询" + JSON.stringify(value))
        console.log(value)
        state.param = value
        tableRef.value.reload()

      }

      const onSelectChange = selectedRowKeys => {
        state.selectedRowKeys = selectedRowKeys;
      };

      return {
        state,
        fetch,
        search,
        toolbar,
        columns,
        pagination,
        searchParam,
        onSelectChange,
        tableRef,
      };

    }
  }
  // }
</script>
