@import './variables.scss';

// 基础边框border
// 颜色即当前元素color
// 例：.border-1 { border: 1px solid currentColor }
@for $i from 1 through 5 {
    .border-#{$i} { border: $i+px solid currentColor; }
    .border-top-#{$i} { border-top: $i+px solid currentColor; }
    .border-bottom-#{$i} { border-bottom: $i+px solid currentColor; }
    .border-left-#{$i} { border-left: $i+px solid currentColor; }
    .border-right-#{$i} { border-right: $i+px solid currentColor; }
}
// 基础阴影
.box-shadow {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
// 基础内外边距margin/padding
// 例：.margin-10 { margin: 10px }
$pixel: 10, 15, 20, 25, 30;
@each $i in $pixel {
    .margin-#{$i} { margin: $i+px; }
    .margin-top-#{$i} { margin-top: $i+px; }
    .margin-bottom-#{$i} { margin-bottom: $i+px; }
    .margin-left-#{$i} { margin-left: $i+px; }
    .margin-right-#{$i} { margin-right: $i+px; }
    
    .padding-#{$i} { padding: $i+px; }
    .padding-top-#{$i} { padding-top: $i+px; }
    .padding-bottom-#{$i} { padding-bottom: $i+px; }
    .padding-left-#{$i} { padding-left: $i+px; }
    .padding-right-#{$i} { padding-right: $i+px; }
}
// 基础font-size, 12-40
// 例：.fz-12 { font-size: 12 }
@for $i from 12 through 40 {
    .fz-#{$i} { font-size: $i+px; }
}
// 文字对齐
// 例：.text-left { text-align: left }
$alien: left, center, right;
@each $i in $alien {
    .text-#{$i} { text-align: $i;}
}
// 单行文字垂直居中
// 省去设置line-height的烦恼
// 例 <div class="vertical-center">单行文字垂直居中</div>
.vertical-center,
.syswin-button {
    &:before {
        content:'';
        display: inline-block;
        vertical-align: middle;
        height: 100%;
    }
}
// 文本溢出显示省略号
.vertical-center,
.text-overflow {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
// 按钮样式
// 默认按钮 <button class="syswin-button">取消</button>
// 确定按钮 <button class="syswin-button primary">确定</button>
// 文字按钮 <button class="syswin-button is-text">文字按钮</button>
// 朴素按钮（类似资产租赁合同管理添加附件的按钮样式） <button class="syswin-button is-plain">朴素按钮</button>
// 禁用效果 增加disabled 如 <button class="syswin-button primary disabled">确定</button>
.syswin-button {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid #dcdfe6;
    color: #606266;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    margin: 0;
    transition: .1s;
    font-weight: 500;
    user-select: none;
    padding: 9px 15px;
    font-size: 12px;
    border-radius: 2px;
    & + .syswin-button {
        margin-left: 10px;
    }
    &:hover {
        color: $primary-color;
        border-color: #b3d7ff;
        background-color: $light-color;
    }
    &.disabled {
        cursor: not-allowed;
        color: $disable-text-color;
        background: #fff;
        border-color: $disable-border-color;
    }
    &.primary {
        color: #fff;
        background: $primary-color;
        border-color: $primary-color;
        &:hover, &:focus {
            background: $primary-hover-color;
            border-color: $primary-hover-color;
        }
        &.disabled {
            background: $primary-disabled-color;
            border-color: $primary-disabled-color;
        }
    }
    &.success {
        color: #fff;
        background: $success-color;
        border-color: $success-color;
    }
    &.warning {
        color: #fff;
        background: $warning-color;
        border-color: $warning-color;
    }
    &.danger {
        color: #fff;
        background: $danger-color;
        border-color: $danger-color;
    }
    &.is-plain {
        color: $primary-color;
        background: #fff;
        border-color: $primary-color;
        height: 20px;
        padding: 0 10px;
        min-width: 60px;
        &:hover {
            color: #fff;
            background: $primary-color;
            border-color: $primary-color;
        }
        &.disabled {
            cursor: not-allowed;
            color: $disable-text-color;
            background: #fff;
            border-color: $disable-border-color;
        }
    }
    &.is-text {
        font-size: 14px;
        border-color: transparent;
        color: $primary-color;
        background: transparent;
        padding: 0;
        &.disabled {
            color: $disable-text-color;
        }
    }
}
// 页面容器
.syswin-page {
    padding: 0 24px 20px;
    background-color: $page-bg;
    box-sizing: border-box;
    & > .syswin-container {
        padding: 0 20px;
        background-color: #fff;
    }
}
// 页面头部
.syswin-top {
    height: 44px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    background-color: $page-bg;
    justify-content: space-between;
    & > .title,
    & > .name {
        font-size: 14px;
        color: #000;
        font-weight: 700;
    }
}
// 布局容器
.syswin-page,
.syswin-container {
    display: flex;
    flex: 1;
    height: 100%;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    // 横向布局
    &.horizontal {
        flex-direction: row;
    }
    // 纵向布局
    &.vertical {
        flex-direction: column;
    }
    // 侧边栏
    .syswin-aside {
        width: 260px;
        position: relative;
        &.hidden {
            width: 0;
        }
    }
    // 侧边栏展开收起按钮
    .syswin-aside__expand {
        position: absolute;
        width: 21px;
        height: 54px;
        right: 0;
        top: 50%;
        cursor: pointer;
        transform: translateY(-50%);
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAA2CAYAAAAoL9IOAAACCElEQVRYhe3YQWsTQRjG8f9kk1ysSTw0N9uKiogWEU8W/BZiP0BvXqQohUAxUAhUStVD6kEvHjxU24PfRMSjYrOJYJvQltII3WZ3x0NNOk1nd5PduQh5IIdsyJPf5p0ZQkRz9wCDGQeqaYOFD4E1oJgyUDYOfAQ2gCJAUmlPp16MKz2nUxNHqtWpGUYaqlMzqDRSpyZKOrBOTZh0KJ0anTSWTk2/NLZOTVeaWKcmjSGdGtHcPZCmyroxcaCMSkelSrQHytzjeWp2nVRKRBb4vuTG9Wu8ef2id027+H9v7+C6LlKzLYSAI8fh8LANgGVZFPI5Jicuh0svFfJ0Oi6iTyqlBAljYxcQIvgutKVPFhb5/uNn4Jvu3b3DSqUMwPsP69iNX5RLz8JLXy0v4Xl+YKmVtrDrDcqVFex6g+lbN6Ol2WyWTscNLM1k0giRIpvJAOD7ZwHa0lK5wpev3wj62h7M3Od56Slvq6usb35mq1Y/87p2+s7xMc6Rox2GlJJc7mLgXQRK9/b28TzvZNp9EUKw02rRbv/pPS/kc0xNToSXLi4ts1WzQzVqrl6Z4t3ay9MPHp38o9L/pHQWaJku/QTc5uTHmbFSgCbw6N+jaaq0mw1gmoRq3aASq8OmH1sdtaRiqQddp0Oph1n8A6vj7KhIddxtGqpOuve1ahMHyjm1MPzHTBGo/gVyOKbfrsOPTQAAAABJRU5ErkJggg==');
        &.is-collapse {
            transform: rotateY(180deg) translate(-100%, -50%);
        }
    }
    // 页面头部
    .syswin-header {
        flex-shrink: 0;
        padding: 16px 0;
    }
    // 页面底部
    .syswin-footer {
        flex-shrink: 0;
        padding: 10px 0;
    }
    // 页面主体
    .syswin-main {
        width: 100%;
        flex-basis: auto;
        flex: 1;
        overflow: auto;
    }
}
// 表单样式（使用el-form添加 class=syswin-form）
// .col-i 表单分 i 列, i值支持 1-5
// .col-i 加在 syswin-form 上控制整个表单，加在 el-form-item 上，单独控制某一项
// 例：
// <el-form class="syswin-form col-2">
//  <el-form-item></el-form-item>
//  <el-form-item></el-form-item>
//  <el-form-item class="col-2"></el-form-item>
// </el-form>
.syswin-form {
    @for $i from 1 through 5 {
        &.col-#{$i} {
            & > .el-form-item {
                float: left;
                width: calc(100/#{$i}*1%);
                margin-right: 0;
                padding-right: 15px;
                box-sizing: border-box;
            }
        }
        & > .el-form-item.col-#{$i} {
            width: calc(100/#{$i}*1%)!important;
        }
    }
    &:after {
        content: '.';
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    .el-form-item__content {
        display: flex;
    }
    .el-select,
    .el-textarea,
    .el-cascader,
    .el-input {
        flex: 1;
        width: 100%;
    }
}

// 滑块（使用el-switch 添加 class=syswin-switch）
// 通过给 el-switch 组件添加active-label 和 inactive-label 属性，滑块内文字描述
// active-label，switch 关闭时的文字描述
// inactive-label，switch 关闭时的文字描述
// 例：<el-switch v-model="value" active-label="启用" inactive-label="禁用" class="syswin-switch"></el-switch>
.syswin-switch {
    position: relative;
    height: 26px;
    line-height: 26px;
    &::before {
        content: attr(inactive-label);
        color: #b3b5b9;
        position: absolute;
        left: 26px;
        z-index: 2;
    }
    .el-switch__core {
        box-sizing: border-box;
        width: 64px!important;
        height: 26px;
        line-height: 26px;
        border-radius: 13px;
        background: #f7faff;
    }
    .el-switch__core::before {
        display: none;
    }
    .el-switch__core::after {
        height: 20px;
        width: 20px;
        background: #e0e5ed;
        left: 2px;
        top: 2px;
    }
    &.is-checked::before {
        content: attr(active-label);
        color: $active-color;
        left: 8px;
    }
    &.is-checked {
        .el-switch__core {
            background-color: #fff !important;
            &::after {
                margin-left: -22px !important;
                background: #4a8df0 !important;
            }
        }
    } 
}
// dialog 弹出框 （使用el-dialog 添加 class=syswin-dialog）
// 底部操作按钮放slot="footer" 插槽中
// 例：
// <el-dialog title="标题" :visible="visible" class="syswin-dialog" width="1200px">
// ...
// <div class="dialog-footer" slot="footer">
//  <el-button type="primary">确定</el-button>
//  <el-button>取消</el-button>
// </div>
// </el-dialog>
.syswin-dialog {
    display: flex;
    align-items: center;
    .el-dialog {
        max-height: 90%;
        margin-top: 0 !important;
        margin-bottom: 0;
        flex-direction: column;
        display: flex;
        //统一控制dialog弹窗样式
        .el-dialog__header {
            padding: 0;
            border-bottom: 1px solid $borderColor;
            .el-dialog__title {
                font-size: 14px;
                line-height: 42px;
                height: 42px;
                display: block;
                padding: 0 24px;
                font-weight: 700;
            }
            .el-dialog__headerbtn {
                top: 12px;
                right: 17px;
            }
        }
        .el-dialog__body {
            padding: 20px 12px;
            overflow: auto;
        }
        .el-dialog__footer {
            border-top: 1px solid $borderColor;
            padding: 15px 20px;
            text-align: center;
        }
    }
    // 全屏弹窗，支持设置el-dialog的fullscreen属性或者直接设置class="syswin-dialog fullscreen"
    &.fullscreen {
        .el-dialog {
            width: 100%;
            height: 100%;
        }
    }
    &.fullscreen .el-dialog,
    .is-fullscreen {
        max-height: 100%;
        .el-dialog__body {
            height: 100%;
            padding: 0;
            overflow: hidden;
        }
    }
    // 禁止弹窗body滚动
    &.no-scroll {
        .el-dialog {
            height: 90%
        }
        .el-dialog__body {
            display: flex;
            flex: 1;
            flex-direction: column;
            overflow: hidden;
        }
    }
    &.is-inner {
        .el-dialog__title {
            text-align: center;
        }
    }
}

/*
  BaseDialog组件使用到的样式，使底部按钮居中
*/
.syswin-dialog-center-footer {
    .el-dialog__body {
        padding: 10px;
        box-sizing: border-box;
    }
    .el-dialog__footer,
    .my-footer {
        text-align: center;
    }
}

//  侧滑窗（使用el-drawer, direction=rtl 添加 class=syswin-drawer）
// 例：
// <el-drawer title="我是标题" :visible.sync="drawer" :direction="rtl" class="syswin-drawer">
//  <div class="drawer-main"></div>
//  <div class="drawer-footer"></div>
// </el-drawer>
// 4种尺寸 mini 400px  small 50%宽度 large 80%宽度 fullscreen全屏
.syswin-drawer {
    &.mini {
        .el-drawer {
            width: 400px;
        }
    }
    &.small {
        .el-drawer {
            width: 50%;
        }
    }
    &.large {
        .el-drawer {
            width: 80%;
        }
    }
    // 全屏侧滑窗
    &.fullscreen {
        .el-drawer {
            width: 100%;
        }
    }
    .el-drawer {
        top: 0;
        bottom: 0;
        height: auto;
    }
    .el-drawer__header {
        font-size: 14px;
        line-height: 42px;
        height: 42px;
        color:#333;
        padding: 0 24px;
        font-weight: 700;
        margin-bottom: 0;
        border-bottom: 1px solid $borderColor;
        .el-drawer__close-btn {
            padding: 0;
        }
    }
    .el-drawer__body {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    // 侧滑窗主体内容
    .drawer-main {
        flex: 1;
    }
    // 侧滑窗底部
    .drawer-footer {
        text-align: center;
        padding: 15px 20px;
        border-top: 1px solid $borderColor;
    }
}
.syswin-top-tabs {
    display:inline-block;
    .el-tabs__item {
        color: #131414;
        font-weight: 400 !important;
        font-size: 16px;
        padding: 0 16px !important;
        font-family: PingFang SC-Regular, PingFang SC;
        &:hover {
            color: $primary-color;
        }
    }
    .el-tabs__nav-wrap::after{
        height: 0!important;
    }
    .el-tabs__item:nth-child(2) {
        padding-left: 0px !important;
    }
    .el-tabs__item::after {
        content: '';
        display: inline-block;
        width: 1px;
        height: 20px;
        background-color: #D8DDE5;
        position: relative;
        left: 16px;
        top: 4px;
    }
    .el-tabs__item:last-child::after {
        content: '';
        display: none;
    }
    .is-active {
        color: $primary-color;
        font-weight: 600 !important;
    }
    .el-tabs__active-bar {
        display: none;
    }
    .el-tabs__item:focus.is-active.is-focus:not(:active) {
        -webkit-box-shadow: none!important;
        box-shadow: none!important;
    }
}
