@import '../../style/mixins/index';

@tree-prefix-cls: ~'@{acud-prefix}-tree';
@select-tree-prefix-cls: ~'@{acud-prefix}-select-tree';

.treeSwitcherIcon(@type: 'tree-default-open-icon') {
    .@{tree-prefix-cls}-switcher-icon,
    .@{select-tree-prefix-cls}-switcher-icon {
        .basic-config(@tree-default-icon-tp, @tree-default-icon-p);
        display: inline-block;
        font-size: 10px;
        line-height: 0;
        vertical-align: -.24em;
        svg {
            // 宽度规范覆盖自定义图标
            width: 16px!important;
            transition: transform .3s;
        }
    }
}

.drop-indicator() {
    .@{tree-prefix-cls}-drop-indicator {
        position: absolute;
        z-index: 1;
        height: 1px;
        background-color: @B6;
        border-radius: 1px;
        pointer-events: none;

        &::after {
            position: absolute;
            top: -2px;
            left: -4px;
            width: 5px;
            height: 5px;
            background-color: transparent;
            border: 1px solid @B6;
            border-radius: 50%;
            content: '';
        }
    }
}

.acudTreeFn(@custom-tree-prefix-cls) {
    @custom-tree-node-prefix-cls: ~'@{custom-tree-prefix-cls}-treenode';
    @custom-tree-with-title-ellipsis: ~'@{custom-tree-prefix-cls}-with-title-ellipsis';

    .@{custom-tree-prefix-cls} {
        &-checkbox-inner {
            &::after {
                top: 43%;
                left: 24%;
                width: 4px;
                height: 8px;
                position: absolute;
                display: table;
                border: 1px solid @G11;
                border-top: 0;
                border-left: 0;
                transform: rotate(45deg) scale(1) translate(-50%, -50%);
                opacity: 1;
                content: " ";
                .@{custom-tree-node-prefix-cls}-checkbox-disabled & {
                    border: 1px solid @G6;
                    border-top: 0;
                    border-left: 0;
                }
            }
        }

        .@{custom-tree-prefix-cls}-checkbox-disabled.@{custom-tree-prefix-cls}-checkbox-checked {
            .@{custom-tree-prefix-cls}-checkbox-inner::after {
                border-color: @G11;
            }
        }

        .@{custom-tree-prefix-cls}-checkbox-disabled:not(.@{custom-tree-prefix-cls}-checkbox-checked) {
            .@{custom-tree-prefix-cls}-checkbox-inner::after {
                display: none;
            }
        }

        // popover-util
        &-popover-util {
            margin: -1.5 * @P 0;
            li {
                line-height: 8 * @P;
                margin: 0 -3 * @P;
                padding: 0 3 * @P;
                &:hover {
                    background: @tree-node-selected-color;
                    cursor: pointer;
                }
            }
            &-li-disabled {
                color: @G6;
                &:hover {
                    background: transparent !important;
                    cursor: not-allowed !important;
                }
            }
        }

        // Search Input
        &-search-input {
            margin-bottom: @P;
        }
        // TreeNode
        .@{custom-tree-node-prefix-cls} {
            display: flex;
            align-items: flex-start;
            outline: none;
            padding: 0 0 @tree-node-padding 0;
            line-height: @tree-title-height;
            .basic-tp-config(@tree-default-tp);
            &:active {
              color: @tree-node-active-color;
            }
            &-disabled {
                .@{custom-tree-prefix-cls}-node-content-wrapper {
                    color: @tree-node-disabled-color;
                    cursor: not-allowed;

                    &:hover {
                        background: transparent;
                    }
                    &:active {
                        color: @tree-node-disabled-color;
                    }
                }
            }
        }

        // indent
        &-indent {
            align-self: stretch;
            white-space: nowrap;
            user-select: none;

            &-unit {
              display: inline-block;
              width: @tree-title-height;
            }
        }

        // switcher
        &-switcher {
            .treeSwitcherIcon();
            position: relative;
            flex: none;
            align-self: stretch;
            width: @tree-switcher-width;
            margin: 0;
            line-height: @tree-title-height;
            text-align: center;
            cursor: pointer;
            user-select: none;

            &-noop {
                cursor: default;
            }

            &_close {
                .@{custom-tree-prefix-cls}-switcher-icon {
                    svg {
                        transform: rotate(-90deg);
                    }
                }
            }

            &-leaf-line {
                position: relative;
                z-index: 1;
                display: inline-block;
                width: 100%;
                height: 100%;
                &::before {
                    position: absolute;
                    top: 0;
                    right: @P * 2;
                    bottom: -@tree-node-padding;
                    margin-left: -1px;
                    border-right: 1px solid @G6;
                    content: ' ';
                }
          
                &::after {
                    position: absolute;
                    width: @tree-title-height - 14px;
                    height: @tree-title-height - 10px;
                    border-bottom: 1px solid @G6;
                    content: ' ';
                }
            }
        }

        // title
        & &-node-content-wrapper {
            position: relative;
            flex: 1;
            z-index: auto;
            min-height: @tree-title-height;
            margin: 0 @P;
            padding: 0 @P;
            color: inherit;
            line-height: @tree-title-height;
            background: transparent;
            cursor: pointer;
            transition: all 0.3s, border 0s, line-height 0s, box-shadow 0s;

            &:hover {
                background-color: @tree-node-hover-color;
                border-radius: @R2;
            }

            &:active {
                color: @tree-node-active-color;
            }

            &.@{custom-tree-prefix-cls}-node-selected, & .@{custom-tree-prefix-cls}-node-highlighttext {
                background-color: @tree-node-selected-color;
                border-radius: @R2;
            }

            // Icon
            .@{custom-tree-prefix-cls}-iconEle {
                display: inline-block;
                width: @tree-switcher-width;
                height: @tree-switcher-width;
                line-height: @tree-title-height;
                margin-right: 2 * @P;
                text-align: center;
                vertical-align: top;
                color: @G5;
                &:empty {
                    display: none;
                }
                .@{iconfont-css-prefix} {
                    vertical-align: -0.2em;
                }
            }

            .@{custom-tree-prefix-cls}-icon-util > span {
                color: @G5;
                margin-left: 2 * @P;
                vertical-align: -0.2em;
                line-height: 0;
                &:hover {
                    color: @tree-node-icon-hover-color
                }
                &:active {
                    color: @tree-node-icon-active-color
                }
            }

            .@{custom-tree-prefix-cls}-edit-input {
                margin: 0 -2 * @P;
            }
        }

        // draggable
        &-node-content-wrapper {
            line-height: @tree-title-height;
            user-select: none;

            .drop-indicator();
        }

        &-draggable-icon {
            width: @tree-switcher-width;
            height: @tree-switcher-width;
            text-align: center;
            line-height: @tree-title-height;
            margin: 0 2 * @P;
            opacity: 0;
            .@{custom-tree-node-prefix-cls}:hover & {
                opacity: 0.45;
            }
        }

        // show line
        &-show-line {
            .@{custom-tree-prefix-cls}-indent {
                &-unit {
                    position: relative;
                    height: 100%;
            
                    &::before {
                        position: absolute;
                        top: 0;
                        right: (@tree-title-height / 3 * 2);
                        bottom: -@tree-node-padding;
                        border-right: 1px solid @G6;
                        content: '';
                    }
            
                    &-end {
                        &::before {
                            display: none;
                        }
                    }
                }
            }
        }

        .@{custom-tree-node-prefix-cls}-leaf-last {
            .@{custom-tree-prefix-cls}-switcher {
                &-leaf-line {
                    &::before {
                        top: auto !important;
                        bottom: auto !important;
                        height: @tree-title-height - 10px !important;
                    }
                }
            }
        }

        // Checkbox
        &-checkbox {
            margin: 0.5 * @P 0 0 2 * @P;
            top: 0.1em;
        }

        
    }

    .@{custom-tree-with-title-ellipsis} {
        .@{custom-tree-prefix-cls}-title {
            flex: 1;
            overflow: hidden;
            &-titleWithOps {
                display: flex;
                white-space: nowrap;
            }
            &-titleContent {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
        
        .@{custom-tree-prefix-cls}-node-content-wrapper {
            display: flex;
            overflow: hidden;
            max-width: 100%;
            .@{custom-tree-prefix-cls}-edit-input {
                margin: 0;
            }
        }
    }
}