import { BfNestedTable } from '@bud-fe/react-taro-ui';
import { INestedTableColumnsType } from '@bud-fe/react-taro-ui/es/components/bf-nested-table';
import { View } from '@tarojs/components';
import React from 'react';

export default () => {
  const columns: INestedTableColumnsType[] = [
    {
      key: 'numbers',
      title: '门店数',
      width: 276,
      children: [
        { title: '目标', dataIndex: 'target', key: 'target', width: 152 },
        { title: '实际', dataIndex: 'real', key: 'real', width: 124 },
      ],
    },
    {
      key: 'sales',
      title: '销量 (本月)',
      width: 540,
      children: [
        { title: '总签约', dataIndex: 'total', key: 'total', width: 148 },
        { title: '签约高端', dataIndex: 'high', key: 'high', width: 180 },
        { title: '签约超高端', dataIndex: 'super', key: 'super', width: 208 },
      ],
    },
  ];

  const dataSource = [
    {
      key: '1',
      category: '总签约门店',
      data: [
        { id: '1', name: '汇总', target: 34, real: 43, total: 36, high: 954, super: 4284 },
        { id: '2', name: '专营签约', target: 34, real: 43, total: 36, high: 954, super: 4284 },
        { id: '3', name: '专促签约', target: 34, real: 43, total: 36, high: 954, super: 4284 },
        { id: '4', name: '混场包量', target: 34, real: 43, total: 36, high: 954, super: 4284 },
      ],
    },
    {
      key: '2',
      category: '新增签约门店',
      data: [
        { id: '1', name: '汇总', target: 334, real: 443, total: 136, high: 9554, super: 42284 },
        { id: '2', name: '专营签约', target: 364, real: 433, total: 3236, high: 9554, super: 46284 },
        { id: '3', name: '专促签约', target: 374, real: 413, total: 436, high: 9564, super: 41284 },
        { id: '4', name: '混场包量', target: 434, real: 463, total: 736, high: 9254, super: 41284 },
      ],
    },
  ];

  return (
    <>
      <View className="group-title">基础用法</View>
      <BfNestedTable
        rowKey="key"
        category={{ key: 'id', width: 124 }}
        subCategory={{ key: 'name', width: 204 }}
        columns={columns}
        dataSource={dataSource}
        bordered
      />
    </>
  );
};