/**
 * @Classname ConfigListPage
 * @Description TODO
 * @Date 2019/8/22 10:26
 * @Created by Administrator
 */

import React from 'react';
import * as PropTypes from 'prop-types';
import { Button, Form, Input, List, Pagination, Tag } from 'antd';
import { connectAlita } from 'redux-alita';
import AddConfigForm from './widget/AddConfigForm';
import TuonSelect from '../../components/widget/TuonSelect';
import ConfigSearchForm from './widget/ConfigSearchForm';


class ConfigListPage extends React.Component {

    static propTypes = {
        configPage: PropTypes.object,
        fData: PropTypes.object,
    };

    static defaultProps = {
        configPage: { data: {}, isFetching: false },
        fData: { data: {} },
    };

    constructor(props) {
        super(props);
        this.state = {
            addModalVisible: false,
            currentConfig: undefined,
            keywords: undefined,
        };
        this.params = {
            page: 1,
            pageSize: 10,
            application: undefined,
            profile: undefined,
            label: undefined,
            'key': undefined,
        };
    }


    // eslint-disable-next-line react/sort-comp
    _queryConfigList(refresh = false) {
        if (refresh) {
            this.params = {
                page: 1,
                pageSize: 10,
            };
        }
        let params = { params: this.params };
        this.props.setAlitaState({ funcName: 'configQueryConfigList', params, stateName: 'configPage' })
            .then(resp => {
                console.log('resp=>', resp);
            })
            .catch(e => {
                console.log('queryConfigList err =>', e);
            });
    }


    componentDidMount() {
        this._queryConfigList(true);
    }

    renderListItem(item) {
        return (<List.Item className="list-item" key={item.id}>
            <div style={{ fontSize: 18, color: '#333' }}>{item.key}</div>
            <div style={{ fontSize: 15, color: '#666', marginTop: 5 }}>{item.value}</div>
            <div style={{ fontSize: 15, color: '#666', marginTop: 5 }}>{item.desc}</div>
            <div className="item-footer">
                <Tag color="red">{item.application ? item.application : '通用'}</Tag>
                <Tag color="volcano">{item.profile}</Tag>
                <Tag color="orange">{item.label}</Tag>
                <div style={{ flex: 1 }}/>
                <Button size="small" htmlType="button" icon="edit" onClick={() => {
                    this.setState({ currentConfig: { ...item }, addModalVisible: true });
                }}
                />
                <Button size="small" htmlType="button" icon="delete"/>
            </div>

        </List.Item>);
    }

    render() {

        let { data: listPage, isFetching } = this.props.configPage || {data:{current: 1, pageSize: 10, total: 0 }};

        if (!listPage.total){
            listPage.total =0;
            listPage.current =1;
            listPage.size =10;
        }

        console.log('listPage->',listPage);

        return (<div className="component-container">
            <div className="headerLine">
                <ConfigSearchForm onRefresh={this._queryConfigList.bind(this)}
                                  onAdd={() => this.setState({ currentConfig: undefined, addModalVisible: true })}
                                  onSearch={values=>{
                                      this.params={...values};
                                      this._queryConfigList(false);
                                  }}
                                  loading={isFetching}
                                  fData={this.props.fData.data}
                />


            </div>
            <List dataSource={listPage.records}
                  size="small" bordered
                  renderItem={this.renderListItem.bind(this)}
            />

            <Pagination className="pagination-footer"
                        pageSize={listPage.size}
                        current={listPage.current}
                        total={listPage.total}/>

            <AddConfigForm onCancel={() => this.setState({ addModalVisible: false, currentConfig: undefined })}
                           onRefresh={() => this._queryConfigList(true)}
                           config={this.state.currentConfig}
                           visible={this.state.addModalVisible}
            />

        </div>);

    }


}


export default connectAlita(['configPage', 'fData'])(ConfigListPage);
