@import './variable';
// 表单基础样式
.form-wrapper {
    margin-bottom: $--space;

    .form-title-wrapper + .form-body-wrapper,
    .bk-title-wrapper + .form-grid > .form-body-wrapper:first-child {
        margin-top: 0;
    }
    // 表单元组件样式
    .form-item {
        display: flex;
        align-items: stretch;
        width: 100%;
        height: 100%;
        &.has-label-placeholder .el-form-item__label {
            width: 0 !important;
            padding: 0;
            border-left: 1px solid $--border-color-light;
        }
    }
    // label必填*
    .el-form-item.is-required {
        .el-form-item__label {
            padding-left: 4px;
            &::before {
                display: none;
            }
        }
        .label-text {
            display: inline-block;
            position: relative;
            word-break: break-all;
        }
        .form-item-required {
            color: $--color-danger;
            font-style: normal;
        }
    }
    // label样式
    .el-form-item__label {
        line-height: 16px;
        flex-shrink: 0;
    }
    // 表单元组件主体样式
    .el-form-item__content {
        flex: 1;
        vertical-align: middle;
        line-height: normal;
        min-width: 0;
        .el-icon-circle-close::before {
            content: "\e6db";
        }
        .el-range-editor.is-disabled .el-range__close-icon {
            display: none;
        }
    }
    // 左右间距问题
    .write-clear:not(.is-disabled) > .el-input__inner,
    .write-clear .el-input:not(.is-disabled) .el-input__inner,
    .write-clear.form--edit .el-input__inner,
    .el-select:not(.el-search) .el-input__inner,
    .el-autocomplete .el-input:not(.is-disabled) .el-input__inner,
    .el-date-editor.el-input--suffix:not(.is-disabled) .el-input__inner {
        padding-right: 25px;
    }
    .el-password:not(.is-disabled) > .el-input__inner {
        padding-right: 35px;
    }
    .form-item-content {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }
    .tag-item {
        display: inline-block;
        margin-right: 5px;
        margin-bottom: 5px;
        &:last-child {
            margin-right: 0;
        }
        &.tag-block {
            width: 100%;
            line-height: 1;
            margin: 0;
            & ~ .tag-block,
            & ~ .el-button {
                margin-top: 5px;
            }
        }
    }
    .el-form-item__error {
        position: relative;
        top: 0;
        left: 0;
        padding: 0;
    }
    .el-checkbox {
        vertical-align: middle;
        font-size: 0;

        .el-checkbox__input {
            margin-top: 1px;
        }
    }
    .editor {
        z-index: 1;
    }
    // 解决文案过长不换行问题
    .el-checkbox .el-checkbox__label,
    .el-radio .el-radio__label {
        display: inline-block;
        white-space: normal;
        vertical-align: middle;
        line-height: 18px;
    }

    .el-input-number {
        width: 100%;
    }
    .el-form:not(.form-flow) .is-error.el-form-item .el-form-item__content {
        border: 1px solid $--color-danger;
        border-left: 1px solid $--border-color-light;
        &::before {
            display: block;
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            width: 1px;
            background-color: $--color-danger;
        }
    }

    .el-range-separator {
        min-width: 18px;
        padding: 0 2px;
    }

    // 只读内容容器
    .form-read_text {
        line-height: 18px;
        word-break: break-all;
        word-wrap: break-word;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        flex: 1;
    }
    .form-btn-text {
        flex: none;
    }
    .text-before,
    .text-after {
        padding: 0 5px;
        display: table-cell;
    }
    .form-footer {
        margin-top: 15px;
        text-align: center;
    }
}

.title-wrapper + .anchor-location-wrapper .form-body-wrapper:first-child {
    margin-top: 0;
}
.form-material-inline {
    display: inline;
}
// 正常表单布局
.form-grid {
    & > .form-body-wrapper {
        margin: 10px $--space 6px;
        border-top: 1px solid $--border-color-light;
        &:last-child {
            margin-bottom: 0;
        }
        & > .el-row {
            display: flex;
            align-items: stretch;
            flex-wrap: wrap;
            width: 100%;
            border-collapse: collapse;
            border-right: 1px solid $--border-color-light;
            border-bottom: 1px solid $--border-color-light;
            margin-top: -1px;
            box-sizing: initial;

            & > .el-col {
                float: none;
                padding-top: 1px;
            }
        }
        .label-box {
            padding: 4px 12px;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            border-left: 1px solid $--border-color-light;
            background-color: $--background-color-light;
            box-sizing: border-box;
            position: relative;
        }
        .form-item-disabled {
            .el-form-item__content,
            .el-input__inner,
            .el-textarea__inner,
            input {
                background-color: $--background-color-disabled;
            }
        }
        .form-item {
            margin: 0;
            min-height: 40px;

            .el-form-item__label {
                padding: 0;
            }
        }
        .form-item-content {
            align-items: center;
            flex-wrap: wrap;
            height: 100%;
            //编辑状态
            .form--edit {
                position: relative;
                display: flex;
                color: $--border-color-light;
                input {
                    flex: 1;
                }
                &::after {
                    position: absolute;
                    right: 0;
                    top: 5px;
                    font-family: element-icons;
                    font-style: normal;
                    font-weight: 400;
                    font-variant: normal;
                    text-transform: none;
                    line-height: 1;
                    vertical-align: baseline;
                    display: inline-block;
                    content: "\e78c";
                }
                .el-input__suffix {
                    background: $--color-white;
                    z-index: 11;
                }
            }
            & > .el-input,
            & > .el-select,
            & > .el-autocomplete,
            & > .el-cascader,
            & > .el-radio-group,
            & > .el-checkbox-group {
                flex: 1;
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                width: auto;
            }
            .el-button {
                border: none;
                line-height: $--height-form;
                height: $--height-form;
                min-width: 0;
                & ~ .el-button {
                    margin-left: 16px;
                }
                &.el-button--text {
                    padding: 0;
                }
            }
            & > .el-cascader .el-input--suffix {
                line-height: $--height-form;
            }
            & > .el-cascader .el-cascader__label {
                line-height: $--height-form;
                padding-left: 0;
            }
            // 解决form内上传按钮垂直不居中问题
            & > .upload-box .el-upload {
                font-size: 0;
                vertical-align: middle;

                .el-button {
                    vertical-align: middle;
                }
            }
        }
        .form-item-block {
            display: block;

            & > .el-input,
            & > .el-select,
            & > .el-autocomplete,
            & > .el-cascader,
            & > .el-checkbox-group,
            .text-before,
            .text-after {
                display: block;
            }
            .text-before,
            .text-after {
                line-height: $--height-form;
            }
        }
        .el-input__inner,
        .el-textarea__inner {
            height: $--height-form;
            font-size: 14px;
            color: $--color-text-primary;
            line-height: 16px;
            border: 0;
            padding: 0;
            padding-right: 10px;
        }
        .el-input-number {
            height: $--height-form;
            display: flex;
            align-items: center;
            .el-input {
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .el-input__inner {
                border: 1px solid $--border-color-light;
            }
            .el-input-number__decrease,
            .el-input-number__increase {
                height: $--height-form - 2;
                width: $--height-form - 2;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            &.is-controls-right {
                .el-input-number__decrease,
                .el-input-number__increase {
                    height: ($--height-form - 2) / 2;
                }
            }
        }
        .el-transfer-panel__filter {
            .el-input__inner {
                height: 32px;
                width: 100%;
                font-size: 12px;
                display: inline-block;
                box-sizing: border-box;
                border: 1px solid $--border-color-base;
                padding-right: 10px;
                padding-left: 30px;
            }
            .el-input__prefix {
                left: 5px !important;
                top: 1px;
                height: calc(100% - 2px);
                .el-icon-search {
                    line-height: 23px;
                }
            }
        }
        .el-form-item__content {
            padding: 8px 12px;
            border-left: 1px solid $--border-color-light;

            // icon
            .el-input__suffix {
                right: 0;
            }
            .el-input__prefix {
                left: 0;
            }
            .el-input__icon {
                width: 14px;
                line-height: $--height-form;
                display: flex;
                align-items: center;
                & ~ .el-input__icon {
                    margin-left: 4px;
                }
                &.el-range__close-icon {
                    margin-left: 10px;
                }
            }
            .el-input__suffix-inner {
                display: flex;
            }
            .el-select .el-input__suffix-inner {
                height: 100%;
            }
            .el-input__validateIcon {
                display: none;
            }
        }
        .el-form-item__error {
            margin-bottom: 10px;
            margin-top: -7px;
        }
        .el-row {
            &::before,
            &::after {
                display: none;
            }
        }
        .tag-item {
            display: inline-block;
            margin-right: 5px;
            &:last-child {
                margin-right: 0;
            }
            &.tag-block {
                width: 100%;
                line-height: 1;
                margin: 0;
                & ~ .tag-block,
                & ~ .el-button {
                    margin-top: 5px;
                }
            }
        }
        // 时间相关控件样式
        .el-date-editor {
            flex: 1;
            .el-input__inner {
                padding-left: 20px;
            }
            .el-range__icon {
                margin-left: 0;
                margin-right: 5px;
            }
            .el-range-separator {
                line-height: $--height-form;
            }
            .el-range-input {
                flex: 1;
            }
        }
    }
}

// 流式表单布局
.form-flow {
    .form-item {
        margin-bottom: 16px;
    }
    // 校验提示信息
    .el-form-item__error {
        margin-bottom: 0;
        position: absolute;
        top: 100%;
        margin-top: 2px;
    }
    // 必填*
    .form-item-required {
        position: absolute;
        top: 0;
        left: -10px;
    }
    .el-form-item__label {
        padding-right: 0;
        margin-right: 4px;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    .el-input,
    .el-select,
    .el-autocomplete,
    .el-date-editor,
    .el-cascader,
    .el-form-item__content,
    .el-input__inner,
    .el-input__icon,
    .el-range-input,
    .el-range-separator {
        line-height: $--height-list;
        font-size: 14px;
    }
    .el-range-separator {
        line-height: $--height-list - 2px;
    }
    .el-input__inner,
    .el-range-editor.el-input__inner {
        padding: 0 8px;
        height: $--height-list;
        border-color: $--border-color-light;
    }
    // 左右边距
    .el-range-editor:not(.is-disabled) {
        padding-right: 0;
    }
    .el-date-editor.el-input--prefix .el-input__inner {
        padding-left: 20px;
    }
    .el-date-editor.el-input--suffix:not(.is-disabled) .el-input__inner {
        padding-right: 25px;
    }
    .el-date-editor .el-input__prefix {
        left: 0;
    }
    .el-password {
        .el-input__suffix {
            right: 10px;
        }
        .el-input__icon {
            width: auto;
        }
        .el-icon-circle-close {
            margin-right: 2px;
        }
        &:not(.is-disabled) .el-input__inner {
            padding-right: 40px;
        }
    }
    .el-select:not(.el-search) .el-input__inner,
    .el-select.el-search .el-input:not(.is-disabled) .el-input__inner,
    .el-autocomplete .el-input:not(.is-disabled) .el-input__inner {
        padding-right: $--height-list - 2;
    }
    // 计数器
    .el-input-number__decrease,
    .el-input-number__increase {
        width: $--height-list - 2;
        height: $--height-list - 2;
        line-height: $--height-list - 2;
    }
    .is-controls-right {
        .el-input-number__decrease,
        .el-input-number__increase {
            height: ($--height-list - 2) / 2;
            line-height: ($--height-list - 2) / 2;
        }
    }
    .el-input-number .el-input {
        line-height: $--height-list;
        // 解决火狐增减按钮上浮问题
        font-size: 0;
        height: $--height-list;
    }
    // 表单元组件宽度
    .el-input,
    .el-select,
    .el-autocomplete,
    .el-date-editor,
    .el-cascader {
        width: 100%;
    }
    .is-error {
        .el-form-item__content {
            border: 0 none;
        }
    }
}

// search或select下拉框
.el-select-dropdown {
    .el-select-dropdown__item {
        max-width: 450px;
    }
}

// 媒体查询自适应查询框
.media-queries.search-wrapper {
    padding-bottom: 0 !important;
    .form-wrapper {
        margin-bottom: 0;
    }
    .form-flow {
        display: flex;
        position: relative;
        flex-wrap: wrap;
        .form-material {
            margin-right: 24px;
            margin-bottom: 16px;
            width: calc((100% - 24px * 3) / 4);
            &.right-material {
                margin-right: 0;
            }
        }
        .search-btn-wrapper {
            margin-left: auto;
            margin-bottom: 16px;
        }
        .form-item {
            margin-bottom: 0;
            // max-width: 336px;
        }
        &.shortage {
            .form-material {
                flex-basis: 20%;
                max-width: 336px;
                flex-grow: 1;
                width: auto;
            }
            // .search-btn-wrapper {
            //     margin-left: 0;
            // }
            .form-item {
                max-width: auto;
            }
        }
        &.fulltage {
            .form-material {
                max-width: 336px;
                margin-right: 0;
                &.second {
                    margin-left: calc((100% - (336px * 4)) / 3);
                    margin-right: calc((100% - (336px * 4)) / 6);
                }
                &.third {
                    margin-left: calc((100% - (336px * 4)) / 6);
                    margin-right: calc((100% - (336px * 4)) / 3);
                }
            }
        }
    }
}

@mixin max-width($width) {
    @media screen and (max-width: $width) {
        @content;
    }
}

// @include max-width(1200px) {
//     .media-queries.search-wrapper .form-flow {
//         .form-material {
//             width: calc((100% - 24px * 2) / 3);
//         }
//         &.shortage .form-material {
//             flex-basis: 25%;
//         }
//     }
// }

// @include max-width(992px) {
//     .media-queries.search-wrapper .form-flow {
//         .form-material {
//             width: calc((100% - 24px) / 2);
//         }
//         &.shortage .form-material {
//             flex-basis: 33%;
//         }
//     }
// }
