import React, { Component } from 'react';
import { TiledSelect } from '@beisen/chaos-ui';
export default class extends Component {
    constructor(props) {
        super(props);
        const cmpData = props.cmp_data;
        this.multiple = cmpData.multiple;
        this.handleChange = this.handleChange.bind(this);
    }

    //是数组切不为空的判断
    isArrayNotEmpty(arr) {
        return arr && Array.isArray && arr.length > 0;
    }
    getSource(datasource, depDataSource) {
        return (
            (depDataSource ? depDataSource.dataSourceResults : datasource) || []
        );
    }
    //处理change变化
    handleChange(checkedValue) {
        const { onChange, cmp_data, onFocus } = this.props;
        const { datasource, depDataSource } = cmp_data;
        let obj = {
            text: '',
            value: ''
        };
        //先判断datasource是否为空
        if (!!depDataSource || this.isArrayNotEmpty(datasource)) {
            //判断是否是依赖字段
            let source = this.getSource(datasource, depDataSource);
            let text = '';
            let value = '';
            //再判断当前是单选还是多选
            if (this.multiple) {
                //如果选择的value为空
                if (this.isArrayNotEmpty(checkedValue)) {
                    let textArr = [];
                    let valueArr = [];
                    checkedValue.forEach(item => {
                        let arr = source.filter(dataItem => {
                            return dataItem.value === item;
                        });
                        if (arr.length > 0) {
                            textArr.push(arr[0].text);
                            valueArr.push(arr[0].value);
                        }
                    });

                    text = textArr.join(',');
                    value = valueArr.join(',');
                }
            } else {
                //如果是单选
                source.forEach(item => {
                    if (item.value === checkedValue) {
                        text = item.text;
                        value = item.value;
                        return;
                    }
                });
            }
            obj.text = text;
            obj.value = value;
        }

        onChange && onChange(obj);
        onFocus && onFocus();
    }
    //将value转化成可用的
    formatValue() {
        const { value = '' } = this.props;
        if (this.multiple) {
            return value.split(',');
        }
        return value;
    }
    render() {
        const {
            cmp_data,
            isReadOnly,
            desc,
            required,
            errorMessage
        } = this.props;
        const { multiple, datasource, title, depDataSource } = cmp_data;
        const dataResult =
            (!!depDataSource ? depDataSource.dataSourceResults : datasource) ||
            [];
        const errorMsg = errorMessage && errorMessage.message;
        const TiledProps = {
            required,
            multiple,
            label: title,
            desc,
            readonly: isReadOnly,
            data: dataResult,
            errorMsg,
            checkedValue: this.formatValue(),
            onChange: this.handleChange
        };
        return <TiledSelect {...TiledProps} />;
    }
}