import template from "./Select.html";
import style from "antd/lib/select/style/index.css";
angular
    .module("esNgAntd")
    .directive("esSelect", function ($compile, $timeout, esNgAntd) {
        return {
            controllerAs: "esSelect",
            restrict: "E",
            transclude: true,
            replace: true,
            scope: {
                value: "@",
                placeholder: "@",
                onChange: "&",
                placeholder: "@",
                getPopupContainer: "&",
            },
            template: template,
            controller: function ($scope, $element) {
                this.getContext = function () {
                    return $scope;
                };

                $scope.state = {
                    open: false,
                    childrens: [],
                    label: null,
                    value: null,
                    popup: null,
                };

                $scope.addOption = function (option) {
                    $scope.state.childrens.push(option);
                };

                $scope.handleClick = function (option) {
                    $scope.state.open = !$scope.state.open;
                    $scope.state.label = option.label;
                    $scope.state.value = option.value;
                    $scope.onChange({
                        value: $scope.state.value,
                    });
                };

                $scope.getOffset = function (ele) {
                    if (!ele || ele.nodeType != 1) {
                        return;
                    }

                    let func = $scope.getPopupContainer();

                    if (typeof func === "function" && func() !== undefined) {
                        return {
                            top: $element[0].offsetTop,
                            left: $element[0].offsetLeft,
                        };
                    } else {
                        let rect = ele.getBoundingClientRect();
                        let doc = ele.ownerDocument.documentElement;
                        return {
                            top: rect.top + window.pageYOffset - doc.clientTop,
                            left:
                                rect.left + window.pageXOffset - doc.clientLeft,
                        };
                    }
                };

                $scope.myEvent = function () {
                    $timeout(() => {
                        $scope.state.open = false;
                        document.body.removeEventListener(
                            "click",
                            $scope.myEvent
                        );
                    }, 0);
                };

                $scope.handleBlur = function () {
                    // 事件绑定
                    document.body.addEventListener("click", $scope.myEvent);
                };

                $scope.handleOpen = function (event) {
                    event.stopPropagation();
                    const { height, width } =
                        $element[0].getBoundingClientRect();
                    const { top, left } = $scope.getOffset($element[0]); // 处理标签

                    $scope.state.childrens.forEach(function (item) {
                        item.label = item.element.text();
                    });
                    let div = document.createElement("div");
                    div.style.position = "absolute";
                    div.style.left = 0;
                    div.style.top = 0;
                    div.style.width = "100%";
                    div.appendChild(
                        $compile(`<div><div ng-class="'ant-select-dropdown ant-select-dropdown-placement-bottomLeft'+(!state.open?' ant-select-dropdown-hidden':'')" style="width: ${width}px; left: ${left}px; top: ${
                            top + height + 2
                        }px;">
            <div class="ant-select-item ant-select-item-option" ng-click="handleClick(option)" ng-repeat="option in state.childrens">
                <div class="ant-select-item-option-content">{{option.label}}</div>
            </div>
        </div></div>`)($scope)[0]
                    );

                    if ($scope.state.popup === null) {
                        let func = $scope.getPopupContainer();

                        if (
                            typeof func === "function" &&
                            func() !== undefined
                        ) {
                            $element[0].style.position = "relative";
                            $scope.getPopupContainer()().appendChild(div);
                        } else {
                            document.body.appendChild(div);
                        }

                        $scope.state.popup = div;
                    }

                    $scope.state.open = !$scope.state.open;
                    $scope.handleBlur();
                };
            },
            require: ["?^esForm", "?^esFormItem"],
            link: function (
                $scope,
                $element,
                $attrs,
                $controllers,
                $transclude
            ) {
                let [esForm, esFormItem] = $controllers;
                esNgAntd.createStyle("ant-select", style);
                $scope.esForm = esForm.getContext();
                $scope.esFormItem = esFormItem.getContext();
                $scope.esForm.state.formItems.push($scope);
                let option = $scope.state.childrens.find(function (option) {
                    return option.value === $scope.value;
                });

                if (option) {
                    $scope.state.label = option.label;
                }
            },
        };
    });