import React, { useState } from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { OPTable, OPLabel } from '../../src/index';

export default {
  title: '组件/数据展示/OPTable',
  component: OPTable,
} as ComponentMeta<typeof OPTable>;

export const 表格: ComponentStory<typeof OPTable> = (): JSX.Element => {
  const columns = [
    {
      key: 'itemCode',
      name: '运单号',
      render: 'code',
      width: '20%',
      align: 'right',
      options: {
        lenLimit: 10,
        hightlightNum: 6,
      },
    },
    { key: 'itemName', name: '商品名称', render: 'name' },
    { key: 'pkStatus', name: '包装状态', render: 'pkStatus' },
    {
      key: 'originalOrder',
      name: '原订单',
      render(value: string) {
        return value.slice(0, 10);
      },
    },
    {
      key: 'receiveNum',
      name: '已收（件）',
      align: 'right',
    },
    {
      key: 'refuseNum',
      name: '拒收（件）',
      align: 'right',
    },
  ];

  const dataSource = [
    {
      detailId: 9794215,
      itemCode: 'Barcode16597124109830490',
      pkStatus: '破损',
      itemName: '测试商品16597124109827417',
      originalOrder: 'Barcode16597124109830490',
      receiveNum: '0',
      refuseNum: '0',
      selected: false,
      tagList: [
        {
          children: '新',
          type: 'success',
        },
        {
          children: 'SN',
          type: 'warning',
        },
      ],
      snList: [1234567, 7654321],
    },
    {
      detailId: 9794215,
      itemCode: 'Barcode16597124109830490',
      pkStatus: '破损',
      itemName: '测试商品16597124109827417',
      originalOrder: 'Barcode16597124109830490',
      receiveNum: '0',
      refuseNum: '0',
      selected: true,
      tag: '新',
    },
    {
      detailId: 9794215,
      itemCode: 'Barcode16597124109830490',
      pkStatus: '破损',
      itemName: '测试商品16597124109827417',
      originalOrder: 'Barcode16597124109830490',
      receiveNum: '0',
      refuseNum: '0',
      selected: false,
      tag: '新',
    },
    {
      detailId: 9794215,
      itemCode: 'Barcode16597124109830490',
      pkStatus: '破损',
      itemName: '测试商品16597124109827417',
      originalOrder: 'Barcode16597124109830490',
      receiveNum: '0',
      refuseNum: '0',
      selected: false,
      tag: '新',
    },
    {
      detailId: 9794215,
      itemCode: 'Barcode16597124109830490',
      pkStatus: '破损',
      itemName: '测试商品16597124109827417',
      originalOrder: 'Barcode16597124109830490',
      receiveNum: '0',
      refuseNum: '0',
      selected: false,
      tag: '新',
    },
  ];

  return (
    <div>
      <OPTable.Count
        dataSource={[
          {
            label: '完成数量',
            value: '1/6',
            balloon: {
              children: '完成数量提示',
            },
          },
          {
            label: '完成数量',
            value: '1/6',
            onClick: () => {
              alert(1);
            },
          },
        ]}
      ></OPTable.Count>
      <OPTable.Title>
        <div>
          运单号: <OPLabel label='123213213'></OPLabel>
        </div>
        <div>订单号: 12321321321</div>
      </OPTable.Title>
      <OPTable
        columns={columns}
        dataSource={dataSource}
        onRowClick={(item, index) => {
          // eslint-disable-next-line no-alert
          alert(`你点击了第${index + 1}行`);
        }}
      ></OPTable>
      <OPTable.Group
        name='这是一个group'
        extra='extra字段'
        defaultVisible
        indent={50}
        onClick={(v) => console.log(v)}
      >
        <OPTable columns={columns} dataSource={dataSource} />
      </OPTable.Group>
    </div>
  );
};