@import '../default/var';
// @import './icon';
.#{$prefix} {
    &-upload {
        display: inline-block;
        text-align: center;
        cursor: pointer;
        outline: none;
        vertical-align: top;
        &__input {
            display: none;
        }
        &__tip {
            font-size: 12px;
            color: $neutral-color-major;
        }
        &-list {
            margin: 0;
            padding: 0;
            list-style: none;
            &__item {
                width: 100%;
                margin-top: 24px;
                font-size: 14px;
                color: $neutral-color-major;
                position: relative;
                letter-spacing: 0;
                text-align: justify;
                line-height: 1.8;
                border: 4px;
                transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
                cursor: default;
                &:focus {
                    outline: none;
                }
                &-name {
                    display: block;
                    margin-right: 40px;
                    padding-left: 4px;
                    color: $neutral-color-major;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    transition: color 0.3s;
                    & [class^='jdd-icon'] {
                        height: 100%;
                        margin-right: 7px;
                        font-size: 14px;
                        color: $neutral-color-major;
                    }
                }
                & .#{$prefix}-icon-upload-success {
                    color: $minor-color-success;
                }
                & .#{$prefix}-icon-error-l {
                    display: none;
                    position: absolute;
                    top: 5px;
                    right: 5px;
                    cursor: pointer;
                    opacity: 0.75;
                    color: $neutral-color-major;
                    transform: scale(0.5);
                }
                &:hover {
                    background-color: #f5f7fa;
                    & .#{$prefix}-icon-error-l {
                        display: inline-block;
                    }
                }
            }
            &--file {
                margin: 0;
                display: inline;
                vertical-align: top;
                position: relative;
                & .#{$prefix}-upload-list__item {
                    width: 156px;
                    height: 100px;
                    margin: 0 20px 20px 0;
                    display: inline-block;
                    // overflow: hidden;
                    background-color: #fff;
                    border: 1px solid #ececec;
                    border-radius: 2px;
                    vertical-align: top;
                    &-name {
                        display: none;
                    }
                    &-thumbnail {
                        width: 100%;
                        height: 100%;
                    }
                    & .#{$prefix}-icon-error-l {
                        display: none;
                    }
                    &-status-label {
                        width: 20px;
                        height: 20px;
                        position: absolute;
                        right: -10px;
                        top: -10px;
                        background-color: #fff;
                        border-radius: 50%;
                        box-shadow: 0 0 5px #eee;
                        text-align: center;
                        & .#{$prefix}-icon-error-l {
                            display: block;
                            top: 2px;
                            right: 1px;
                            transform: scale(0.4);
                        }
                    }
                    &-icon {
                        width: 36px;
                        height: 44px;
                        position: relative;
                        left: 50%;
                        margin-top: 15px;
                        transform: translateX(-50%);
                        &.xls {
                            background: url(//storage.360buyimg.com/go-design/images/xls.png) no-repeat;
                            background-size: contain;
                            background-position: top;
                        }
                        &.txt {
                            background: url(//storage.360buyimg.com/go-design/images/txt.png) no-repeat;
                            background-size: contain;
                            background-position: top;
                        }
                        &.ppt {
                            background: url(//storage.360buyimg.com/go-design/images/ppt.png) no-repeat;
                            background-size: contain;
                            background-position: top;
                        }
                        &.zip {
                            background: url(//storage.360buyimg.com/go-design/images/zip.png) no-repeat;
                            background-size: contain;
                            background-position: top;
                        }
                        &.doc {
                            background: url(//storage.360buyimg.com/go-design/images/doc.png) no-repeat;
                            background-size: contain;
                            background-position: top;
                        }
                        &__name {
                            display: flex;
                            justify-content: center;
                            width: 100%;
                            margin-top: 8px;
                            padding: 0 15px;
                            color: #8ea0fe;
                            font-size: 12px;
                            overflow: hidden;
                            white-space: nowrap;
                            &>span:first-child {
                                display: inline-block;
                                max-width: 70%;
                                overflow: hidden;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                vertical-align: middle;
                                text-align: right;
                            }
                            &>span:last-child {
                                display: inline-block;
                                vertical-align: middle;
                                text-align: left;
                            }
                        }
                    }
                }
                & .#{$prefix}-progress {
                    &--line {
                        width: 96px;
                        padding: 0;
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        & .#{$prefix}-progress__inner__text {
                            width: 100%;
                            bottom: 0;
                            &>span {
                                display: none;
                            }
                            &>i {
                                display: none;
                            }
                        }
                    }
                    &--running {
                        & .#{$prefix}-progress__inner__text {
                            &::before {
                                content: '上传中...';
                                width: 100%;
                                display: block;
                                margin-top: 8px;
                                font-size: 12px;
                                line-height: 14px;
                                text-align: center;
                                color: #999;
                            }
                        }
                    }
                    &--success {
                        & .#{$prefix}-progress__inner__text {
                            &::before {
                                content: '上传成功';
                                width: 100%;
                                display: block;
                                margin-top: 8px;
                                font-size: 12px;
                                line-height: 14px;
                                text-align: center;
                                color: #0bdba8;
                            }
                        }
                    }
                    &--error {
                        & .#{$prefix}-progress__inner__text {
                            &::before {
                                content: '上传失败';
                                width: 100%;
                                display: block;
                                margin-top: 8px;
                                font-size: 12px;
                                line-height: 14px;
                                text-align: center;
                                color: #f52f3e;
                            }
                        }
                    }
                }
            }
            &--card {
                margin: 0;
                vertical-align: top;
                position: relative;
                display: inline;
                & .#{$prefix}-upload-list__item {
                    width: 250px;
                    height: 250px;
                    margin: 0 20px 20px 0;
                    display: inline-block;
                    vertical-align: top;
                    position: relative;
                    border: 1px solid #ececec;
                    &-name {
                        display: none;
                    }
                    &-thumbnail {
                        width: 100%;
                        height: 100%;
                        background-repeat: no-repeat;
                        background-position: center;
                        background-size: contain;
                    }
                    & .#{$prefix}-icon-error-l {
                        display: none;
                    }
                    &-status-label {
                        display: none;
                    }
                    &-icon {
                        width: 36px;
                        height: 44px;
                        position: relative;
                        left: 50%;
                        margin-top: 90px;
                        transform: translateX(-50%);
                        &.xls {
                            background: url(//storage.360buyimg.com/go-design/images/xls.png) no-repeat;
                            background-size: contain;
                            background-position: top;
                        }
                        &.txt {
                            background: url(//storage.360buyimg.com/go-design/images/txt.png) no-repeat;
                            background-size: contain;
                            background-position: top;
                        }
                        &.ppt {
                            background: url(//storage.360buyimg.com/go-design/images/ppt.png) no-repeat;
                            background-size: contain;
                            background-position: top;
                        }
                        &.zip {
                            background: url(//storage.360buyimg.com/go-design/images/zip.png) no-repeat;
                            background-size: contain;
                            background-position: top;
                        }
                        &.doc {
                            background: url(//storage.360buyimg.com/go-design/images/doc.png) no-repeat;
                            background-size: contain;
                            background-position: top;
                        }
                        &__name {
                            display: flex;
                            justify-content: center;
                            width: 100%;
                            margin-top: 8px;
                            padding: 0 15px;
                            color: #8ea0fe;
                            font-size: 12px;
                            overflow: hidden;
                            white-space: nowrap;
                            &>span:first-child {
                                display: inline-block;
                                max-width: 70%;
                                overflow: hidden;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                vertical-align: middle;
                                text-align: right;
                            }
                            &>span:last-child {
                                display: inline-block;
                                vertical-align: middle;
                                text-align: left;
                            }
                        }
                    }
                    &-actions {
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        top: 0;
                        left: 0;
                        background-color: rgba(0, 0, 0, 0.5);
                        color: #fff;
                        font-size: 20px;
                        opacity: 0;
                        text-align: center;
                        transition: opacity 0.3s;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        &>span {
                            display: none;
                            cursor: pointer;
                            &>i {
                                font-size: 20px;
                            }
                        }
                        &:hover {
                            opacity: 1;
                            &>span {
                                display: inline-block;
                            }
                            &>span+span {
                                margin-left: 40px;
                            }
                        }
                    }
                }
                & .#{$prefix}-progress {
                    &--line {
                        width: 96px;
                        padding: 0;
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        & .#{$prefix}-progress__inner__text {
                            width: 100%;
                            bottom: 0;
                            &>span {
                                display: none;
                            }
                            &>i {
                                display: none;
                            }
                        }
                    }
                    &--running {
                        & .#{$prefix}-progress__inner__text {
                            &::before {
                                content: '上传中...';
                                width: 100%;
                                display: block;
                                margin-top: 8px;
                                font-size: 12px;
                                line-height: 14px;
                                text-align: center;
                                color: #999;
                            }
                        }
                    }
                    &--success {
                        & .#{$prefix}-progress__inner__text {
                            &::before {
                                content: '上传成功';
                                width: 100%;
                                display: block;
                                margin-top: 8px;
                                font-size: 12px;
                                line-height: 14px;
                                text-align: center;
                                color: #0bdba8;
                            }
                        }
                    }
                    &--error {
                        & .#{$prefix}-progress__inner__text {
                            &::before {
                                content: '上传失败';
                                width: 100%;
                                display: block;
                                margin-top: 8px;
                                font-size: 12px;
                                line-height: 14px;
                                text-align: center;
                                color: #f52f3e;
                            }
                        }
                    }
                }
            }
        }
        &--file {
            width: 156px;
            height: 100px;
            margin: 0 20px 20px 0;
            background-color: #fff;
            border: 1px dashed #ececec;
            border-radius: 2px;
        }
        &--card {
            width: 250px;
            height: 250px;
            margin: 0 20px 20px 0;
            background: #f5f7fb;
            border: 1px dashed #abc3ff;
            border-radius: 2px;
            position: relative;
            &__tip {
                visibility: hidden;
                opacity: 0;
            }
            &:hover {
                & .#{$prefix}-upload--card__tip {
                    width: 100%;
                    min-height: 40px;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background-color: #abc3ff;
                    color: #fff;
                    font-size: 14px;
                    text-align: center;
                    visibility: visible;
                    opacity: 1;
                }
            }
        }
        &-dragger {
            width: 100%;
            height: 100%;
            position: relative;
            background-color: #fff;
            border: 1px dashed #ececec;
            border-radius: 2px;
            box-sizing: border-box;
            text-align: center;
            cursor: pointer;
            overflow: hidden;
            &.is-dragover {
                border-color: #abc3ff;
                background-color: #f5f7fb;
            }
        }
        &__icon-text {
            font-size: 14px;
            line-height: 14px;
            margin-top: 28px;
            margin-bottom: 15px;
            text-align: center;
            color: #4260fd;
            &.#{$prefix}-icon-plus {
                font-size: 14px;
                line-height: 14px;
                margin-right: 5px;
            }
        }
        &__text {
            font-family: PingFang-SC-Medium;
            font-size: 12px;
            color: $neutral-color-assist;
            letter-spacing: 0;
            text-align: center;
        }
        &-label__btn {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    }
}