import { shortcut, store } from '@core/core';
import { TestStatusModel } from './test_status.model';
import { TEST_STATUS } from '@constants/constant';
import { TipIcon } from './tip_icon/tip_icon';
import { TipFail } from './tip_icon/tip_fail';
import { FloatLeftLayout, Label, Tab, VerticalLayout } from '@fui/core';
@shortcut()
@store(TestStatusModel)
export class TestStatus extends BI.Widget {
    static xtype = 'dec.dcm.components.test_status';
    static EVENT_CLOSE = 'EVENT_CLOSE';
    static EVENT_RELOAD = 'EVENT_RELOAD';

    props = {
        loadingCls: '',
        loadingText: '',
        successCls: '',
        successText: '',
        failCls: '',
        failText: '',
        retryText: '',
    }

    model: TestStatusModel['model'];
    store: TestStatusModel['store'];

    tab: Tab;
    failMessage: Label;
    failDriverMessage: Label;
    driverLink: FloatLeftLayout;
    detail: VerticalLayout;
    failMaskers: any;

    extraContainer: VerticalLayout;

    watch = {
        status: (status: string) => {
            this.tab.setSelect(status);
        },
    }

    render() {
        const LAYOUT_WIDTH = 400;
        const { loadingCls, loadingText, successCls, successText, failCls, failText, retryText } = this.options;

        return {
            type: BI.CenterAdaptLayout.xtype,
            cls: 'bi-z-index-mask',
            items: [
                {
                    type: BI.VerticalLayout.xtype,
                    items: [
                        {
                            type: BI.Tab.xtype,
                            cls: 'bi-card',
                            width: 450,
                            height: 250,
                            // single: true,
                            showIndex: this.model.status,
                            ref: (_ref: Tab) => {
                                this.tab = _ref;
                            },
                            cardCreator: (index: string) => {
                                switch (index) {
                                    case TEST_STATUS.SUCCESS:
                                        return {
                                            type: TipIcon.xtype,
                                            tipCls: successCls,
                                            tipText: successText,
                                        };
                                    case TEST_STATUS.FAIL:
                                        return {
                                            type: TipFail.xtype,
                                            tipCls: failCls,
                                            tipText: failText,
                                            retryText,
                                            ref: (_ref: TipFail) => {
                                                this.failMaskers = _ref;
                                                if (BI.isEmptyString(this.failMessage.getText())) {
                                                    this.failMaskers.populateFail(BI.i18nText('Dec-Conn-ect-Failed'), false);
                                                }
                                            },
                                            listeners: [
                                                {
                                                    eventName: TipFail.EVENT_RELOAD,
                                                    action: () => {
                                                        this.fireEvent(TestStatus.EVENT_RELOAD);
                                                        this.detail.setVisible(false);
                                                    },
                                                },
                                                {
                                                    eventName: TipFail.EVENT_CLOSE,
                                                    action: () => {
                                                        this.fireEvent(TestStatus.EVENT_CLOSE);
                                                    },
                                                },
                                                {
                                                    eventName: TipFail.EVENT_DETAIL,
                                                    action: (isCollapse: boolean) => {
                                                        this.tab.setHeight(isCollapse ? 250 : 200);
                                                        this.detail.setVisible(!isCollapse);
                                                    },
                                                },
                                            ],
                                        };
                                    default:
                                        return {
                                            type: TipIcon.xtype,
                                            tipCls: loadingCls,
                                            tipText: loadingText,
                                        };
                                }
                            },
                        },
                        {
                            type: BI.VerticalLayout.xtype,
                            cls: 'bi-card',
                            invisible: true,
                            bgap: 10,
                            items: [
                                {
                                    type: BI.VerticalLayout.xtype,
                                    cls: 'bi-header-background',
                                    vgap: 5,
                                    hgap: 10,
                                    scrolly: true,
                                    height: 75,
                                    items: [
                                        {
                                            type: BI.VerticalLayout.xtype,
                                            width: LAYOUT_WIDTH,
                                            ref: (_ref: VerticalLayout) => {
                                                this.extraContainer = _ref;
                                            }
                                        },
                                        {
                                            type: BI.Label.xtype,
                                            whiteSpace: 'normal',
                                            width: LAYOUT_WIDTH,
                                            textAlign: 'left',
                                            text: '',
                                            ref: (_ref: Label) => {
                                                this.failMessage = _ref;
                                            },
                                        },
                                        {
                                            type: BI.Label.xtype,
                                            textAlign: 'left',
                                            invisible: true,
                                            ref: (_ref: Label) => {
                                                this.failDriverMessage = _ref;
                                            },
                                        },
                                        {
                                            type: BI.FloatLeftLayout.xtype,
                                            invisible: true,
                                            items: [
                                                {
                                                    type: BI.TextButton.xtype,
                                                    cls: 'bi-high-light bi-high-light-border-bottom',
                                                    text: BI.i18nText('Dec-Dcm_Connection_Download_Driver'),
                                                    handler: () => {
                                                        window.open(this.model.link);
                                                    },
                                                },
                                            ],
                                            ref: (_ref: FloatLeftLayout) => {
                                                this.driverLink = _ref;
                                            },
                                        },
                                    ],
                                },
                            ],
                            ref: (_ref: VerticalLayout) => {
                                this.detail = _ref;
                            },
                        },
                    ],
                },
            ],
        };
    }

    setSuccess() {
        this.store.setStatus(TEST_STATUS.SUCCESS);
    }

    setFail(message: string = '', driver = '', link = '') {
        this.store.setStatus(TEST_STATUS.FAIL);
        this.failMessage.setText(message);
        this.failDriverMessage.setVisible(!!driver);
        this.driverLink.setVisible(!!driver);
        if (driver) {
            this.failDriverMessage.setText(BI.i18nText('Dec-Dcm_Connection_Lack_Driver', driver));
            this.store.setLink(link);
        }
    }

    setLoading() {
        this.store.setStatus(TEST_STATUS.LOADING);
    }

    /**
     * 设置报错弹窗自定义展示内容
     */
    setExtraContainer(container: Obj) {
        BI.createWidget({
            ...container,
            element: this.extraContainer,
        });
    }
}