<template>
  <el-dialog 
    :append-to-body="true"
    :title="$t('label.upload_pic')"
    :visible.sync="fileUploadVisible" 
    v-if="fileUploadVisible" 
    :close-on-click-modal="false"
    custom-class="dialogPaddingTop0">
    <el-container  >
      <el-header style="height:28px;"> 
        <el-row :span="24">
          <el-col :span="9">{{upload_img}}</el-col>
        </el-row>
      </el-header>
      <el-upload
        ref="upload"
        class="uploadIcon"
        accept=".png,.gif,.jpg,.jpeg"
        drag
        :action="getUrl()"
        :on-success="uploadImageSuccess"
        :on-error="uploadError"
        :on-remove="removeImage"
        :data="data"
        :before-upload="beforeUpload"
        >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">{{$t('upload_txt')}}<em>{{$t('upload_click')}}</em></div>
      </el-upload>
      <el-row class="mt-3 mb-3">
          <el-col :span="24"  style="text-align:right">
            <span class="toolbar-buttons">
              <el-button type="primary" plain @click="onIconBack" size="small">{{$t('btns.cancel')}}</el-button>
              <el-button type="primary" @click="onSaveImage" size="small">{{$t('btns.confirm')}}</el-button>
            </span>
          </el-col>
        </el-row>
    </el-container>
  </el-dialog>
</template>

<script>
import {getLogoUrl} from "@/service/CommontoolsAPI.js";

export default {
  
  data() {
    return {
      icons:[],
      fileData:[],
      data:{
        path:'/uploads/lib/icon/upload',
        filePath:'',
      },
      loading:false,
      limitNum:1,
    };
  },
  
  created() {
    this.fileData=[];
    let year = new Date().getFullYear();
    this.data.filePath='/uploads/'+year;
  },
  computed: {
    fileUploadVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      }
    }
  },
  props: ["visible"],
  methods: {
    beforeUpload(file) {
      console.log(file)
      var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)
      const extension = testmsg === 'jpg' ||  testmsg === 'JPG' ||  testmsg === 'png' ||  testmsg === 'PNG' || testmsg === 'jpeg' || testmsg === 'JPEG' || testmsg === 'gif' ||  testmsg === 'GIF';
      if(!extension) {
        this.$message({
          message: this.$t('msg.just_jpg_png'),
          type: 'error'
        });
        return false;
      }
      return extension
    },
    removeImage(file){
      let delIcon=[];
      file.response.data.forEach(elm=>{
        delIcon.push(elm.filePath);
      })
      this.$emit("del", delIcon);
    },
    uploadImageSuccess(res){
      if(res.errcode==0){
        let preIconsUp=[...this.fileData]
        this.fileData=[...preIconsUp,...res.data];
      }else{
        this.$message({
          showClose: true,
          message: res.errmsg,
          type: "error"
        });
        this.$refs.upload.clearFiles();
      }

    },
    uploadError(err){
      this.$message({
        showClose: true,
        message:this.$t('msg.upload_err') + JSON.parse(err.message).message,
        type:'error'
      });
    },
    onSaveImage(){
      this.fileUploadVisible=false;
      this.$emit("checkUpload", this.fileData);
    },
    onIconBack(){
      let delIcon=[];
      this.fileData.forEach(elm=>{
        delIcon.push(elm.filePath);
      })
      if(delIcon.length>0)
      this.$emit("del", delIcon);      
      this.fileUploadVisible=false;

    },
    getUrl(){
      return getLogoUrl("/api/designtime/applications/uploads?path="+this.data.path+"&icon=true")
    },
    
  }
};
</script>

<style lang="scss" scoped>
</style>