import style from "antd/lib/input/style/index.css";

  angular
      .module("esNgAntd")
      .directive("antdInput", function ($compile, esNgAntd) {
          return {
              controllerAs: "antdInput",
              restrict: "E",
              transclude: true,
              replace: true,
              scope: {
                  value: "@",
                  placeholder: "@",
                  addonBefore: "@",
                  addonAfter: "@",
                  disabled: "@",
                  onChange: "&",
                  maxLength: "@",
              },
              controller: function ($scope, $element, $attrs) {
                  this.getContext = function () {
                      return $scope;
                  };

                  $scope.state = {
                      inputEventTarget: null,
                  };

                  $scope.handleClick = function (event) {
                      $scope.state.inputEventTarget = event;
                  };

                  $scope.handleChange = function () {
                      $scope.onChange({
                          event: $scope.state.inputEventTarget,
                      });
                  };

                  $scope.getTemplate = function () {
                      let maxLengthAttribute = "";
                      let styleAttribute = "";
                      let idAttribute = "";

                      if ($scope.maxLength) {
                          maxLengthAttribute = `maxlength="${$scope.maxLength}"`;
                      }

                      if ($scope.style) {
                          styleAttribute = `style="${$scope.style}"`;
                      }

                      if ($scope.antdFormItem && $scope.antdFormItem.name) {
                          idAttribute = `id="${$scope.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="${$scope.style}" ${styleAttribute} ${maxLengthAttribute} ${idAttribute}/>
              <span class="ant-input-group-addon" ng-if="addonAfter">{{addonAfter}}</span>
          </span>
      </span>`,

                      ];

                      if ($scope.addonBefore || $scope.addonAfter) {
                          return templates[1];
                      } else {
                          return templates[0];
                      }
                  };
              },
              require: ["?^antdFormItem", "?^antdForm"],
              link: function (
                  $scope,
                  $element,
                  $attrs,
                  $controllers,
                  $transclude
              ) {
                  let [antdFormItem, antdForm] = $controllers;
                  esNgAntd.createStyle("ant-input", style); // 上下文

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

                  if (antdFormItem) {
                      $scope.antdFormItem = antdFormItem.getContext();
                  }

                  $scope.style = $attrs.style;
                  $element.replaceWith($compile($scope.getTemplate())($scope));
              },
          };
      });