<template>
    <el-dialog title="素材库" :visible.sync="dialogVisiblefile" :append-to-body="true" width="100%"
        :before-close="handleClose" class="dialog_diy">
        <div style="width: 100%;height: 100%;">
            <fileBox type="2" @addFile="addFile"></fileBox>
        </div>
    </el-dialog>    
</template>
  
<script>
import fileBox from './library.vue';
export default {
    components: {
        fileBox,
    },
    props: {
        dialogVisiblefile: {
            type: Boolean,
            default: false
        },
    },
    data() {
        return {
            progress: 0,
            isFinishSize: 0,
            proVisible: false,
            isAllSize: 0,
            dialogVisiblefile2: false,
            userid: this.$route.query.userid,
            page: 1,
            isLoading: false,
            total: 0,
            chapInfo: [],
            choose: 0,
            mtp: require("../../../../assets/tup1.png"),
            msp: require("../../../../assets/icon/fileIcon/isVideo.png"),
            mfj: require("../../../../assets/icon/fileIcon/word2.png"),
        };
    },
    methods: {
        handleClose(done) {
            this.close();
            done();
        },
        handleClose2(done) {
            done();
        },
        close() {
            this.$emit("update:dialogVisiblefile", false);
        },
        addFile(file){
            for(var i = 0; i < file.length; i++){
                this.$emit("setCheckJson", file[i].name, file[i].file, file[i].type);
            }
            this.close();
            this.$message.success('添加成功');
            // this.$emit("setCheckJson", name, url, _type);
        }

    }   
};
</script>
  
<style scoped>
.dialog_diy>>>.el-dialog {
    height: 100%;
    margin: 0 auto !important;
}

.dialog_diy>>>.el-dialog__header {
    background: #454545 !important;
    padding: 15px 20px;
}

.dialog_diy>>>.el-dialog__body {
    height: calc(100% - 55px);
    box-sizing: border-box;
    padding: 0px;
}

.dialog_diy>>>.el-dialog__title {
    color: #fff;
}

.dialog_diy>>>.el-dialog__headerbtn {
    top: 19px;
}

.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close {
    color: #fff;
}

.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close:hover {
    color: #fff;
}

.dialog_diy>>>.el-dialog__body,
.dialog_diy>>>.el-dialog__footer {
    background: #fafafa;
}


</style>
  