import {
  DataSheetGrid,
  DynamicDataSheetGrid,
  checkboxColumn,
  textColumn,
  keyColumn, columnsBuild
} from 'react-datasheet-grid-teams/dist';
import 'react-datasheet-grid-teams/dist/style.css'


const [data, setData] = useState(Array.from(
    {
      length: 4,
    },
    (_, key) => ({
      key,
      text: '测试文字',
      select_multiple_option: [4],
      button: [{
        value: '按钮1',
        onClick: () => {
          alert('点击了第' + (key + 1) + '行的[按钮1]');
        },
      }, {
        value: '按钮2',
        style: {
          borderRadius: '5px',
          color: 'white',
          backgroundColor: '#007AEB',
          padding: '0 16px',
          lineHeight: '28px',
          fontSize: '12px',
          height: '28px',
        },
        render: ({ disabled, value, style, className }) => {
          return <span style={{
            ...style,
            ...(disabled ? {
              backgroundColor: '#888'
            } : {})
          }} className={className} onClick={() => {
            if (!disabled) {
              alert(`点击了第${key + 1}行的[${value}]`);
            }
          }}>{value}</span>
        }
      }],
      select: 4,
      select2: 1,
      number: 0.1,
      selectOptions: {
        select: async (val) => {
          console.log('onSearch', val);
          await sleep();
          return [
            { label: '张三', tag: "5566", value: '3', avatar: '331dc7e65cdc5674c139bbb1f68f5940738757a90581387891c9e4c5678ca1920ed669d1/2.png' },
            { label: '李四', value: '4', avatar: '331dc7e65cdc5674c139bbb1f68f5940738757a90581387891c9e4c5678ca1920ed669d1/2.png' },
            { label: '王五', value: '5', avatar: '331dc7e65cdc5674c139bbb1f68f5940738757a90581387891c9e4c5678ca1920ed669d1/2.png' },
            { label: '赵六', value: '6', avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg' },
          ]
        },
        select_multiple_option: [{
          value: '1',
          label: '选项一',
        }, {
          value: '2',
          label: '选项二',
        }, {
          value: '3',
          label: '选项三',
        }],
        user10: async (val) => {
          console.log('onSearch', val);
          await sleep();
          return [
            { label: '张三', value: '3', avatar: '331dc7e65cdc5674c139bbb1f68f5940738757a90581387891c9e4c5678ca1920ed669d1/2.png' },
            { label: '李四', value: '4', avatar: '331dc7e65cdc5674c139bbb1f68f5940738757a90581387891c9e4c5678ca1920ed669d1/2.png' },
            { label: '王五', value: '5', avatar: '331dc7e65cdc5674c139bbb1f68f5940738757a90581387891c9e4c5678ca1920ed669d1/2.png' },
            { label: '赵六', value: '6', avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg' },
          ]
        }
      },
      tags: ['foo', 'tag'],
    }),
  ))
  const disabled = [0, 3];
  const disabledCol = true;
  const columns = [
    {
      title: '',
      key: 'checkbox',
      type: 'checkbox',
      maxWidth: 80,
      minWidth: 80,
      align: 'center',
      defaultValue: true,
    },
    {
      title: '默认文本输入',
      minWidth: 160,
      key: 'text',
      // disabled: disabled,
    },
    // {
    //   title: '多行输入',
    //   // disabled: disabled,
    //   type: 'text_multiple',
    //   key: '666'
    //   // disabled: true
    // },
    {
      title: '标题右置',
      align: 'right',
      minWidth: 160,
      // disabled: disabled,
    },
    {
      title: '标题居中',
      align: 'center',
      minWidth: 160,
      // disabled: disabled,
    },
    {
      title: '文本输入文本（禁用整列）',
      align: 'left',
      minWidth: 240,
      key: 'textColDisable',
      disabled: disabledCol,
    },
    // {
    //   title: '单选',
    //   type: 'radio',
    //   align: 'left',
    //   disabled: disabled,
    // },
    // {
    //   title: '时间',
    //   type: 'date',
    //   key: 'date',
    //   disabled: disabled,
    //   defaultValue: Date.now(),
    // },
    {
      disabled: disabled,
      title: '数字',
      type: 'number',
      key: 'number',
    },
    // {
    //   disabled: disabled,
    //   title: '数字（自定义的错误文案）',
    //   type: 'number',
    //   key: 'number1',
    //   minWidth: 240,
    //   error: '自定义的错误文案'
    // },
    {
      title: '多选',
      disabled: disabled,
      key: 'select_multiple_option',
      type: 'select_multiple',
      isSkip: "https://www.baidu.com",
      // options: [
      //   { label: '张三', tag: [{ text: "55613236", color: "red" }, { text: "55613236", color: "red" }], value: 3, avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg' },
      //   { label: '赵六', value: 6, avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg' },
      //   { label: '王五1', value: 7, avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg' },
      //   { label: '赵六1', value: 8, avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg' },
      // ],
      options: async (val) => {
        console.log('onSearch', val);
        await sleep();
        if (val) {
          return [
            { label: '张三', tag: [{ text: "55613236", color: "red" }, { text: "55613236", color: "red" }], value: 3, avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg' },
            { label: '赵六', value: 6, avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg' },
            { label: '王五1', value: 7, avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg' },
            { label: '赵六1', value: 8, avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg' },
          ]
        } else {
          return [
            { label: '张三', tag: [{ text: "55613236", color: "red" }, { text: "55613236", color: "red" }], value: 3, avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg' },
            { label: '李四', value: 4, avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg' },
            { label: '王五', value: 5, avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg' },
            { label: '赵六', value: 6, avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg' },
          ]
        }
      },
      // options: [{
      //   value: '1',
      //   label: '选项一',
      //   // tag: [{ text: "55613236", color: "red" }, { text: "55613236", color: "red" }],
      //   // avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg'
      // }, {
      //   value: '2',
      //   label: '选项二',
      //   // tag: [{ text: "55613236", color: "red" }],        
      //   // avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg'
      // }, {
      //   value: '3',
      //   label: '选项三',
      //   // tag: [{ text: "55613236", color: "red" }, { text: "55613236", color: "red" }],
      //   // avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg'
      // }]
    },
    {
      disabled: disabled,
      title: '单选框',
      type: 'select',
      key: 'select',
      isSkip: "https://www.baidu.com",
      // dataLinkage: true,
      options: async (val) => {
        console.log('onSearch', val);
        await sleep();
        if (val) {
          return [
            { label: '张三', tag: [{ text: "55613236", color: "red" }, { text: "55613236", color: "red" }], value: 3, avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg' },
            { label: '赵六', value: 6, avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg' },
            { label: '王五1', value: 7, avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg' },
            { label: '李四', value: 4, avatar: '331dc7e65cdc5674c139bbb1f68f5940738757a90581387891c9e4c5678ca1920ed669d1/2.png' },
            { label: '赵六1', value: 8, avatar: '331dc7e65cdc5674c139bbb1f68f5940738757a90581387891c9e4c5678ca1920ed669d1/2.png' },
          ]
        } else {
          return [
            { label: '张三二纺机而你呢张三二纺机而你呢家你可能人福科技呢开金额为i卫计局嗯可能问客服你看我男妇科人张三二纺机而你呢家你可能人福科技呢开金额为i卫计局嗯可能问客服你看我男妇科人张三二纺机而你呢家你可能人福科技呢开金额为i卫计局嗯可能问客服你看我男妇科人张三二纺机而你呢家你可能人福科技呢开金额为i卫计局嗯可能问客服你看我男妇科人张三二纺机而你呢家你可能人福科技呢开金额为i卫计局嗯可能问客服你看我男妇科人张三二纺机而你呢家你可能人福科技呢开金额为i卫计局嗯可能问客服你看我男妇科人家你可能人福科技呢开金额为i卫计局嗯可能问客服你看我男妇科人家呢客服呢看你看人呢付款呢可能人家福建姐姐姐夫减肥减肥减肥减肥经济法减肥减肥减肥减肥减肥经济法减肥减肥减肥经济法减肥减肥姐姐房间你看人可能热客服呢热裤男妇科男妇科男妇科玖恩开房间呢可能付款人复垦烤肉饭呢可能妇科让你看吩咐金额你呢哦麻烦了妮妮v呢女卡农讹你呢看女警嗯看到开镜女款的你房间号v任课教师看见你哭v几男几女缝纫机', tag: [{ text: "55613236", color: "red" }, { text: "55613236", color: "red" }], value: '3', avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg' },
            { label: '李四', value: 4, avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg' },
            { label: '王五', value: 5, avatar: '331dc7e65cdc5674c139bbb1f68f5940738757a90581387891c9e4c5678ca1920ed669d1/2.png' },
            { label: '赵六', value: 6, avatar: '331dc7e65cdc5674c139bbb1f68f5940738757a90581387891c9e4c5678ca1920ed669d1/2.png' },
          ]
        }
      },
      // options: [{
      //   value: '1',
      //   label: '选项一',
      //   // tag: [{ text: "55613236", color: "red" }, { text: "55613236", color: "red" }],
      //   avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg'
      // }, {
      //   value: '2',
      //   label: '选项二',
      //   // tag: [{ text: "55613236", color: "red" }],        
      //   avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg'
      // }, {
      //   value: '3',
      //   label: '选项三',
      //   // tag: [{ text: "55613236", color: "red" }, { text: "55613236", color: "red" }],
      //   avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg'
      // }]
    },
    {
      disabled: disabled,
      title: '单选框',
      type: 'select',
      key: 'select2',
      isSkip: "https://www.baidu.com",
      // dataLinkage: true,
      options: [{
        value: '1',
        label: '选项一',
        // tag: [{ text: "55613236", color: "red" }, { text: "55613236", color: "red" }],
        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg'
      }, {
        value: '2',
        label: '选项二',
        // tag: [{ text: "55613236", color: "red" }],        
        avatar: '331dc7e65cdc5674c139bbb1f68f5940738757a90581387891c9e4c5678ca1920ed669d1/2.png'
      }, {
        value: '3',
        label: '选项三',
        // tag: [{ text: "55613236", color: "red" }, { text: "55613236", color: "red" }],
        avatar: '331dc7e65cdc5674c139bbb1f68f5940738757a90581387891c9e4c5678ca1920ed669d1/2.png'
      }]
    },
    // {
    //   disabled: disabled,
    //   title: '标签',
    //   key: 'tags',
    //   type: 'tag',
    // },
    // {
    //   title: '人员',
    //   disabled: disabled,
    //   key: 'user10',
    //   type: 'user',
    //   onSearch: async (val) => {
    //     console.log('onSearch', val);
    //     await sleep();
    //     return [
    //       { label: '张三', value: '3' },
    //       { label: '李四', value: '4' },
    //       { label: '王五', value: '5' },
    //       { label: '赵六', value: '6' },
    //     ]
    //   }
    // },
    // {
    //   title: '按钮',
    //   disabled: disabled,
    //   type: 'button',
    //   key: 'button',
    //   minWidth: 200
    // },
    {
      title: '多行输入',
      // disabled: disabled,
      type: 'text_multiple',
      key: '6668',
      // wordLimit: 15,
      // disabled: true
    },
    {
      title: '多行输入2',
      // disabled: disabled,
      type: 'text_multiple',
      key: '66682',
      wordLimit: 15,
      // disabled: true
    },
    {
      title: '多行输入3',
      // disabled: disabled,
      type: 'text_multiple',
      key: '66683',
      // wordLimit: 15,
      // disabled: true
    },
    // {
    //   title: '默认文本输入',
    //   minWidth: 160,
    //   key: 'text2',
    //   // disabled: disabled,
    // },
  ]

   <DynamicDataSheetGrid
    value={data}
    onChange={onChange}
    columns={columnsBuild(columns)}
    height={400}
    rowHeight={80}
    gutterColumn={false}
    addRowsComponent={false}
    // File web domain
    publicPath={'url'}
  />