<template>
  <div class="modelManage">
    <div class="vdr_upload">
      <vue-draggable-resizable
        v-if="uploadT"
        class="vdrupload"
        :parent="true"
        :active="true"
        :w="650"
        :h="500"
        :minw="650"
        :minh="500"
        :handles="['br']"
        @deactivated="onDeactivated"
        :resizable="false"
        :x="modelView_x"
        :y="modelView_y"
      >
        <div class="upload_main">
          <div class="upload_top">
            <span>上传模型</span>
            <img class="hide" @click="hide" src="@/assets/shanchu.png">
          </div>
          <div class="addAndDel">
            <div class="add">
              <el-upload
                class="upload-demo"
                :file-list="fileList"
                ref="upload"
                action="123"
                :before-upload="beforeAvatarUpload"
                accept=".rfa, .RFA, .rvt, .RVT, ifc, IFC"
                :multiple="true"
              >
                <el-button slot="trigger" class="upload_button">
                  <img class="add_img" src="@/assets/tianjiamoxing.png">
                  <span class="add_font">添加模型</span>
                </el-button>
                <el-button style="margin-left: 10px;" class="upload_button" @click="del">
                  <img class="del_img" src="@/assets/qingchutianjialiebiao.png">
                  <span class="del_font">清除添加列表</span>
                </el-button>
              </el-upload>
            </div>
          </div>
          <div
            style="height:400px;"
            v-loading="loading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
          >
            <el-scrollbar style="height:400px;">
              <div class="upload_for" v-for="(item,index) of fileList" :key="index">
                <img class="for_img" src="@/assets/xuanze_pre.png">
                <span class="for_span">{{item.customFile}}</span>
                <el-progress
                  :text-inside="true"
                  :stroke-width="20"
                  :percentage="item.progress"
                  color="rgba(142, 113, 199, 0.7)"
                ></el-progress>
                <img
                  class="success_img"
                  v-if="item.progress === 100 && item.success === true"
                  src="@/assets/shangchuanwancheng.png"
                >
                <img
                  class="again_img"
                  style="cursor: pointer;"
                  @click="again(item.params)"
                  v-show="item.progress === 100 && item.success === false"
                  src="@/assets/chongxinxiazai.png"
                >
              </div>
            </el-scrollbar>
          </div>
        </div>
      </vue-draggable-resizable>
    </div>
    <el-dialog
      :modal="false"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      title="模型管理"
      :visible.sync="showModal"
      width="91.67%"
      style="margin-left:4.46%"
      :before-close="handleClose"
    >
      <div class="filter-tree">
        <el-tabs v-model="activeName" type="card">
          <div class="uploadAndRefresh">
            <div class="upload">
              <img class="upload_img" @click="uploads" src="@/assets/shangchuanyuanwenjian.png">
              <span class="upload_font" @click="uploads">上传源文件</span>
            </div>
            <div class="refresh">
              <img class="refresh_img" @click="refresh" src="@/assets/shuaxin.png">
              <span class="refresh_font" @click="refresh">刷新</span>
            </div>
          </div>
          <el-tab-pane label="源文件" name="first">
            <sourceFile ref="sourceFile"></sourceFile>
          </el-tab-pane>
          <el-tab-pane label="文件转换" name="second">
            <fileConversion ref="fileConversion"></fileConversion>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import sourceFile from './sourceFile.vue';
import fileConversion from './fileConversion.vue';
import uploadFile from 'axios';
export default {
  components: {
    sourceFile,
    fileConversion
  },
  props: {
    // 是否显示对话框
    value: Boolean
  },
  name: 'modelManage',
  data() {
    return {
      loading: false,
      modelView_x: 0,
      modelView_y: 0,
      progress: 0,
      uploadT: false,
      fileList: [],
      showModal: this.value,
      activeName: 'first'
    };
  },
  methods: {
    onDeactivated() { },
    again(file) {
      // 重新上传
      this.beforeAvatarUpload(file, true);
    },
    beforeAvatarUpload(file, isReload) {
      // 上传
      const isLt200M = file.size / 1024 / 1024 < 200;
      if (!isLt200M) {
        this.$message.error('上传文件大小不能超过 200MB!');
        return;
      }
      if (!isReload) {
        this.fileList.push({
          params: file,
          progress: 0,
          uid: file.uid,
          customFile: file.name
        });
      }
      const param = new FormData();
      param.append('customFile', file);
      const projectId = sessionStorage.getItem('projectId')
        ? sessionStorage.getItem('projectId')
        : '';
      param.append('projectId', projectId);
      const config = {
        headers: { 'Content-Type': 'multipart/form-data' },
        timeout: 1800000,
        processData: false,
        onUploadProgress: progressEvent => {
          const complete =
            ((progressEvent.loaded / progressEvent.total) * 100) | 0;
          this.fileList.map(item => {
            if (item.uid === file.uid) {
              // this.curId = item.uid;
              item.progress = complete;
              if (complete === 100) {
                this.loading = true;
              }
            }
            return item;
          });
        }
      };
      uploadFile
        .post(`/model/uploadModelFile`, param, config)
        .then(data => {
          this.fileList.map(item => {
            if (data.data.code) {
              if (item.uid === file.uid) {
                item.success = true;
                this.loading = false;
                this.$message({
                  type: 'success',
                  message: '文件上传成功'
                });
                this.refresh();
                console.log('=============323', item);
              }
            } else {
              item.success = false;
              this.loading = false;
              this.$message({
                type: 'warning',
                message: '文件上传失败'
              });
            }
            return item;
          });
          // console.log(111111111111111111111111111111,item);
        })
        .catch(resultMsg => {
          this.fileList.map(item => {
            if (item.uid === this.curId) {
              this.loading = false;
              item.success = false;
              this.$message({
                type: 'warning',
                message: '文件上传失败'
              });
            } else {
              item.success = false;
              this.loading = false;
              this.$message({
                type: 'warning',
                message: '文件上传失败'
              });
            }
            return item;
          });
        });
      // 返回false不会自动上传
      return false;
    },
    hide() {
      // 隐藏上传弹窗
      this.uploadT = false;
    },
    del() {
      // 删除
      this.$confirm('是否清空添加列表?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.fileList = [];
          // console.log(this.fileList);
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
    },
    handleClose() {
      // 关闭组件
      this.$emit('modelManageSwitch', false);
      this.$eventHub.$emit('bus-modelManageSwitch', false);
    },
    uploads() {
      // 上传弹窗
      this.modelView_x = Number(this.$store.state.modelview.viewX) - 650;
      this.modelView_y = Number(this.$store.state.modelview.viewY) - 500;
      this.uploadT = true;
    },
    refresh() {
      // 刷新列表
      if (this.activeName === 'first') {
        this.$refs.sourceFile.$emit('bridge');
      } else {
        this.$refs.fileConversion.$emit('bridge');
      }
    },
    refreshChange(val) {
      // 切换列表并刷新
      if (val) {
        this.activeName = 'second';
      }
      this.refresh();
    }
  },
  computed: { },
  watch: {
    value(val) {
      this.showModal = val;
    },
    showModal(val) {
      if (val !== this.value) {
        this.$emit('input', val);
      }
    },
    fileList(val) {
      this.fileList = val;
    }
  },
  created: function() {
    this.$eventHub.$on('bus-refresh', this.refreshChange);
  },
  beforeMount: function() { },
  mounted: function() { },
  beforeDestroy: function() { },
  destroyed: function() { },
  directives: {}
};
</script>
