 <!-- 替换模型弹窗 -->

<template>
  <!-- 新增楼层 -->
  <div id="replaceModel">
    <el-dialog
      title="替换模型"
      :visible.sync="repliceModelVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="模型文件:">
          <el-upload
            class="upload-demo"
            ref="upload"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList"
            :auto-upload="false"
            :on-change="onChangeUpLoad"
            :limit="1"
          >
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="选择模型文件替换原因：">
          <ul>
            <li>
              <el-radio :disabled="isChioce" v-model="form.ReplaceReason" label="0">之前模型画错要修改</el-radio>
            </li>
            <li>
              <el-radio :disabled="isChioce" v-model="form.ReplaceReason" label="1">因工程改造,更新模型文件</el-radio>
            </li>
          </ul>
        </el-form-item>
        <el-form-item>
          <div class="dateTime" v-show="form.ReplaceReason == '1'">
            <p>工程改造竣工时间:</p>
            <el-date-picker v-model="form.finishTime" type="date" placeholder="选择日期"></el-date-picker>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确认</el-button>
          <el-button @click="handleClose">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    repliceModelVisible: Boolean,
    replaceModelItem: Object
  },
  data() {
    return {
      form: {
        file: null, //上传文件
        ReplaceReason: "0",
        finishTime: ""
      },
      isChioce: true, //是否可以选择替换原因
      fileList: []
    };
  },
  methods: {
    onSubmit() {
      if (this.form.file == null) {
        this.$message.error("模型文件不能为空！");
      } else {
        this.$emit("updataModel", {
          Form: this.form,
          replaceModelItem: this.replaceModelItem
        });
        this.handleClose();
      }
    },
    // /上传到服务器/
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleClose() {
      this.$emit("closeReplaceModelDia");
    },
    handleRemove(file, fileList) {
      this.form.file = null;
      this.fileList = []
    },
    handlePreview(file) {
      console.log(file);
    },
    handleChange() {},
    // 获取上传文件
    onChangeUpLoad(file, fileList) {
      if (fileList.length) {
        this.form.file = file;
      }
    }
  },
  watch: {
    repliceModelVisible(val) {
      if (val) {
        this.handleRemove();
      }
    }
  }
};
</script>
<style lang="less">
#addFloorDialog {
  .floorModle {
    display: flex;
    justify-content: left;
  }
}
</style>
