import { BfTable } from '@bud-fe/react-taro-ui';
import type { ColumnsType } from '@bud-fe/react-taro-ui/es/components/bf-table';
import { View } from '@tarojs/components';
import React, { useState } from 'react';

const dataSource = [
  {
    id: 1,
    type: '店内执行',
    progress: '未完成',
    time: '22-07-12',
    object: (
      <View>
        共 <text style={{ color: '#FD3C42' }}>10</text> 个对象
      </View>
    ),
  },
  { id: 2, type: '卖进', progress: '已完成', time: '22-07-12' },
  { id: 3, type: '先锋购', progress: '已完成', time: '22-07-12' },
];

export default () => {
  const [editingColumn, setEditingColumn] = useState<ColumnsType>();
  const [editDataSource, setEditDataSource] = useState(dataSource);

  const columns: ColumnsType[] = [
    { title: '分类', dataIndex: 'type', key: 'type', width: 176, fixed: true, borderRight: true },
    { title: '进度', dataIndex: 'progress', key: 'progress', width: 152 },
    { title: '截止时间', dataIndex: 'time', key: 'time', width: 192 },
    { title: '对象', dataIndex: 'object', key: 'object', width: 256 },
  ];

  const editColumns: ColumnsType[] = [
    { title: '分类', dataIndex: 'type', key: 'type', width: 176, fixed: true, borderRight: true },
    { title: '进度', dataIndex: 'progress', key: 'progress', width: 152 },
    {
      title: '截止时间',
      dataIndex: 'time',
      key: 'time',
      width: 200,
      editable: true,
      editType: 'text',
      handleSave: async (record, value, index) => {
        console.log('handleSave', { record, value, index });
        setEditingColumn(undefined);
        setEditDataSource((pre) => {
          pre[index] = record;
          return [...pre];
        });
        return true;
      },
    },
    { title: '对象', dataIndex: 'object', key: 'object', width: 256 },
  ];

  return (
    <>
      <View className="group-title">基础用法</View>
      <BfTable rowKey="id" columns={columns} dataSource={dataSource} />
      <View className="group-title">plain</View>
      <BfTable rowKey="id" plain columns={columns} dataSource={dataSource} />
      <View className="group-title">可编辑&带边框</View>
      <BfTable
        rowKey="id"
        bordered
        columns={editColumns}
        dataSource={editDataSource}
        editingColumn={editingColumn}
        onColumnEdit={(col) => setEditingColumn(col)}
      />
    </>
  );
};