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

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

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

  return (
    <>
      <div
        onClick={() => {
          setVisible(true);
        }}
        style={{ color: value ? '' : '#b2b2b2' }}
      >
        {showLabel}
      </div>
      <Picker
        columns={basicColumns}
        visible={visible}
        onClose={() => {
          setVisible(false);
        }}
        value={value}
        onConfirm={(value, { items }) => {
          console.log(value, items);
          setShowLabel(items[0]?.label);
          onChange?.(value[0]);
        }}
      />
    </>
  );
};
export default XSelect;