<template>
  <awsui-layout>
    <awsui-header id="header">
      <el-steps :active="active" align-center>
        <el-step title="上传" icon="el-icon-upload"></el-step>
        <el-step title="校验" icon="el-icon-warning"></el-step>
        <el-step title="结果" icon="el-icon-success"></el-step>
      </el-steps>
    </awsui-header>
    <awsui-main :style="{height: mainHeight, padding: '0'}">
      <!-- 上传 -->
      <div v-if="this.active == 1" :style="{height: parseInt(mainHeight) - 40 + 'px', width: '100%'}">
        <awsui-tabs v-model="uploadStep.activeName">
          <awsui-tab-pane label="批量创建模型清单" name="processList">
            <div v-loading="uploadStep.loading">
              <!-- 文件上传功能 -->
              <div v-show="uploadStep.processUpload.status == 0" style="text-align: center;padding-top: 220px;">
                <awsui-button type="primary" class="button-general-color" style="margin: 0;"
                              @click="uploadFile('process')">上传Excel文件
                </awsui-button>
                <div style="padding-top: 30px;">
                  <span class="text-linker-color" style="cursor: pointer;"
                        @click.stop="downloadTemplate('processList')">下载Excel模板</span>
                </div>
              </div>
              <!-- 已上传文件删除 -->
              <div v-show="uploadStep.processUpload.status == 1" style="text-align: center;">
                <div style="padding-top: 220px;">
                  <div
                      style="display:inline-block;height: 28px;width:119px;line-height: 28px;vertical-align: middle;background-color: #DEDEDE">
                    已上传文件
                  </div>
                </div>
                <div style="padding-top: 30px;">
                  <span class="text-linker-color" style="cursor: pointer;"
                        @click="downLoadUploaded(processFileValue, uploadStep.processUpload.data.name)">{{ uploadStep.processUpload.data.name }}</span>
                  <i class="awsui-iconfont" style="cursor: pointer;"
                     @click="deleteUploaded(processFileValue, uploadStep.processUpload.data.name)">&#xe626;</i>
                </div>
              </div>
              <div v-show="false">
                <pal-upload ref="processUpload" style="width: 100%;"
                            class="upload-demo"
                            :appId=appId
                            :repositoryName=repositoryName
                            :groupValue=groupValue
                            :fileValue=processFileValue
                            :on-preview="handleProcessPreview"
                            :on-success="handleProcessSuccess"
                            :on-remove="handleProcessRemove"
                            :on-error="handleProcessError"
                            :before-remove="beforeProcessRemove"
                            :before-upload="beforeProcessUpload"
                            :limit="1"
                            :on-exceed="handleProcessExceed"
                            accept=".xlsx"
                            :file-list="uploadStep.processUpload.fileList">
                  <div style="display: none;">
                    <awsui-button id="selectProcessFileButton" style="width: 130px;" class="button-general-color"
                                  type="primary">本地文件上传
                    </awsui-button>
                  </div>
                </pal-upload>
              </div>
            </div>
          </awsui-tab-pane>
          <awsui-tab-pane label="批量创建模型结构" name="shapeList">
            <div v-loading="uploadStep.loading">
              <!-- 文件上传功能 -->
              <div v-show="uploadStep.shapeUpload.status == 0" style="text-align: center;padding-top: 220px;">
                <awsui-button type="primary" class="button-general-color" style="margin: 0;"
                              @click="uploadFile('shape')">上传Excel文件
                </awsui-button>
                <div style="padding-top: 30px;">
                  <span class="text-linker-color" style="cursor: pointer;"
                        @click="downloadTemplate('shapeList')">下载模型结构Excel模板</span>
                </div>
                <div style="padding-top: 15px;">
                    <span class="text-linker-color" style="cursor: pointer;"
                          @click="downloadTemplate('shapeImport')">下载泳道图导入Excel模板</span>
                  </div>
                </div>
              <!-- 已上传文件删除 -->
              <div v-show="uploadStep.shapeUpload.status == 1" style="text-align: center;">
                <div style="padding-top: 220px;">
                  <div
                      style="display:inline-block;height: 28px;width:119px;line-height: 28px;vertical-align: middle;background-color: #DEDEDE">
                    已上传文件
                  </div>
                </div>
                <div style="padding-top: 30px;">
                  <span class="text-linker-color" style="cursor: pointer;"
                        @click="downLoadUploaded(shapeFileValue, uploadStep.shapeUpload.data.name)">{{ uploadStep.shapeUpload.data.name }}</span>
                  <i class="awsui-iconfont" style="cursor: pointer;"
                     @click="deleteUploaded(shapeFileValue, uploadStep.shapeUpload.data.name)">&#xe626;</i>
                </div>
              </div>
              <div v-show="false">
                <pal-upload ref="shapeUpload" style="width: 100%;"
                            class="upload-demo"
                            :appId=appId
                            :repositoryName=repositoryName
                            :groupValue=groupValue
                            :fileValue=shapeFileValue
                            :on-preview="handleShapePreview"
                            :on-success="handleShapeSuccess"
                            :on-remove="handleShapeRemove"
                            :on-error="handleShapeError"
                            :before-remove="beforeShapeRemove"
                            :before-upload="beforeShapeUpload"
                            :limit="1"
                            :on-exceed="handleShapeExceed"
                            accept=".xlsx"
                            :file-list="uploadStep.shapeUpload.fileList">
                  <div style="display: none;">
                    <awsui-button id="selectShapeFileButton" style="width: 130px;" class="button-general-color"
                                  type="primary">本地文件上传
                    </awsui-button>
                  </div>
                </pal-upload>
              </div>
            </div>
          </awsui-tab-pane>
        </awsui-tabs>
      </div>
      <!-- 校验 -->
      <div v-if="this.active == 2" :style="{height: parseInt(mainHeight) - 40 + 'px', width: '100%'}">
        <template v-if="checkStep.type == 'processList'">
          <check-process ref="processListCheck" :file-name="uploadStep.processUpload.data.name"
                         :totalHeight="mainHeight"/>
        </template>
        <template v-if="checkStep.type == 'shapeList'">
          <check-shape ref="shapeListCheck" :file-name="uploadStep.shapeUpload.data.name" :totalHeight="mainHeight"/>
        </template>
      </div>
      <!-- 结果 -->
      <div v-if="this.active == 3" :style="{height: parseInt(mainHeight) - 40 + 'px', width: '100%'}">
        <save ref="save" :totalHeight="mainHeight" :param="saveData"/>
      </div>
    </awsui-main>
    <awsui-footer>
      <div style="float: right;">
        <awsui-button v-if="this.active == 2" style="margin-top: 12px;" @click="prev">上一步</awsui-button>
        <awsui-button v-if="this.active == 1 || this.active == 2" style="margin-top: 12px;" @click="next">下一步
        </awsui-button>
        <template v-if="this.active == 3">
          <awsui-button style="margin-top: 12px;" @click="downloadLog">导出报告</awsui-button>
          <awsui-button style="margin-top: 12px;" @click="success">完成</awsui-button>
        </template>
      </div>
    </awsui-footer>
  </awsui-layout>
</template>

<script>
import palUpload from '../components/upload/index';
import awsuiAxios from "../../awsuiAxios";
import checkProcess from './check-process';
import checkShape from './check-shape';
import save from './save';

export default {
  name: "create",
  components: {palUpload, checkProcess, checkShape, save},
  data() {
    return {
      active: 1,
      wsId: wsId,
      teamId: teamId,
      methodCategory: methodCategory,
      appId: appId,
      repositoryName: repositoryName,
      groupValue: groupValue,
      processFileValue: processFileValue,
      shapeFileValue: shapeFileValue,
      mainHeight: (document.documentElement.clientHeight) - 60 - 40 + 'px',
      uploadStep: {
        activeName: 'processList',
        loading: false,
        processUpload: {// 模型清单批量上传
          status: 0,
          fileList: [],// 组件上传列表
          data: {},// 自定义数据展示数据源
        },
        shapeUpload: {// 模型结构批量上传
          status: 0,
          fileList: [],
          data: {},
        }
      },
      checkStep: {
        type: ''
      },
      fileList: [],
      saveData: {// 待保存的数据
        wsId: wsId,
        teamId: teamId,
        type: '',
        fileValue: '',
        fileName: '',
        data: {
          okData: []
        }
      }
    };
  },
  mounted() {
    const that = this;
    that.resize();
  },
  methods: {
    prev() {// 上一步
      if (this.active == 2) {
        this.checkStep.type = '';
      }
      this.active--;
    },
    next() {// 下一步
      if (this.active == 1) {// 上传文件页面点击下一页
        if (!this.checkUploadFile()) {
          this.$message({message: '请上传Excel文件', type: 'warning'});
          return;
        }
        this.checkStep.type = this.uploadStep.activeName;
      } else if (this.active == 2) {
        if (this.checkStep.type == 'processList') {// 流程清单文件上传
          const result = this.$refs.processListCheck.checkResult;
          if (!result.chheckDone) {
            this.$message({message: '正在校验或校验未通过，不支持此操作', type: 'warning'});
            return;
          }
          if (result.okCount != result.totalCount) {
            this.$message({message: '校验未通过', type: 'warning'});
            return;
          }
          if (result.totalCount.length == 0) {
            this.$message({message: '上传文件无数据', type: 'warning'});
            return;
          }
          this.saveData.type = 'processList';
          this.saveData.fileValue = this.processFileValue;
          this.saveData.fileName = this.uploadStep.processUpload.data.name;
          this.saveData.data.okData = result.okData;
        } else {// 模型结构批量上传
          const result = this.$refs.shapeListCheck.checkResult;
          if (!result.chheckDone) {
            this.$message({message: '正在校验或校验未通过，不支持此操作', type: 'warning'});
            return;
          }
          if (result.okCount == 0) {
            this.$message({message: '校验未通过', type: 'warning'});
            return;
          }
          this.saveData.type = 'shapeList';
          this.saveData.fileValue = this.shapeFileValue;
          this.saveData.fileName = this.uploadStep.shapeUpload.data.name;
          this.saveData.data.okData = result.okData;
        }
      }
      this.active++;
    },
    success() {// 完成，关闭窗口
      parent.closeBatchCreateFn([]);
    },
    downloadLog() {// 下载日志
      this.$refs.save.downloadLog();
    },
    checkUploadFile() {// 上传模板之后下一步
      if (this.uploadStep.activeName == 'processList') {
        if (this.uploadStep.processUpload.status == 1) {
          return true;
        }
      } else if (this.uploadStep.activeName == 'shapeList') {
        if (this.uploadStep.shapeUpload.status == 1) {
          return true;
        }
      }
      return false;
    },
    uploadFile(type) {// 上传模板
      if (type == 'process') {// 批量上传流程清单模板
        this.$refs.processUpload.clearFiles();
        document.getElementById("selectProcessFileButton").click();
      } else {// 模型结构清单模板
        this.$refs.shapeUpload.clearFiles();
        document.getElementById("selectShapeFileButton").click();
      }
    },
    downloadTemplate(type) { // 下载模板
      const that = this;
      that.uploadStep.loading = true;
      const data = {
        url: 'jd',
        data: {
          cmd: "com.actionsoft.apps.coe.pal.batch_create_download_template",
          wsId: that.wsId,
          type: type,
          methodCategory: methodCategory
        }
      };
      awsuiAxios.post(data).then(function (ro) {
        that.uploadStep.loading = false;
        if (ro.result == 'ok') {
          window.open(ro.data.url);
        } else if (ro.result == 'warning') {
          that.$message({message: ro.msg, type: 'warning'});
        } else {
          that.$message.error(ro.msg);
        }

      }).catch(error => {
        console.log(error);
      })
    },
    downLoadUploaded(fileValue, name) {// 下载已经上传的
      const that = this;
      that.uploadStep.loading = true;
      const data = {
        url: 'jd',
        data: {
          cmd: "com.actionsoft.apps.coe.pal.batch_create_uploaded_file_download",
          fileValue: fileValue,
          fileName: name
        }
      };
      awsuiAxios.post(data).then(function (ro) {
        that.uploadStep.loading = false;
        if (ro.result == 'ok') {
          window.location.href = ro.data.url;
        } else if (ro.result == 'warning') {
          that.$message({message: ro.msg, type: 'warning'});
        } else {
          that.$message.error(ro.msg);
        }
      }).catch(error => {
        console.log(error);
      })
    },
    deleteUploaded(fileValue, name) {// 删除已经上传的
      const that = this;
      that.uploadStep.loading = true;
      const data = {
        url: 'jd',
        data: {
          cmd: "com.actionsoft.apps.coe.pal.batch_create_uploaded_file_delete",
          fileValue: fileValue,
          fileName: name
        }
      };
      awsuiAxios.post(data).then(function (ro) {
        that.uploadStep.loading = false;
        if (ro.result == 'ok') {
          if (that.uploadStep.activeName == 'processList') {// 删除已上传流程清单模板
            that.$refs.processUpload.clearFiles();
            that.uploadStep.processUpload.status = 0;
            that.uploadStep.processUpload.data = {};
          } else {// 删除已上传模型结构清单模板
            that.$refs.shapeUpload.clearFiles();
            that.uploadStep.shapeUpload.status = 0;
            that.uploadStep.shapeUpload.data = {};
          }
        } else if (ro.result == 'warning') {
          that.$message({message: ro.msg, type: 'warning'});
        } else {
          that.$message.error(ro.msg);
        }
      }).catch(error => {
        console.log(error);
      })
    },
    /******模型清单模板上传start*********/
    handleProcessRemove(file, fileList) {
      this.uploadStep.processUpload.status = 0;
    },
    handleProcessPreview(file) {
    },
    handleProcessExceed(files, fileList) {
    },
    handleProcessError(err, file, fileList) {
    },
    beforeProcessUpload(file) {
      // 上传之前校验判断大小
      if (file.size / 1024 / 1024 > 10) {  //文件大于10M
        this.$message.warning('文件不允许超过10M');
        return false;
      }
    },
    handleProcessSuccess(response, file, fileList) {
      const that = this;
      that.uploadStep.processUpload.status = 1;
      that.uploadStep.processUpload.data = {
        name: file.name,
        size: file.size
      };
    },
    beforeProcessRemove(file, fileList) {
    },
    /******模型清单模板上传end*********/
    /******模型结构模板上传start*********/
    handleShapeRemove(file, fileList) {
      this.uploadStep.shapeUpload.status = 0;
    },
    handleShapePreview(file) {
    },
    handleShapeExceed(files, fileList) {
    },
    handleShapeError(err, file, fileList) {
    },
    beforeShapeUpload(file) {
      // 上传之前校验判断大小
      if (file.size / 1024 / 1024 > 10) {  //文件大于10M
        this.$message.warning('文件不允许超过10M');
        return false;
      }
    },
    handleShapeSuccess(response, file, fileList) {
      const that = this;
      that.uploadStep.shapeUpload.status = 1;
      that.uploadStep.shapeUpload.data = {
        name: file.name,
        size: file.size
      };

    },
    beforeShapeRemove(file, fileList) {
    },
    /******模型结构模板上传end*********/

    resize() {// 窗口监听window.resize
      const that = this
      let resizeTimer = null;
      window.onresize = () => {
        return (() => {
          if (resizeTimer) clearTimeout(resizeTimer);
          resizeTimer = setTimeout(function () {
            that.mainHeight = (document.documentElement.clientHeight) - 60 - 40 + 'px';
          }, 400);
        })()
      }
    },

  }
}
</script>

<style scoped>
#header >>> .el-step__title {
  font-size: 14px;
}
</style>