decision-webui-dcm/src/modules/components/test_status/tip_icon/tip_fail.ts

import { shortcut, store } from '@core/core';
import { Button } from '@fui/core';
import { TipFailModel } from './tip_fail.model';

@shortcut()
@store(TipFailModel)
export class TipFail extends BI.Widget {
    static xtype = 'dec.dcm.components.test_status.tip_fail';

    static EVENT_CLOSE = 'EVENT_CLOSE';
    static EVENT_RELOAD = 'EVENT_RELOAD';
    static EVENT_DETAIL = 'EVENT_DETAIL';

    props = {
        tipCls: '',
        tipText: '',
        retryText: '',
    }

    model: TipFailModel['model'];
    store: TipFailModel['store'];

    detailButton: Button;

    watch = {
        isCollapse: (isCollapse: boolean) => {
            this.detailButton.setText(isCollapse ?
                BI.i18nText('Dec-Dcm_Connection_Handup_Information') :
                BI.i18nText('Dec-Dcm_Connection_Detailed_Information'));
        },
    }

    render() {
        const { tipCls, tipText, retryText } = this.options;

        return {
            type: BI.CenterAdaptLayout.xtype,
            items: [
                {
                    type: BI.VerticalLayout.xtype,
                    items: [
                        {
                            type: BI.HorizontalAutoLayout.xtype,
                            cls: tipCls,
                            bgap: 20,
                            items: [{
                                type: 'bi.icon',
                                width: 60,
                                height: 60,
                            }],
                        }, {
                            type: BI.Label.xtype,
                            height: 14,
                            bgap: 10,
                            text: tipText,
                        },
                        {
                            type: BI.VerticalAdaptLayout.xtype,
                            hgap: 5,
                            items: [
                                {
                                    type: BI.Button.xtype,
                                    text: BI.i18nText('Dec-Dcm_Connection_Detailed_Information'),
                                    level: 'ignore',
                                    ref: (_ref: Button) => {
                                        this.detailButton = _ref;
                                    },
                                    handler: () => {
                                        this.store.setIsCollapse(!this.model.isCollapse);
                                        this.fireEvent(TipFail.EVENT_DETAIL, !this.model.isCollapse);
                                    },
                                },
                                {
                                    type: BI.Button.xtype,
                                    text: BI.i18nText('Dec-Dcm_Back'),
                                    level: 'ignore',
                                    handler: () => {
                                        this.fireEvent(TipFail.EVENT_CLOSE);
                                    },
                                },
                                {
                                    type: BI.Button.xtype,
                                    text: retryText,
                                    handler: () => {
                                        this.fireEvent(TipFail.EVENT_RELOAD);
                                    },
                                },
                            ],
                        },
                    ],
                },
            ],
        };
    }
}