<template>
  <div class="form-container">
      <el-form ref="forms" :model="form" label-width="80px">
            <el-form-item label="服务名称">
              <el-input
                placeholder="请输入服务名称"
                style="width: 300px"
                v-model="form.serverName"
              ></el-input>
            </el-form-item>
            <el-form-item label="空间参考">
              <el-select
                style="width: 300px"
                v-model="form.spaceType"
                placeholder="请选择空间参考"
              >
                <el-option
                  v-for="(item, index) in getDictone"
                  :key="index"
                  :label="item.dictlabel"
                  :value="item.dictlabel"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-upload
            drag
            multiple
            :action="'http://192.168.10.136:8909/geoserver/uploadExcelFile'"
            name="file"
            :headers="headers"
            :data="{ serverName:form.serverName,spaceType:form.spaceType }"
            :before-upload="onBeforeUpload"
            :on-success="handleSuccess"
            :on-error="Onerror"
            :disabled="disabled"
          >
            <img src="/images/img26.png" alt="" />
            <div class="el-upload__text">
              将shp文件拖到此处，或<em>点击上传</em>
            </div>
            <div slot="tip">请先配置图层属性再上传</div>
          </el-upload>

            <el-form-item>
                <el-button @click="$emit('close')">取消</el-button>
                <el-button type="primary" size="small" @click.native="onSubmit">提交</el-button>
            </el-form-item>
          </el-form>
  </div>
</template>

<script>
import { getMethodCommon, postMethodCommon } from '../../api/Api';
  export default {
    name: 'data_upload',
    data(){
        return {
            headers: {
        Authorization: localStorage.getItem("X-Token") || "",
      },
            form:{
                serverName:null,

            },
            getDictone:[
                {
                    "dictvalue": "1",
                    "dictlabel": "EPSG:4326"
                },
                {
                    "dictvalue": "2",
                    "dictlabel": "EPSG:3857"
                }
            ],
            fileList:[],
            
        }
    },
    methods:{
        beforeUpload(file) {
            let extension = file.name.substring(file.name.lastIndexOf('.') + 1)
            let size = file.size / 1024 / 1024;
            if (extension !== 'xls') {
                this.$message.warning('只能上传后缀是.shp的文件')
                return false
            }
            if (size > 100) {
                this.$message.warning('文件大小不得超过100M')
                return false
            }
            return true
        },
        // UploadCoverImage(param){
        //     let formData = new FormData()
        //     formData.append('files', param.file)
        //     console.log("formData",formData);
        // },

        handleFileChange(file, fileList) {
            let f = {...file}

        },

        onSubmit(){
            getMethodCommon("/geoserver/publishLayer/"+this.tableName).then(res=>{
                if(res.data.code == 200){
                    this.$emit("close");
                    this.$message({
                        type:"success",
                        message:"上传服务成功"
                    })
                }
            })
       },
        handleSuccess(response, file, fileList){
            console.log("response",response);
            this.tableName = response.msg;
        },
    }
  }
</script>

<style scoped>
  .form-container{
      width:500px;
      padding:30px;
      height:500px;
      background: rgba(0,0,0,0.7);
      border:1px solid #108eff;
      position:absolute;
      top:50%;
      left:50%;
      transform: translate(-50%,-50%);
}
::v-deep .el-upload-dragger{
    background:none;
    border:1px solid #108eff;
    color:#fff;
    margin:20px auto;
    width:400px;
    padding:20px;
}
::v-deep .el-upload-dragger .el-upload__text{
    color:#ccc;
}
::v-deep .el-upload-list__item-name{
    height:30px;
}
</style>