import React, {Component} from 'react';
import {Select} from 'antd';
import {observer} from 'mobx-react';
import { sites } from '../../libs/ht';

class SiteSelect extends Component {
    constructor(props) {
        super(props);
    }


    render() {
      const { store, mode, value, onChange, show_all, ...extProps } = this.props;
      const _mode = mode || store?.group_select_mode || null;
      const _show_all = ['tags', 'multiple'].includes(_mode) ? false : show_all;
      const __value = ['tags', 'multiple'].includes(_mode) ? (value?.constructor === Object ? [value] : value) : undefined;
      const _value = !['tags', 'multiple'].includes(_mode)
        ? value || store?.webcode || undefined
        : (__value || store?.webcode || []).filter((item) => String(item?.value || item.key).toLowerCase() !== 'all');
      return (
            <div>
                <Select
                    mode={_mode}
                    style={{width: '100%'}}
                    placeholder="所有来源"
                    value={_value}
                    onChange={(value) => {
                      if (typeof onChange === 'function') {
                        onChange(value);
                      }
                      store?.handleChange_webcode(value);
                    }}
                    labelInValue={false}
                    maxTagCount={1}
                    maxTagPlaceholder={(omittedValues) => ` +${omittedValues.length}...`}
                    allowClear={_mode != null}
                    {...extProps}
                >
                    {_show_all===true ? <Select.Option key="ALL" value="ALL">所有来源</Select.Option> : ''}
                    {sites.map(ele => <Select.Option key={ele.code} value={ele.code}>{ele.label}</Select.Option>)}
                </Select>
            </div>
        );
    }
}

export default observer(SiteSelect);