<template>
  <el-dialog
    v-loading="loading"
    :title="title"
    :center="true"
    align="left"
    top="10vh"
    width="1040px"
    :close-on-click-modal="false"
    :visible.sync="showModelThis"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    append-to-body
    @close="closeModel"
  >
    <el-card style="margin-top: -15px">
      <el-row>
        <el-col :span="24">
          <div class="editor-container">
            <dropzone
            style="background: #eef1f6;"
              id="myVueDropzone"
              url="https://httpbin.org/post"
              @dropzone-removedFile="dropzoneR"
              @dropzone-success="dropzoneS"
            />
          </div>
        </el-col>
        <el-col :span="24" style="text-align: right">
          <el-button type="primary" @click="submitForm">保 存 </el-button>
        </el-col>
      </el-row>
    </el-card>
  </el-dialog>
</template>
<script>
import Dropzone from "@/components/Dropzone";

export default {
  name: "batchUploadDialog",
  props: ["showModel"],
  components: {
    Dropzone,
  },
  data() {
    return {
      loading: false,
      title: "添加图片",

      showModelThis: this.showModel,
    };
  },
  watch: {
    showModel: function (val) {
      this.showModelThis = val;
      if (val) {
        this.initForm();
      }
    },
    showModelThis(val) {
      if (!val) {
        this.$emit("cancel");
      }
    },
  },
  methods: {
    closeModel() {
      console.log("closeModel!!");
    },
    dropzoneS(file) {
      console.log(file);
      this.$message({ message: "Upload success", type: "success" });
    },
    dropzoneR(file) {
      console.log(file);
      this.$message({ message: "Delete success", type: "success" });
    },
    refreshAll() {
      this.showModelThis = false;
      this.$emit("refresh");
    },

    async initForm() {},
  },
};
</script>

   <style lang="scss" scoped>
.orderRecord {
  .setWidth {
    width: 100% !important;
    // display: flex;
    // display: block !important;
    // .el-input__inner {
    //   display: flex;
    //   width: 1000px !important;
    //   display: block !important;
    // }
  }
}
</style>
