import { BfTreeSelect } from '@bud-fe/react-taro-ui';
import { View } from '@tarojs/components';
import React, { useState } from 'react';

const treeData = [
  {
    code: '0000100004',
    name: '东南区|BU_SE',
    parentCode: '0000100000',
    level: 1,
    provinceCode: '',
    provinceName: '',
    status: 1,
    updateTime: '2022-05-128',
    subList: [
      {
        code: '0000100026',
        name: '江西北部|Jiangxi_North',
        parentCode: '0000100004',
        level: 2,
        provinceCode: '',
        provinceName: '',
        status: 1,
        updateTime: '2022-05-128',
        subList: [
          {
            uncheckable: true,
            code: '0000105970',
            name: '高安|Gaoan',
            parentCode: '0000100026',
            level: 3,
            provinceCode: '',
            provinceName: '',
            status: 1,
            updateTime: '2022-05-128',
            subList: [
              {
                code: '0000105559',
                name: '高安|Gaoan',
                parentCode: '0000105970',
                level: 4,
                provinceCode: '',
                provinceName: '',
                status: 1,
                updateTime: '2022-05-128',
                subList: [],
              },
            ],
          },
          {
            uncheckable: true,
            code: '0000105972',
            name: '武宁|Wuning',
            parentCode: '0000100026',
            level: 3,
            provinceCode: '',
            provinceName: '',
            status: 1,
            updateTime: '2022-05-128',
            subList: [
              {
                code: '0000105527',
                name: '武宁|Wuning',
                parentCode: '0000105972',
                level: 4,
                provinceCode: '',
                provinceName: '',
                status: 1,
                updateTime: '2022-05-128',
                subList: [],
              },
            ],
          },
          {
            code: '0000105571',
            name: '萍乡|Pingxiang',
            parentCode: '0000100026',
            level: 3,
            provinceCode: '',
            provinceName: '',
            status: 1,
            updateTime: '2022-05-128',
            subList: [
              {
                code: '0000105561',
                name: '萍乡|Pingxiang',
                parentCode: '0000105571',
                level: 4,
                provinceCode: '',
                provinceName: '',
                status: 1,
                updateTime: '2022-05-128',
                subList: [],
              },
            ],
          },
          {
            code: '0000106032',
            name: '黄山|Huangshan',
            parentCode: '0000100026',
            level: 3,
            provinceCode: '',
            provinceName: '',
            status: 1,
            updateTime: '2022-05-128',
            subList: [
              {
                code: '0000105529',
                name: '黄山|Huangshan',
                parentCode: '0000106032',
                level: 4,
                provinceCode: '',
                provinceName: '',
                status: 1,
                updateTime: '2022-05-128',
                subList: [],
              },
              {
                code: '0000105530',
                name: '黄山2|Huangshan2',
                parentCode: '0000106032',
                level: 4,
                provinceCode: '',
                provinceName: '',
                status: 1,
                updateTime: '2022-05-128',
                subList: [],
              },
            ],
          },
          {
            code: '0000106033',
            name: '2黄山|Huangshan',
            parentCode: '0000100026',
            level: 3,
            provinceCode: '',
            provinceName: '',
            status: 1,
            updateTime: '2022-05-128',
            subList: [
              {
                code: '00001055331',
                name: '黄山|Huangshan',
                parentCode: '0000106032',
                level: 4,
                provinceCode: '',
                provinceName: '',
                status: 1,
                updateTime: '2022-05-128',
                subList: [],
              },
            ],
          },
        ],
      },
    ],
  },
];

export default () => {
  const [checkedCodes1, setCheckedCodes1] = useState(['0000105530']);
  const [checkedCodes2, setCheckedCodes2] = useState(['0000105530']);
  const [selectedCodes, setSelectedCodes] = useState(['0000100004']);

  return (
    <>
      <View className="group-title">基础用法</View>
      <BfTreeSelect
        radioMode
        style={{ backgroundColor: 'white' }}
        // sameWidth
        titles={['', '', '', '']}
        showTitles={false}
        data={treeData}
        checkedCodes={checkedCodes1}
        onCheck={(code, node, isLastLevel) => {
          console.log('onCheck: ', { code, node, isLastLevel });
          setCheckedCodes1(code);
        }}
      />
      <BfTreeSelect
        style={{ backgroundColor: 'white' }}
        // sameWidth
        titles={['大渠道', '小渠道', '业态', '子业态']}
        data={treeData}
        checkedCodes={checkedCodes2}
        onCheck={(code, node) => {
          console.log('onCheck: ', { code, node });
          setCheckedCodes2(code);
        }}
        // selectedCodes={selectedCodes}
        // onSelect={(codes) => {
        //   console.log('onSelect: ', codes);
        //   setSelectedCodes(codes);
        // }}
      />
    </>
  );
};