<template>
    <div class="hello">
        <div style="width: 100%">
            <el-upload
                :http-request="handleUpload"
                :before-remove="beforeRemove"
                :accept="accept"
                :show-file-list="false"
                :on-remove="handleRemove"
                class="upload-demo"
                :before-upload="beforeUpload"
                action
                multiple
            >
                <el-button size="small" type="primary" v-loading.fullscreen.lock="loading">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">{{ tip }}</div>
            </el-upload>
        </div>
        <div style="width: 100%">
            <dataTable :table-data="fileList" :columns="columns" :is-pageobj="false">
                <el-table-column slot="operate" label="文件大小" align="center" fixed="right" width="300">
                    <template slot-scope="scope">
                        <div>{{ getMb(scope.row.size) }}KB</div>
                    </template>
                </el-table-column>
                <el-table-column slot="operate" label="价格" align="center" fixed="right" width="300" v-if="type == 0">
                    <template slot-scope="scope">
                        <el-radio-group v-model="scope.row.free">
                            <el-radio :label="true">免费</el-radio>
                            <el-radio :label="false">收费</el-radio>
                            <el-input-number
                                v-model="scope.row.price"
                                v-show="scope.row.free == false"
                                :min="0"
                                :controls="false"
                                :precision="2"
                                placeholder="价格(元)"
                            ></el-input-number>
                        </el-radio-group>
                    </template>
                </el-table-column>
                <el-table-column slot="operate" label="操作" align="center" fixed="right" width="100">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="handleDelete(scope.$index)">删除</el-button>
                    </template>
                </el-table-column>
            </dataTable>
        </div>
    </div>
</template>

<script>
import dataTable from '@components/nopageTable.vue';
import { put, getFileNameUUID } from '@api/ali-oss';
import { getTime, getcurrentTime } from '@utils/time';
export default {
    components: {
        dataTable
    },
    props: {
        type: {
            type: Number,
            default: 0
        },
        accept: {
            type: String,
            default: '.pdf,.jpg,.jpeg,.zip,.rar,.doc,.docx'
        },
        tip: {
            type: String,
            default: '上传大小不能超过100M'
        },
        limit: {
            type: Number,
            default: 3
        },
        action: {
            type: String,
            default: ''
        },
        headers: {
            type: Object,
            default: () => {}
        },
        name: {
            type: String,
            default: ''
        },
        listType: {
            type: String,
            default: 'text'
        },
        max: {
            type: Number,
            default: 100
        },
        fileList: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
             loading: false,
            tableData: [],
            columns: [
                {
                    label: '文件名称',
                    prop: 'name'
                },

                {
                    label: '上传时间',
                    prop: 'time'
                },
                {
                    slot: 'operate'
                }
            ]
        };
    },
    created() {
        console.log(this.type);
    },
    methods: {
        getMb(size) {
            let sieze1 = size / 1024;
            let integer = sieze1.toFixed(0);
            return integer;
        },
        emitInput(fileList) {
            let value = [];
            for (let i = 0; i < fileList.length; i++) {
                let message = {};
                message.name = fileList[0].name;
                message.size = fileList[0].size;
                message.createTime = fileList[0].time;
                message.url = fileList[0].url;
                value.push(message);
            }
            console.log(value)
            this.$emit('input', value);
        },
        beforeUpload(file) {
            const max = this.max;
            const isLt2M = file.size / 1024 / 1024 < max;
            if (!isLt2M) {
                this.$message.error(`上传附件大小不能超过 ${max} MB!`);
                return
            }
            if (this.fileList.length == this.limit) {
                this.$message.warning(`每次只能上传 ${this.limit} 个文件`);
                return;
            }
             this.loading=true
             // 生成的文件名称
            let objName = getFileNameUUID();
            // 调用 ali-oss 中的方法
            put(`${objName}${file.name}`, file).then((res) => {
                res.size = file.size;
                res.uploadTime = getcurrentTime();
                res.time = getTime();
                res.free = true;
                res.price = '';
                // /* res.fileName = res.name */
                res.fileName = file.name;
                res.fileUrl = res.url;
                this.fileList.push(res);
                this.$emit('input', this.fileList);
                this.loading=false
            });
        },
        handleRemove(file, fileList, index) {
            console.log(fileList);
            this.$emit('on-remove', file, fileList);
            this.fileList = fileList;
            this.emitInput(fileList);
        },

        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        /**
         * 自定义上传方法
         */
        handleUpload(option) {},
        handleDelete(index) {
            this.fileList.splice(index, 1);
            this.$emit('input', this.fileList);
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
