@import "../common/uedBase";
@import "../common/var";

// 间距大小
@function uedGrid($grid, $size: 'default') {
    @if $size == 'medium' {
        @return map-get($map: $grid-medium-list, $key: $grid);
    } @else if $size == 'small'{
        @return map-get($map: $grid-small-list, $key: $grid);
    } @else if $size == 'mini'{
        @return map-get($map: $grid-mini-list, $key: $grid);
    } @else {
        @return map-get($map: $grid-list, $key: $grid);
    }
}

// 字体大小
@function uedFontSize($fontSize, $size: 'default') {
    @if $size == 'medium' {
        @return map-get($map: $font-size-medium-list, $key: $fontSize);
    } @else if $size == 'small'{
        @return map-get($map: $font-size-small-list, $key: $fontSize);
    } @else if $size == 'mini'{
        @return map-get($map: $font-size-mini-list, $key: $fontSize);
    } @else {
        @return map-get($map: $font-size-list, $key: $fontSize);
    }
}

// ued修正按钮样式，需要搭配button自身的样式一起使用
@mixin uedButtonStyle($size: 'default') {
    font-size: uedFontSize(12, $size);
    min-width: uedGrid(64, $size);
    line-height: uedGrid(20, $size);
    // 使用calc 减 1px的原因：消除border的影响。不然四个字时，总宽度为66
    // padding-top和bottom固定为4px，所以这里写死mini
    padding: calc(uedGrid(4, 'mini') - 1px) calc(uedGrid(8, $size) - 1px);
}


// ued修正弹出框样式，需要搭配dialog自身的样式一起使用
@mixin uedDialogStyle($size: 'default') {
    
    // 间距变化不符合ued规则，故每一个单独写
    width: fit-content;
    .el-dialog__header {
        @if $size == 'meidum' {
            padding: 20px 20px 0px 20px;
        } @else if $size == 'small' {
            padding: 16px 16px 0px 16px;
        } @else if $size == 'mini' {
            padding: 12px 12px 0px 12px;
        } @else {
            padding: 24px 24px 0px 24px;
        }
    }
    .el-dialog__headerbtn {
        @if $size == 'meidum' {
            top: 20px;
            right: 20px;
        } @else if $size == 'small' {
            top: 16px;
            right: 16px;
        } @else if $size == 'mini' {
            top: 12px;
            right: 12px;
        } @else {
            top: 24px;
            right: 24px;
        }
    }
    .el-dialog__title {
        @if $size == 'meidum' {
            font-weight: 500;
            font-size: 18px;
            line-height: 26px;
        } @else if $size == 'small' {
            font-weight: 500;
            font-size: 16px;
            line-height: 24px;
        } @else if $size == 'mini' {
            font-weight: 500;
            font-size: 14px;
            line-height: 22px;
        } @else {
            font-weight: 500;
            font-size: 20px;
            line-height: 28px;
        }
    }
    .el-dialog__body {
        @if $size == 'meidum' {
            padding: 28px;
        } @else if $size == 'small' {
            padding: 24px;
        } @else if $size == 'mini' {
            padding: 20px;
        } @else {
            padding: 32px;
        }
    }
    .el-dialog__footer {
        text-align: center;
        @if $size == 'meidum' {
            padding: 0px 20px 20px 20px;
        } @else if $size == 'small' {
            padding: 0px 16px 16px 16px;
        } @else if $size == 'mini' {
            padding: 0px 12px 12px 12px;
        } @else {
            padding: 0px 24px 24px 24px;
        }
        > .el-button {
            @include uedButtonStyle($size)
        }
    }
}
// 默认label宽度，10个中文汉字+一个中文冒号 + 右边距（12px） + 必填星号(11px)
$label-width: 11 * $--form-label-font-size + 12px + 11px;

@mixin ued-fpi-form-ui ($size: default) {
    &:not(.double-row-form) {
        .el-form-item__content{
            width: uedGrid(240, $size);
        }
    }
    &.double-row-form {
        > .el-row {
            > .el-col:not(.el-col-24) {
                .el-form-item__content{
                    width: uedGrid(240, $size);
                }
            }
        }
    }

    // &:not(.grid-two-column) {
    //     .el-form-item__content{
    //         width: uedGrid(240, $size);
    //     }
    // }
    &.grid-two-column {
        display: grid;
        grid-template-columns: auto auto;
        grid-column-gap: 80px;
        .el-form-item.grid-span-2 {
            grid-column: 1 / span 2;
            .el-form-item__content {
                width: unset;
            }
        }
    }
}
// ued修正弹出框样式，需要搭配dialog自身的样式一起使用
@mixin uedFormStyle($size: 'default') {
    width: fit-content;
    margin: 0 auto;
    @include b(form-item) {
        margin-bottom: uedGrid(16, $size);
        .el-form-item__label {
            width: $label-width;
        }
        .el-form-item__content {
            margin-left: $label-width;
            .el-select, .el-date-editor, .el-cascader, .el-input-number {
                width: 100%;
            }
        }
    }
    @include ued-fpi-form-ui($size);

    // 表单分割线必定独占一行
    .el-form-split-line {
        grid-column-start: 1;
        grid-column-end: 3;
    }
}

// ued间距样式生成器
@mixin uedGridConstructor($parentClass, $targetClass, $attr, $value) {
    .#{$parentClass} {
        // 不同尺寸样式

        .#{$targetClass} {
            #{$attr}: uedGrid($value);
        }

        &--medium {
            .#{$targetClass} {
                #{$attr}: uedGrid($value, medium);
            }
        }

        &--small {
            .#{$targetClass} {
                #{$attr}: uedGrid($value, small);
            }
        }

        &--mini {
            .#{$targetClass} {
                #{$attr}: uedGrid($value, mini);
            }
        }
    }
}

// ued字号样式生成器
@mixin uedFontSizeConstructor($parentClass, $targetClass, $value) {
    .#{$parentClass} {
        // 不同尺寸样式

        .#{$targetClass} {
            font-size: uedFontSize($value);
        }

        &--medium {
            .#{$targetClass} {
                font-size: uedFontSize($value, medium);
            }
        }

        &--small {
            .#{$targetClass} {
                font-size: uedFontSize($value, small);
            }
        }

        &--mini {
            .#{$targetClass} {
                font-size: uedFontSize($value, mini);
            }
        }
    }
}