<template>
    <div>
        <div v-if='uploadVisible' class="uploadWarp">
            <el-collapse v-model="activeNames" style="position: absolute; width: 100%">
                <div class="full-progress" :style="{width: percentage + '%', 'background-color': PROGRESS_BG_COLOR.success }"></div>
                <el-progress :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>已成功同步100个文件，共200个文件</span>
                        <Icon class="icon" :name="'tagCompleted'" />
                    </div>
                    <el-progress :text-inside="true" :show-text='false' :stroke-width="3" :percentage="percentage"></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 } from 'vuex'
import { PROGRESS_BG_COLOR } from './constant'
export default {
    components: {

    },
    data() {
        return {
            activeNames: '1',
            modalStatusTip: false,
            uploading: true,
            percentage: 0,
            PROGRESS_BG_COLOR,
        }
    },
    watch: {
        uploadVisible(nv, ov) {
            console.log({nv, ov})
        }
    },
    computed: {
        ...mapState('uploadFile', ['uploadVisible'])
    },
    mounted() {
        // setInterval(() => {
        //     if (this.percentage < 99.9) {
        //          this.percentage += 0.1
        //          console.log(this.percentage)
        //     }

        // }, 20);

    },
    methods: {
        cancelUpload() {
            this.modalStatusTip = true;
        },
        confirmHandle() {
            console.log(123)
        },
        modalClose() {
            this.modalStatusTip = false
        },
    },
}
</script>

<style scoped lang='less'>
    .uploadWarp {
        position: fixed;
        right: 64px;
        bottom: 80px;
        width: 420px;
        height: 133px;
        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;
        }
        .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>