import style from "antd/lib/input/style/index.css";
  
  class Input {
  
      useModules = ["$compile", "esNgAntd"];
  

      require = ["^?antdFormItem", "^?antdForm"];

  
      state = {
          inputEventTarget: null,
      }
  

      constructor($element, $attrs, $controllers) {
          let [antdForm, antdFormItem] = $controllers;
  

          esNgAntd.createStyle("ant-input", style);

          if (antdFormItem) {
              this.antdFormItem = antdFormItem.getContext();
          }

          // 上下文

          if (antdForm) {
              this.antdForm = antdForm.getContext();
              this.antdForm.state.formItems.push($scope);

          }

          this.props.style = $attrs.style;

          $element.replaceWith($compile(this.getTemplate())($scope));
      }
  
      handleClick(event) {
          this.state.inputEventTarget = event;
      }
  
      handleChange() {
          this.props.onChange({
              event: this.state.inputEventTarget
          });
      }
  
      getTemplate() {
          let maxLengthAttribute = "";
          let styleAttribute = "";
          let idAttribute = "";
          if (this.props.maxLength) {
              maxLengthAttribute = `maxlength="${this.props.maxLength}"`;
          }
          if (this.props.style) {
              styleAttribute = `style="${this.props.style}"`
          }

          if (this.antdFormItem && this.antdFormItem.name) {
              idAttribute = `id="${this.antdFormItem.name}"`;

          }
          let templates = [

              `<input type="text" class="ant-input" placeholder={{placeholder}} ng-change="handleChange()" ng-model="value" ng-focus="handleClick($event)" ng-disabled="disabled===true" ${styleAttribute} ${maxLengthAttribute} ${idAttribute}/>`,

              `<span class="ant-input-group-wrapper" ng-if="addonBefore||addonAfter">
          <span class="ant-input-wrapper ant-input-group" style="">
              <span class="ant-input-group-addon" ng-if="addonBefore">{{addonBefore}}</span>

              <input type="text" class="ant-input" ng-change="handleChange()" ng-model="value" ng-focus="handleClick($event)" ng-disabled="disabled===true" style="${this.props.style}" ${styleAttribute} ${maxLengthAttribute} ${idAttribute}/>

              <span class="ant-input-group-addon" ng-if="addonAfter">{{addonAfter}}</span>
          </span>
      </span>`,
          ];
          if (this.props.addonBefore || this.props.addonAfter) {
              return templates[1]
          } else {
              return templates[0];
          }
      }
  }

  
  Input.propTypes = {
      value: PropTypes.string,
      placeholder: PropTypes.string,
      addonBefore: PropTypes.string,
      addonAfter: PropTypes.string,
      disabled: PropTypes.boolean,
      onChange: PropTypes.function,
      maxLength: PropTypes.number,
  };