<template>
    <el-dialog title="新增图标" :close-on-click-modal=" false" append-to-body :visible.sync="visible"
        class="JNPF-dialog JNPF-dialog_center" lock-scroll width="600px">
        <el-row :gutter="15" class="">
            <el-form ref="formRef" :model="dataForm" :rules="dataRule" size="small"
                label-width="100px" label-position="right">
                <template v-if="!loading">
                    <!-- 具体表单 -->
                    <el-col :span="24">
                        <jnpf-form-tip-item label="图标" align="left" prop="enable">
                            <el-upload class="upload-demo" ref="upload" action="#"
                                list-type="picture-card" :http-request="upload"
                                :class="noneBtnDealImg ? 'disUoloadSty':''" :limit="1"
                                :file-list="fileList"
                                :on-success="(res, file, fileList)=>uploadSuccess(res, file, fileList,'img')"
                                :on-remove="(file,fileList)=>handleRemove(file,fileList,'img')"
                                :auto-upload="false">
                                <el-button size="small" type="primary">点击上传</el-button>
                            </el-upload>
                        </jnpf-form-tip-item>
                    </el-col>
                    <!-- 表单结束 -->
                </template>
            </el-form>
        </el-row>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="back()" :loading="btnLoading"> 确
                定</el-button>
        </span>
    </el-dialog>
</template>

<script>

import { minioPath, APIURl } from '@/utils/apiUrl'
import { uploadFuction } from '@/utils/upload'
export default {
    data() {
        return {
            minioPath: minioPath,
            APIURl: APIURl,
            visible: false,
            loading: false,
            dataForm: {},
            dataRule: {},
            btnLoading: false,
            noneBtnDealImg: false,
            fileList: [],
        }
    },
    methods: {
        upload(param) {
            uploadFuction('process/icon', param.file).then(res => {
                if (res.code == 200) {
                    this.$message({
                        message: "新增成功",
                        type: "success",
                        duration: 1500
                    });
                    this.noneBtnDealImg = this.fileList.length >= 1
                    this.visible = false
                    this.$emit('back')
                }
            })
        },
        init() {
            this.visible = true
        },
        submitUpload() {
            this.$refs.upload.submit();
        },
        uploadSuccess(res, file, fileList, name) {


        },
        //图片删除
        handleRemove(file, fileList, name) {
            this.noneBtnDealImg = fileList.length >= 1
        },
        back() {
            this.submitUpload()
        }

    }
}
</script>

<style lang="scss" scoped>
::v-deep .disUoloadSty .el-upload--picture-card {
    display: none; /* 上传按钮隐藏 */
}
</style>