import React from 'react';

import Wrap from '../wrap/Wrap';
import Icon from '../../Icon/index';
import { returnClass } from '../unit';
import { Cascader } from 'antd';
import '../g.scss';

function LabelCascader(props: IProps) {
    const {
    title,
    selectList = [],
    change,
    size = 'normal',
    value,
    paddingSize,
    wrapStyle = { padding: '6px 20px 6px 20px' },
    padding,
    suffixIcon,
    width=32
  } = props;
  return (
    <Wrap wrapStyle={wrapStyle}>
      {title ? (
        <div
          className={returnClass(paddingSize ? paddingSize : 'normal')}
          style={{ marginRight: paddingSize ? '' : padding }}
        >
          {title}
        </div>
      ) : (
        <></>
      )}
      <div
        className={
          size === 'normal'
            ? 'zl-large-screen-setting-unit-content'
            : 'zl-large-screen-setting-unit-content-large'
        }
      >
                <Cascader
          allowClear={false}
          value={value}
          style={{ width: width, height: 32 }}
          suffixIcon={<Icon name={suffixIcon} />}
          popupClassName="zl-ls-setting-cascader"
          options={selectList}
          placement="bottomLeft"
          onChange={(value, selectedOptions) => change(value, selectedOptions)}
          changeOnSelect
        />
      </div>
    </Wrap>
  );
}

export default LabelCascader;

export interface IProps {
  title: string | number;
  selectList: ISelectList[];
  change: Function;
  size: string;
  value?: string | number;
  paddingSize?: string;
  wrapStyle?: React.CSSProperties;
  padding?: number;
  suffixIcon?: string;
  width?: number;
}

export interface ISelectList {
  code: number | string;
  name: string | number;
  children: ISelectList[];
}