import React, { useEffect, useState } from 'react';
import { Picker } from 'antd-mobile';

export type XSelectSProps = {
  onChange?: any;
  value?: any;
  label: any;
  attr: any;
  // 级联框数据
  options: any[];
  selectsItemCheck: any;
};

/**
 * 说明：级联选择框
 * 创建人：JoeCdy
 * 创建时间：2022/7/11
 */
const XSelectS: React.FC<XSelectSProps> = (props) => {
  const {
    label,
    attr,
    value,
    onChange,
    options = [],
    selectsItemCheck,
  } = props;
  const [visible, setVisible] = useState(false);
  // 选中显示文字
  const [showText, setShowText] = useState('');
  useEffect(() => {
    for (const row of options) {
      if (row.value === value) {
        setShowText(row.label);
        break;
      }
    }
  }, [value]);

  return (
    <div id={'XSelectS'}>
      <>
        <div
          onClick={() => setVisible(true)}
          style={{ color: value ? '' : '#b2b2b2' }}
        >
          {value ? showText : '请选择' + label}
        </div>
        <Picker
          columns={[options]}
          visible={visible}
          onClose={() => {
            setVisible(false);
          }}
          value={value}
          onConfirm={(value) => {
            selectsItemCheck(attr.group, attr.groupIndex, value?.[0]);
            onChange?.(value?.[0]);
          }}
        />
      </>
    </div>
  );
};
export default XSelectS;