import React, { useState, useCallback } from "react";
import { Tabs, Table } from "antd";
import { useData, useActions, useCommit } from "@ttk/app-loader";
const { TabPane } = Tabs;

export default function TableCom(props) {
  const commit = useCommit();
  const actions = useActions(props);
  const { tempData } = useData([props, "invoiceSelect"]).toJS();
  const { incomeData } = useData([props, "incomeData"]).toJS();
  var dataSource = tempData.list;
  var incomeSource = incomeData.list;
  const columns = [
    {
      title: "发票类型",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "份数",
      dataIndex: "value",
      key: "value",
    },
    {
      title: "价税合计",
      dataIndex: "sum",
      key: "sum",
    },
  ];
  function changeTabs(key) {
    console.log(key);
  }
  return (
    <Tabs
      defaultActiveKey="1"
      onChange={(e) => {
        changeTabs(e);
      }}
      className="tabs-style"
    >
      <TabPane tab="销项" key="1">
        <Table
          dataSource={dataSource}
          columns={columns}
          pagination={false}
          bordered={true}
          rowKey={record=>record.name}
        />
      </TabPane>
      <TabPane tab="进项" key="2">
        <Table
          dataSource={incomeSource}
          columns={columns}
          pagination={false}
          bordered={true}
          rowKey={record=>record.name}
        />
      </TabPane>
    </Tabs>
  );
}
