<template>
  <el-dialog v-model="visible" title="点位导入" width="40%" :before-close="closeDialog">
    <input style="display:none" type="file" @change="uploadFile" id="fileinput1" class="fileinput" />
    <label class="filelabel" for="fileinput1">上传</label>
    <div class="fileName">
      <span>{{ fileName }}</span>
      <delete class="delete" @click="delFile" v-if="fileName" />
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button size="large" @click="closeDialog">取消</el-button>
        <el-button size="large" type="primary" @click="saveP"> 保存 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import { onMounted, reactive, ref, toRefs, computed, nextTick } from "vue";
import infoApi from "@/api/infoApi.js";
import { ElMessage, ElMessageBox } from "element-plus";
export default {
  props: ["formData", "dialogVisible"],
  emits: ["dialogClose", "dialogSuccess"],
  setup(props, ctx) {

    const state = reactive({
      fileName: '',
      importData: new FormData()
    });
    const visible = computed(() => {
      return props.dialogVisible;
    });

    const closeDialog = () => {
      ctx.emit("dialogClose");
    };

    const saveP = async () => {
      const res = await infoApi.importP(state.importData, props.formData.template_name);
      if (res.code == 0) {
        ElMessage.success(res.data || res.message || "请求成功");
        ctx.emit("dialogSuccess");
      } else {
        ElMessage.error(res.data || res.message || "请求失败");
      }

    };

    const uploadFile = (e) => {
      let file = e.target.files[0];
      state.fileName = file.name;
      state.importData.append("file", file);
    }

    const delFile = () => {
      state.fileName = '';
      state.formData = new FormData();
    }
    return {
      ...toRefs(state),
      visible,
      closeDialog,
      saveP,
      uploadFile,
      delFile
    };
  },
};
</script>
<style lang="scss" scoped>
.filelabel {
  background: #1890ff;
  border: 1px solid #1890ff;
  font-weight: 500;
  padding: 5px 15px 5px;
  margin: 0 2px 0 6px;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
}

.fileName {
  margin: 15px 0;
  font-size: 16px;
  .delete {
    width: 18px; 
    height: 18px; 
    margin-left: 8px;
  }
}
</style>
