<template>
  <div class="layout backupRecovery">
    <div class="title">
      备份恢复
    </div>
    <div class="content">
      <div class="card" v-for="item in list" :key="item.type">
        <!-- <div class="card-bg"></div> -->
        <img class="card-img" :src="item.img" />
        <div class="card-info">
          <span class="card-title">{{ item.title }}</span>
          <span class="card-tips">{{ item.tips }}</span>
        </div>
        <span @click="showDialog(item.type)" class="card-btn">导入文件</span>
      </div>
    </div>

    <!-- 导入 -->
    <manager-dialog
      width="430px"
      custom-class="customDialogClass"
      :visible.sync="dialogVisible"
      title="导入"
      icon="el-icon-upload"
      @close="closedialog"
    >
      <el-form
        ref="updateForm"
        :model="updateParams"
        label-width="110px"
      >
        <el-row>
        <el-form-item label="上传文件：" prop="file">
          <el-upload
            ref="upload"
            action=""
            :auto-upload="false"
            accept=".xlsx,.zip,.csv,.txt"
            :on-change="uploadChange"
          >
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          </el-upload>
        </el-form-item>
        </el-row>
        <el-row>
          <el-col :span="19">
            <el-form-item label="文本文件分隔符:" prop="splitChart">
              <el-input v-model="updateParams.splitChart"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closedialog">关闭</el-button>
        <el-button type="primary" :loading="importLoading" @click="uploadFileHandle()">提交</el-button>
      </span>
    </manager-dialog>

    <manager-dialog
      width="430px"
      custom-class="customDialogClass"
      :visible.sync="assetDialogVisible"
      title="导入"
      icon="el-icon-upload"
      @close="closeAssetDialog()"
    >
      <el-form
        ref="updateFormAsset"
        :model="assetUpdateParams"
        label-width="110px"
      >
        <el-row>
        <el-form-item label="上传文件：" prop="file">
          <el-upload
            ref="uploadAsset"
            action=""
            :auto-upload="false"
            accept=".xlsx,.zip,.csv,.txt"
            :on-change="uploadChangeAsset"
          >
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          </el-upload>
        </el-form-item>
        </el-row>
        <el-row>
          <el-col :span="19">
            <el-form-item label="开始行数:" prop="startRow">
              <el-input v-model="assetUpdateParams.startRow"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeAssetDialog()">关闭</el-button>
        <el-button type="primary" :loading="importLoading" @click="uploadFileHandleAsset()">提交</el-button>
      </span>
    </manager-dialog>

    <manager-dialog
      width="430px"
      custom-class="customDialogClass"
      :visible.sync="vulDialogVisible"
      title="导入"
      icon="el-icon-upload"
      @close="closeVulDialog()"
    >
      <el-form
        ref="updateFormVul"
        :model="vulUpdateParams"
        label-width="110px"
      >
        <el-row>
        <el-form-item label="上传文件：" prop="file">
          <el-upload
            ref="uploadVul"
            action=""
            :auto-upload="false"
            accept=".xlsx,.zip,.csv,.txt"
            :on-change="uploadChangeVul"
          >
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          </el-upload>
        </el-form-item>
        </el-row>
        <el-row>
          <el-col :span="19">
            <el-form-item label="开始行数:" prop="startRow">
              <el-input v-model="vulUpdateParams.startRow"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeVulDialog()">关闭</el-button>
        <el-button type="primary" :loading="importLoading" @click="uploadFileHandleVul()">提交</el-button>
      </span>
    </manager-dialog>

    <manager-dialog
      width="430px"
      custom-class="customDialogClass"
      :visible.sync="baseDialogVisible"
      title="导入"
      icon="el-icon-upload"
      @close="closeBaseDialog()"
    >
      <el-form
        ref="updateFormBase"
        :model="baseUpdateParams"
        label-width="110px"
      >
        <el-row>
        <el-form-item label="上传文件：" prop="file">
          <el-upload
            ref="uploadBase"
            action=""
            :auto-upload="false"
            accept=".xlsx,.zip,.csv,.txt"
            :on-change="uploadChangeBase"
          >
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          </el-upload>
        </el-form-item>
        </el-row>
        <el-row>
          <el-col :span="19">
            <el-form-item label="开始行数:" prop="startRow">
              <el-input v-model="baseUpdateParams.startRow"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeBaseDialog()">关闭</el-button>
        <el-button type="primary" :loading="importLoading" @click="uploadFileHandleBase()">提交</el-button>
      </span>
    </manager-dialog>
  </div>
</template>

<script>
import { dataRecovery, assetDataRecovery, vulDataRecovery, baseDataRecovery } from './api/backupRecovery'

export default {
  name: 'BackupRecovery',
  data() {
    return {
      list: [
        {
          type: 1,
          title: '批量数据恢复',
          tips: '相应的硬件和存储设备来实现',
          img: require('./imgs/dataRecovery.png')
        },
        {
          type: 2,
          title: '资产恢复',
          tips: '相应的硬件和存储设备来实现',
          img: require('./imgs/assetRecovery.png')
        },
        {
          type: 3,
          title: '漏洞恢复',
          tips: '相应的硬件和存储设备来实现',
          img: require('./imgs/loophole.png')
        },
        {
          type: 4,
          title: '基线恢复',
          tips: '相应的硬件和存储设备来实现',
          img: require('./imgs/baseline.png')
        }
      ],
      dialogVisible: false,
      assetDialogVisible: false,
      vulDialogVisible: false,
      baseDialogVisible: false,
      importLoading: false,
      updateParams: {
        'file': null,
        'splitChart': '|'
      },
      assetUpdateParams: {
        'file': null,
        'startRow': 2
      },
      vulUpdateParams: {
        'file': null,
        'startRow': 2
      },
      baseUpdateParams: {
        'file': null,
        'startRow': 2
      }
    }
  },
  methods: {
    showDialog(type) {
      switch(type) {
        case 1:
          this.dialogVisible = true
          break;
        case 2:
          this.assetDialogVisible = true
          break;
        case 3:
          this.vulDialogVisible = true
          break;
        case 4:
          this.baseDialogVisible = true
          break;
      }
    },
    closedialog: function() {
      this.$refs.upload.clearFiles()
      this.$refs.updateForm.resetFields()
      this.dialogVisible = false
    },
    uploadChange: function(file, filelist) {
      if (filelist.length > 1) {
        filelist.splice(0, 1)
      }
      this.$refs.upload.$el.children[0].children[1].value = ''
    },
    uploadFileHandle: function() {
      this.$refs['updateForm'].validate((valid) => {
        if (valid) {
          if (this.$refs.upload.uploadFiles.length == 0) {
            this.$message.error('请上传文件!')
          } else {
            var formData = new FormData()
            formData.append('file', this.$refs.upload.uploadFiles[0].raw)
            formData.append('splitChart', this.updateParams.splitChart)
            this.importLoading = true
            dataRecovery(formData).then((rsp) => {
              if (rsp.data.returnCode == 0) {
                this.$message.success('上传成功!')
                this.closedialog()
              }
              this.importLoading = false
            }, (error) => {
              this.importLoading = false
              this.$message.error(error.message)
            })
          }
        } else {
          return false
        }
      })
    },
    closeAssetDialog: function() {
      this.$refs.uploadAsset.clearFiles()
      this.$refs.updateFormAsset.resetFields()
      this.assetDialogVisible = false
    },
    uploadChangeAsset: function(file, filelist) {
      if (filelist.length > 1) {
        filelist.splice(0, 1)
      }
      this.$refs.uploadAsset.$el.children[0].children[1].value = ''
    },
    uploadFileHandleAsset: function() {
      this.$refs['updateFormAsset'].validate((valid) => {
        if (valid) {
          if (this.$refs.uploadAsset.uploadFiles.length == 0) {
            this.$message.error('请上传文件!')
          } else {
            var formData = new FormData()
            formData.append('file', this.$refs.uploadAsset.uploadFiles[0].raw)
            formData.append('startRow', this.assetUpdateParams.startRow)
            this.importLoading = true
            assetDataRecovery(formData).then((rsp) => {
              if (rsp.data.returnCode == 0) {
                this.$message.success('上传成功!')
                this.closeAssetDialog()
              }
              this.importLoading = false
            }, (error) => {
              this.importLoading = false
              this.$message.error(error.message)
            })
          }
        } else {
          return false
        }
      })
    },
    closeVulDialog: function() {
      this.$refs.uploadVul.clearFiles()
      this.$refs.updateFormVul.resetFields()
      this.vulDialogVisible = false
    },
    uploadChangeVul: function(file, filelist) {
      if (filelist.length > 1) {
        filelist.splice(0, 1)
      }
      this.$refs.uploadVul.$el.children[0].children[1].value = ''
    },
    uploadFileHandleVul: function() {
      this.$refs['updateFormVul'].validate((valid) => {
        if (valid) {
          if (this.$refs.uploadVul.uploadFiles.length == 0) {
            this.$message.error('请上传文件!')
          } else {
            var formData = new FormData()
            formData.append('file', this.$refs.uploadVul.uploadFiles[0].raw)
            formData.append('startRow', this.vulUpdateParams.startRow)
            this.importLoading = true
            vulDataRecovery(formData).then((rsp) => {
              if (rsp.data.returnCode == 0) {
                this.$message.success('上传成功!')
                this.closeVulDialog()
              }
              this.importLoading = false
            }, (error) => {
              this.importLoading = false
              this.$message.error(error.message)
            })
          }
        } else {
          return false
        }
      })
    },
    closeBaseDialog: function() {
      this.$refs.uploadBase.clearFiles()
      this.$refs.updateFormBase.resetFields()
      this.baseDialogVisible = false
    },
    uploadChangeBase: function(file, filelist) {
      if (filelist.length > 1) {
        filelist.splice(0, 1)
      }
      this.$refs.uploadBase.$el.children[0].children[1].value = ''
    },
    uploadFileHandleBase: function() {
      this.$refs['updateFormBase'].validate((valid) => {
        if (valid) {
          if (this.$refs.uploadBase.uploadFiles.length == 0) {
            this.$message.error('请上传文件!')
          } else {
            var formData = new FormData()
            formData.append('file', this.$refs.uploadBase.uploadFiles[0].raw)
            formData.append('startRow', this.baseUpdateParams.startRow)
            this.importLoading = true
            baseDataRecovery(formData).then((rsp) => {
              if (rsp.data.returnCode == 0) {
                this.$message.success('上传成功!')
                this.closeBaseDialog()
              }
              this.importLoading = false
            }, (error) => {
              this.importLoading = false
              this.$message.error(error.message)
            })
          }
        } else {
          return false
        }
      })
    }
  }
}

</script>

<style lang="scss" scoped>
  $base_width: 1920;
  $base_height: 1080;
  @function vw($px) {
    @return ($px / $base_width) * 100vw;
  }
  @function vh($px) {
    @return ($px / $base_height) * 100vh;
  }
  .customDialogClass .el-dialog__footer .el-button {
    border-radius: 3px;
  }
  .backupRecovery {
    width: 100%;
    height: calc(100vh - 50px - 10px);
    background-color: #e6e9f0;
    .title {
      height: vw(49);
      line-height: vw(49);
      padding-left: vw(22);
      font-weight: bold;
      font-size: vw(16);
      color: #000000;
      background-color: #fff;
      position: fixed;
      top: 50px;
      left: 176px;
      width: calc(100% - 176px);
    }
    .content {
      width: vw(1307);
      height: vw(538);
      transform: translateY(vw(31 + 49));
      margin: 0 auto;
      background-color: #fff;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-content: center;
      .card {
        width: vw(441);
        height: vw(90);        
        box-shadow: 0px 0px vw(32) 0px rgba(10, 13, 14, 0.08);
        padding: vw(15) 0;        
        margin-right: vw(100);        
        display: flex;
        &:nth-child(1), &:nth-child(2) {
          margin-bottom: vw(80);
        }
        &-bg {
          width: 111px;
          height: 82px;
          background-image: url('./imgs/background.png');
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }
        &-img {
          width: vw(60);
          margin: 0 vw(30) 0 vw(20);
        }
        &-info {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          margin-right: vw(50);
        }
        &-title {
          font-size: vw(14);
          font-weight: bold;
          color: #000000;
        }
        &-tips {
          font-size: vw(12);
          font-weight: 400;
          color: #999999;
        }
        &-btn {
          font-size: vw(12);
          font-weight: 400;
          color: #1382FF;
          cursor: pointer;          
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          &::before {
            content: '';
            display: block;
            width: 100%;
            height: 1px;
          }
        }
      }
    }
  }
</style>

