<template>
  <el-row>
    <el-col :span="24">
      <el-form :model="form" ref="dataRef" label-width="120px" :rules="rules">
        <el-form-item label="航拍图文件:" prop="tiffUrl">
          <upload :limit="1" @setFileUrl="settiffUrl"></upload>
        </el-form-item>
        <el-form-item label="高程文件:" prop="ascUrl">
          <upload :limit="1" @setFileUrl="setascUrl"></upload>
        </el-form-item>
        <el-form-item label="图层名称:" prop="layerName">
          <el-input placeholder="请输入" v-model="form.layerName" />
        </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";
import upload from "./upload";
import {layersAdd} from "@map/api/layer"
import emitter from "@map/utils/emitter"
const cadData = useCadStore();
const loading = ref(false);

const emit = defineEmits(["closeAddDialog"]);
const { proxy } = getCurrentInstance();
const checktiffUrl = (rule, value, callback) => {
  if (form.value.tiffUrl) {
    return callback();
  }
  callback(new Error("请上传航拍图文件"));
};
const checkascUrl = (rule, value, callback) => {
  if (form.value.ascUrl) {
    return callback();
  }
  callback(new Error("请上传高程文件"));
};
const rules = ref({
  layerName: [{ required: true, message: "数据不能为空", trigger: "blur" }],
  tiffUrl: [{ required: true, validator: checktiffUrl, trigger: "blur" }],
  ascUrl: [{ required: true, validator: checkascUrl, trigger: "blur" }],
});

const form = ref({
  layerName: "",
  tiffUrl: "",
  ascUrl: "",
});
const settiffUrl = (e) => {
  form.value.tiffUrl = e;
};
const setascUrl = (e) => {
  form.value.ascUrl = e;
};
const valueData = new FormData();
function add() {
  proxy.$refs["dataRef"].validate((valid) => {
    if (valid) {
      console.log(form.value);
             let data ={
              ...form.value
            }
            console.log(data)
            layersAdd(data).then(res=>{
              emitter.emit('loadLayer')
              emit('closeAddDialog')
      })
    }
  });
}
</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>
