import React from "react";
import {inject, observer} from "mobx-react";
import {Button, Row} from "antd";
import {toJS} from "mobx";
import {
    WeaSearchGroup,
    WeaRightMenu,
    WeaDialog,
    WeaLocaleProvider,
    WeaHelpfulTip,
    WeaTable as WeaTableTest,
    WeaTab, 
    WeaNewScroll,
} from "ecCom";

const getLabel = WeaLocaleProvider.getLabel;

@inject("dataShowStore")
@observer
export default class IndexTestDialog extends React.Component {

    getTest = () => {
        const {dataShowStore} = this.props;
        const {status} = dataShowStore;
        const {testInitDatas} = toJS(status);
        let testTitle = {
            "base": getLabel(82751, "基础设置"),
            "field": getLabel(21903, "字段设置"),
        };
        let group = [];
        for (let key in testInitDatas) {
            let items = [];
            items.push({
                com: (<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@20e39c@integrationDatashow${key}`}>
                    <WeaTableTest ecId={`${this && this.props && this.props.ecId || ''}_WeaTableTest@9ov0tf@integrationDatashow${key}`}
                        columns={this.getColumns()}
                        dataSource={testInitDatas[key]}
                        pagination={false}
                    /></Row>),
                colSpan: 1
            });
            group.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@q1kukj@integrationDatashow${key}`} col={1} needTigger={true} showGroup={true} title={testTitle[key]} items={items}/>);
        }
        return group;
    };

    getColumns = () => {
        let columns = [
            {
                "title":getLabel(511410, "测试项"),
                "dataIndex": "name",
                "key": "name",
                "width": "30%",
                "sorter": true
            },
            {
                "title": getLabel(509969, "测试内容"),
                "dataIndex": "content",
                "key": "content",
                "width": "40%",
                "sorter": true
            },
            {
                "title": getLabel(503912, "测试结果"),
                "dataIndex": "status",
                "key": "status",
                "width": "30%",
                "sorter": true
            }
        ];
        let datas = [];
        columns && columns.forEach(column => {
            if(column['key'] === 'status') {
                datas.push({
                    dataIndex: column['dataIndex'],
                    key: column['key'],
                    sorter: column['sorter'],
                    title: column['title'],
                    width: column['width'],
                    render: (text, record) => {
                        if(text == '1') {
                            return <span style={{color: 'green'}}>√</span>
                        }else if(text == '0') {
                            return <nobr><span style={{color: 'red'}}>×</span>{record.details !== undefined ? <WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@6rft03`} style={{marginLeft: 10}} width={195} title={record.details}/> : ''}</nobr>
                        }else if(text == '2') {
                            return <nobr><span style={{color: '#FAA825'}}>!</span>{record.details !== undefined ? <WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@rw70bp`} style={{marginLeft: 10}} width={195} title={record.details}/> : ''}</nobr>
                        }
                    }
                })
            } else {
                datas.push({
                    dataIndex: column['dataIndex'],
                    key: column['key'],
                    sorter: column['sorter'],
                    title: column['title'],
                    width: column['width'],
                });
            }
        });
        return datas;
    };

    getTable = () => {
        let topinfo = {
            "tab": {
                "datas": [
                    {
                        "title": getLabel(82743, "基础信息"),
                        "key": "base"
                    },
                ],
                "keyParam": "key",
                "selectedKey": "base",
                "advanceHeight": "123"
            }
        };

        if (topinfo && topinfo.tab) {
            return (<WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@d7xt1d`} {...topinfo.tab}/>);
        }
    };

    getButtons = () => {
        const {dataShowStore} = this.props;
        const {dataShowFormHiddenFields} = toJS(dataShowStore.status);
        let id = dataShowFormHiddenFields.id || "";
        let buttoninfo = [
            {
                "btnName": getLabel(501169, "编辑"),
                "btnType": "primary",
                "type": "BTN_EDIT"
            }
        ];

        let btnArr = [];
        buttoninfo && buttoninfo.forEach(b => {
            btnArr.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@exvmf4@integrationDatashowButton${b.key || "newAdd"}`} type={b.btnType} onClick={() =>{
                    dataShowStore.initIndexTestDialog();
                    dataShowStore.initSqlTestForm();
                    // dataShowStore.newForm.reset();
                    // dataShowStore.getDataShowEditForm({ id: id});
                    dataShowStore.setState({ showNewFormDialog: true });
                }
                }>
                    {b.btnName}
                </Button>
            );
        });
        return btnArr;
    };

    getMoreBtn = () => {
        const {dataShowStore} = this.props;
        const {dataShowFormHiddenFields} = toJS(dataShowStore.status);
        let id = dataShowFormHiddenFields.id || "";
        let moreBtninfo = [
            {
                "key": "1",
                "type": "BTN_EDIT",
                "icon": "icon-coms-Preservation",
                "btnName": getLabel(501169, "编辑"),
            }
        ];
        let btnArr = [];
        moreBtninfo && moreBtninfo.forEach(m => {
            btnArr.push({
                key: m.key,
                icon: <i className={m.icon}/>,
                content: m.btnName,
                onClick: () =>{
                    dataShowStore.initIndexTestDialog();
                    dataShowStore.initSqlTestForm();
                    dataShowStore.newForm.reset();
                    dataShowStore.getDataShowEditForm({ id: id});
                    dataShowStore.setState({ showNewFormDialog: true });
                }
        });
        });
        return btnArr;
    };

    getRightMenu = () => {
        const {dataShowStore} = this.props;
        const {dataShowFormHiddenFields} = toJS(dataShowStore.status);
        let id = dataShowFormHiddenFields.id || "";
        let menuinfo = [
            {
                "menuIcon": "icon-coms-Preservation",
                "isTop": "1",
                "menuName": getLabel(501169, "编辑"),
                "isControl": "0",
                "type": "BTN_EDIT"
            }
        ];
        let btnArr = [];
        menuinfo && menuinfo.forEach(m => {
            btnArr.push({
                key: m.type,
                icon: <i className={m.menuIcon}/>,
                content: m.menuName,
                onClick: () => {
                    dataShowStore.initIndexTestDialog();
                    dataShowStore.initSqlTestForm();
                    dataShowStore.newForm.reset();
                    dataShowStore.getDataShowEditForm({ id: id});
                    dataShowStore.setState({ showNewFormDialog: true });
                }
            });
        });
        return btnArr;
    };

    render() {
        const {dataShowStore, showTestVersion} = this.props;
        return (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@euc1kg`}
                title={getLabel( '507567' ,'数据展现集成测试')}
                icon={"icon-coms-integration"}
                iconBgcolor={"#1a57a0"}
                style={{width: 800, height: 600}}
                visible={showTestVersion}
                hasScroll={true}
                onCancel={() => {
                    dataShowStore.initIndexTestDialog();
                    dataShowStore.initSqlTestForm();
                }}
                buttons={this.getButtons()}
                moreBtn={{
                    datas: this.getMoreBtn(),
                    collectParams: []
                }}
            >

                <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@2ft6pu`} datas={this.getRightMenu()} collectParams={[]}>
                    {this.getTable()}
                    <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@gqeb3s`} height={550}>
                        {this.getTest()}
                    </WeaNewScroll>
                </WeaRightMenu>

            </WeaDialog>
        )
    }
}