import { PickerValue } from 'antd-mobile/es/components/picker';
import React, { useEffect, useState } from 'react';
import { CascadePicker, Picker } from 'antd-mobile';

interface TreeSelectProps {
  value?: PickerValue[];
  onChange?: (value: any) => void;
  label: string;
  basicColumns: any[];
}

export const TreeSelect: React.FC<TreeSelectProps> = ({
  value,
  onChange,
  label,
  basicColumns,
}) => {
  const [visible, setVisible] = useState(false);
  const [showLabel, setShowLabel] = useState<any>('请选择' + label);
  useEffect(() => {
    if (value) {
      const label = basicColumns?.filter((item) => {
        return item.value === value;
      })[0]?.label;
      if (label) {
        setShowLabel(label);
      }
    }
  }, [value]);

  return (
    <>
      <div
        onClick={() => {
          setVisible(true);
        }}
        style={{ color: value ? '' : '#b2b2b2' }}
      >
        {showLabel}
      </div>
      <CascadePicker
        options={basicColumns}
        visible={visible}
        onClose={() => {
          setVisible(false);
        }}
        value={value}
        onConfirm={(value, { items }) => {
          setShowLabel(items[1]?.label);
          onChange?.((value[1] as string).split("-")[1]);
        }}
      />
    </>
  );
};
export default TreeSelect;
