<template>
    <div>
        <div v-if='uploadVisible' class="uploadWarp" :style="{height: (!!activeNames ? 133 : 50) + 'px'  }">
            <el-collapse v-model="activeNames" :accordion='true' style="position: absolute; width: 100%">
                <div class="full-progress" :style="{width: percentage + '%', backgroundColor: !!activeNames ? '#fff' : uploading ? 
                PROGRESS_BG_COLOR.uplaoding : isHasError ? 
                PROGRESS_BG_COLOR.error : PROGRESS_BG_COLOR.success }"></div>
                <el-progress :status="uploading ? null : isHasError ? 'warning' : 'success'" v-show='!!!activeNames' :text-inside="true" :show-text='false' :stroke-width="3" :percentage="percentage" class="smallProgess"></el-progress>
                <i class="el-icon-close" @click="cancelUpload"></i>
                <el-collapse-item :title="uploading ? '上传中...' : '上传完成'" name="1">
                    <div class="tip">
                        <span>已成功同步{{synced}}个文件，共{{fileList.length}}个文件</span>
                        <Icon v-if="!uploading" class="icon" :name="'tagCompleted'" :color="isHasError ? PROGRESS_BG_COLOR.failed : PROGRESS_BG_COLOR.success" />
                    </div>
                    <el-progress 
                        :text-inside="true" 
                        :show-text='false' 
                        :stroke-width="3" 
                        :percentage="percentage"
                        :status="uploading ? null : isHasError ? 'warning' : 'success'"
                    ></el-progress>
                </el-collapse-item>
            </el-collapse>
        </div>
        <Modal
            :show="modalStatusTip"
            title="警告"
            mode="tip"
            type="info"
            @close="modalClose"
            @confirm='confirmHandle'
        >
            <template #content>
                确定取消上传
            </template>
            <template #handle>
                <Button @click="modalClose" type="default">取消</Button>
                <Button @click="confirmHandle" type="error">确定</Button>
            </template>
        </Modal>
    </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import { PROGRESS_BG_COLOR } from './constant'
import FileController from '@/controller/fileController'
export default {
    components: {

    },
    data() {
        return {
            activeNames: '1',
            modalStatusTip: false,  //确认框
            uploading: false,
            percentage: 0,   //进度比例
            PROGRESS_BG_COLOR, 
            synced: 0,
            isHasError: false,  //上传是否出现错误
            uploadSuccessList: [],
        }
    },
    watch: {
        async uploadVisible(nv, ov) {
            const that = this;
            if (nv) {
                this.uploading = true
                const res = await FileController.uploadFiles({
                    uploadProgressCall(_obj) {
                        console.log("uploadProgressCall", _obj);
                    },
                    oneUploadedCall(_obj) {
                        that.synced  += 1
                        that.percentage = (that.synced / that.fileList?.length) * 100;
                        if(that.percentage === 100) {
                            that.uploading = false
                        }
                        that.uploadSuccessList.push(_obj)
                    },
                    files: that.fileList
                });
                console.log({res})
            }
        },
        uploading(nv, ov) {
            if(!nv){
                this.updata({successList: this.uploadSuccessList})
            }
        }
    },
    computed: {
        ...mapState('uploadFile', ['uploadVisible', 'fileList'])
    },

    mounted() {
       
        // setInterval(() => {
        //     if (this.percentage < 99.9) {
        //          this.percentage += 0.1
        //          console.log(this.percentage)
        //     }

        // }, 20);
        
    }, 
    methods: {
        ...mapMutations('uploadFile', ['updata']),
        onprogress(param) {
            console.log({param})
        },
        onuploaded(param) {
            console.log({param})
        },
        cancelUpload() {
            this.modalStatusTip = true;
        },
        confirmHandle() {
            this.modalStatusTip = false;
            this.updata({'uploadVisible': false, 'fileList': []});
            this.uploading = false;
            this.percentage = 0;
            this.synced = 0;
            this.uploadSuccessList = [];
        },
        modalClose() {
            this.modalStatusTip = false;
        },
    },
}
</script>

<style scoped lang='less'>
    .uploadWarp {
        position: fixed;
        right: 64px;
        z-index: 99;
        top: 75%;
        width: 420px;
        transition: height 0.6s ease;
        box-shadow: 0px 0px 6px #aaa;
        & /deep/ .el-collapse-item__header {
            padding: 16px;
            border-bottom: 1px solid #EBEEF5;
        }
        & /deep/ .el-collapse-item__content {
            padding: 25px 16px;
        }
        & /deep/ .el-collapse-item__arrow {
            position: relative;
            right: 20px
        }
        & /deep/ .el-icon-close {
            position: absolute;
            right: 20px;
            top: 16px
        }
        .full-progress {
            position: absolute;
            top: -1px;
            left: 0;
            height: 47px;
            opacity: 0.2;
            transition: width 0.6s ease;
        }
        .smallProgess {
            position: absolute;
            left: 0;
            width: 100%;
            top: 46px;
            // & /deep/ .el-progress-bar__inner {
            //     transition: none;
            // }
        }
        .tip {
            display: flex;
            justify-content: space-between;
            padding-bottom: 8px;
        }

    }
</style>