import {inject, observer} from "mobx-react";
import {toJS} from "mobx";
import {WeaLocaleProvider, WeaRightMenu, WeaTab, WeaTop} from "ecCom";

const getLabel = WeaLocaleProvider.getLabel;

@inject("authenticationCenterStore")
@observer
class AuthenticationCenter extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          visiable:false,
          topTab: [
            {
              color: "#000000",
              groupid: "flowAll",
              showcount: true,
              title: `${getLabel(381910, "配置说明")}`,
              viewcondition: 2
            }
            ,{
              color: "#000000",
              groupid: "flowAll",
              showcount: true,
              title: `${getLabel(381911, "开发说明")}`,
              viewcondition: 3
            }
          ],
          collectParams: {
            favname: getLabel('516460','帮助中心'),
            favouritetype: 1,
            objid: 0,
            link: "wui/engine.html#/integration/helpcenter",
            importantlevel: 1
          }
        };
    }

    componentWillMount() {
      this.props.authenticationCenterStore.setState({selectedKey: "2"});
    }

    componentWillUnmount() {
      this.props.authenticationCenterStore.clearStore();
    }

    componentDidMount() {
      const {authenticationCenterStore} = this.props;
      authenticationCenterStore.setState({selectedKey: "2"})
    }

    componentWillReceiveProps(nextProps) {
        const {authenticationCenterStore} = this.props;
        if (this.props.location.key !== nextProps.location.key) {
          authenticationCenterStore.setState({selectedKey: "2"});
        }
    }

    render() {
        const { authenticationCenterStore } = this.props;
        const {status} = authenticationCenterStore;
        const {selectedKey} = toJS(status);
        const {topTab, collectParams} = this.state;

        return (<WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@674cc1`}
                  datas={[]}
                  collectParams={collectParams}
                >
                  <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@y309b0`}
                    title={getLabel('516460','帮助中心')}
                    icon={<i className="icon-coms-integration" />}
                    iconBgcolor="#1a57a0"
                    buttons={[]}
                    showDropIcon={true}
                    dropMenuDatas={[]}
                    dropMenuProps={{collectParams}}
                  >
                    <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@00qa1s`}
                      datas={topTab}
                      keyParam="viewcondition" //主键
                      selectedKey={selectedKey}
                      onChange={v => authenticationCenterStore.setState({selectedKey: v})}
                    />
                      {
                        selectedKey == 2 ? (
                            <div style={{height:'90%'}}>
                              <iframe src={`${window.ecologyContentPath || ""}/integration/weaversso/summary_cfg.html`} width="100%" height="100%" scrolling="yes" frameBorder="0" align="top"></iframe>
                            </div>
                          ) : selectedKey == 3 ? (
                              <div style={{height:'90%'}}>
                                  <iframe src={`${window.ecologyContentPath || ""}/integration/weaversso/summary_dev.html`} width="100%" height="100%" scrolling="yes" frameBorder="0" align="top"></iframe>
                              </div>
                          ):(<div></div>)
                      }
                  </WeaTop>
                </WeaRightMenu>
        );
    }
}

export default AuthenticationCenter;
