<template>
    <el-row>
        <el-form-item label="文件大小">
            <el-input v-model.number="activeData.fileSize" placeholder="请输入文件大小" @change="onChange">
                <el-select slot="append" v-model="activeData.sizeUnit" :style="{ width: '66px' }"
                    @change="onChange">
                    <el-option label="KB" value="KB" />
                    <el-option label="MB" value="MB" />
                </el-select>
            </el-input>
        </el-form-item>
        <el-form-item label="文件类型限制" v-if="visible">
            <el-select v-model="regexValue" placeholder="选择文件类型限制" clearable :multiple="true"
                filterable>
                <el-option v-for="(item,i) in fileTypeOption" :key="i" :label="item['fullName']"
                    :value="item['enCode']">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="最大上传数">
            <el-input-number v-model="activeData.limit" :min="0" placeholder="最大上传数" :step="1"
                :precision="0" controls-position="right" />
        </el-form-item>
        <el-form-item label="附件名称">
            <el-input v-model="activeData.moduleFileName" placeholder="请上传附件" disabled />
        </el-form-item>
        <el-form-item label="附件地址">
            <el-input v-model="activeData.moduleFileId" placeholder="请上传附件" disabled />
        </el-form-item>
        <el-form-item label="附件">
            <el-upload class="upload-demo" action="#" :http-request="upload"
                :on-success="uploadSuccess" :before-upload="beforeUpload" :on-remove="onRemove"
                :limit="1" :on-preview="onPreview" :file-list="fileList">
                <el-button size="small" type="primary">点击上传</el-button>
                <span v-if="activeData.moduleFileName" style="margin-left: 10px; color: #1890ff;"
                    @click.stop="onPreview">下载</span>
                <span v-if="activeData.moduleFileName" style="margin-left: 10px; color: #f56c6c;"
                    @click.stop="onRemove">删除</span>

            </el-upload>
        </el-form-item>

    </el-row>
</template>


<script>
import comMixin from './mixin';

import { minioPath } from '@/utils/apiUrl'
import { uploadFuction } from '@/utils/upload'
import { getDictionaryDataSelector } from '@/api/systemData/dictionary'


export default {
    props: ['activeData'],
    mixins: [comMixin],
    data() {
        return {
            fileList: [],
            regexValue: [],
            fileTypeOption: [],
            visible: false
        }
    },
    watch: {
        regexValue(newValue, oldValue) {
            console.log(newValue)
            this.activeData.regex = newValue.join('/')
        }
    },
    computed: {
        acceptArray: {
            get() {
                if (!this.activeData.accept) return []
                const str = this.activeData.accept.replace('.xls,.xlsx', '.xls|.xlsx').replace('.doc,.docx', '.doc|.docx')
                const list = str.split(',').map(o => o.replace('|', ','))
                return list
            },
            set(val) {
                this.activeData.accept = val.join(',');
            }
        },
    },
    async created() {
        await this.getFileTypeOption()
        this.regexValue = this.activeData.regex.split('/')
        this.visible = true
    },
    methods: {
        getFileTypeOption() {
            return new Promise((resolve, reject) => {
                getDictionaryDataSelector('596355335980057669').then(res => {
                    this.fileTypeOption = res.data.list
                    resolve(true)
                })
            })
        },
        upload(param) {
            console.log(param)
            uploadFuction('process/template', param.file).then(res => {
                if (res.code == 200) {
                    this.activeData.moduleFileId = res.data.url
                    this.activeData.moduleFileName = res.data.name
                }
            })
        },
        onChange() {
            this.activeData.__config__.renderKey = +new Date()
        },
        uploadSuccess(res, file) {
            console.log(res)
            console.log(file)


        },
        beforeUpload(file) {
        },
        onRemove() {
            this.activeData.moduleFileId = ''
            this.activeData.moduleFileName = ''
            this.fileList = []
        },
        onPreview() {
            this.pcDownloadFile(this.activeData.moduleFileId, this.activeData.moduleFileName)
        },
        pcDownloadFile(url, name) {
            console.log(url)
            url = minioPath + url
            //保存到本地
            try {
                const x = new window.XMLHttpRequest();
                x.open('GET', url, true);
                x.responseType = 'blob';
                x.onload = () => {
                    const url = window.URL.createObjectURL(x.response);
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = name;
                    a.click();
                };
                x.send();


                this.$message({
                    message: '下载成功',
                    type: 'success',
                    duration: 1000,
                })
            } catch (error) {
                this.$message({
                    message: '下载失败',
                    type: 'warning',
                    duration: 1000,
                })
            }
        },
    }
}
</script>