<template>
  <el-row>
    <el-col :span="24">
      <el-form :model="form" ref="dataRef" label-width="120px" :rules="rules">
        <el-form-item label="dwg文件:" >
          <el-upload class="upload-demo"
            :before-upload="beforeUpload"
            fileLIst
            action="#"
            accept=".dwg"
            drag
            :limit="1">
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">拖拽文件到此 <em>点击上传</em></div>
            <template #tip>
              <div class="el-upload__tip">仅可上传dwg文件</div>
            </template>
          </el-upload>
        </el-form-item>
        <el-form-item label="文件名称:" prop="name">
          <el-input placeholder="请输入" v-model="form.name" />
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>

  <div class="footBottm">
    <el-button
      v-hasPermi="['ldmap:role:edit']"
      type="primary"
      @click="add()"
      style="margin-right: 50px"
      :loading="loading"
      >确定</el-button
    >
    <el-button
      type="warning"
      @click="
        () => {
          emit('closeAddDialog');
        }
      "
      >取消</el-button
    >
  </div>
</template>
<script setup lang="ts">
  import useCadStore from "@map/store/modules/cad"
  const cadData = useCadStore()
const loading = ref(false);

const emit = defineEmits(["closeAddDialog"]);
const { proxy } = getCurrentInstance();
const rules = ref({
  name: [{ required: true, message: "数据不能为空", trigger: "blur" }],
});
const form = ref({name:''});
const valueData = new FormData()
function add() {
  proxy.$refs["dataRef"].validate((valid) => {
    valueData.append('name',form.value.name)
    console.log(valueData)
    cadData.addCadFile(valueData).then(res=>{
      emit('closeAddDialog');
    })
  });
}
const beforeUpload =(e)=>{
   valueData.append('file',e)
   form.value.name = e.name.substring(0,e.name.indexOf('.'))

}
</script>
<style scoped lang="scss">
:deep(.upload-demo) {
  width: 100%;
}
/*
:deep(.el-textarea__inner) {
background: transparent;
color: #fff;
}
:deep {
.el-input__wrapper {
background: rgb(0, 0, 0, 0.1);
}
.el-input__inner {
color: #fff;
}
} */
.footBottm {
  display: flex;
  justify-content: end;
}

.info {
  color: #fff;
  padding-left: 8px;
}
</style>
