<template>
  <div class="layout-no-flex">
      <el-toolbar>
        <el-button @click="$router.back()" type="primary" size="medium" round class="shadow-primary">
          <i class="fa fa-chevron-left"></i> 返回上页
        </el-button>
        <span class="button-separator"></span>
        <el-button @click="doSiteTemplateImport">
          <i class="fa fa-save"></i>确 定
        </el-button>
      </el-toolbar>
      <div>
        <div class="detail-panel form-panel">
          <div style="text-align:center">
            <label>选择要导入的.zip文件：</label>
            <el-upload
                class="upload-demo"
                action=""
                :limit="1"
                :http-request="fileUploadHandler"
                ref="uploadTemplate"
                accept=".ZIP,.zip"
                :on-remove="uploaderRemoveHandler"
                :on-change="uploaderChangeHandler"
                :on-error="uploadTemplateErrorHandler"
                :before-upload="beforeUploadTemplateHandler"
                :file-list="fileList"
                :auto-upload="false">
              <el-button slot="trigger" type="primary" :disabled="chooseFileBtnDisabled">选取文件</el-button>
              <div slot="tip" class="el-upload__tip">注：请检查文件名称,如果文件名称中包含中文,将会导致文件在UNIX,LINX系统中显示异常.</div>
            </el-upload>
            <el-progress :percentage="progressInfo.percent" v-show="progressInfo.visible"></el-progress>
          </div>
        </div>
      </div>

    <!--模板包导入Dialog-->
    <el-dialog v-if="false" title="导入模板包" :visible.sync="dialogVisible"  @before-close="importDialogCloseHandler">
      <div style="text-align:center">
        <label>选择要导入的.zip文件：</label>
        <el-upload
            class="upload-demo"
            action=""
            :limit="1"
            :http-request="fileUploadHandler"
            ref="uploadTemplate"
            accept=".ZIP,.zip"
            :on-remove="uploaderRemoveHandler"
            :on-change="uploaderChangeHandler"
            :on-error="uploadTemplateErrorHandler"
            :before-upload="beforeUploadTemplateHandler"
            :file-list="fileList"
            :auto-upload="false">
          <el-button slot="trigger" type="primary" :disabled="chooseFileBtnDisabled">选取文件</el-button>
          <div slot="tip" class="el-upload__tip">注：请检查文件名称,如果文件名称中包含中文,将会导致文件在UNIX,LINX系统中显示异常.</div>
        </el-upload>
        <el-progress :percentage="progressInfo.percent" v-show="progressInfo.visible"></el-progress>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="doSiteTemplateImport">确 定</el-button>
      </div>
    </el-dialog>
   </div>
</template>

<script>
import util from '@src/common/util.js'
export default {
  data() {
    return {
      params: {
        platformID: 'pc',
        siteID: 0
      },
      dialogVisible: false, // dialog是否可见
      chooseFileBtnDisabled: false, // 选取文件按钮禁用状态
      fileList: [], // 文件列表
      interval: null, // js定时任务 setInterval
      progressInfo: {
        visible: false,
        percent: 0
      }
    }
  },
  created() {
    this.initForm()
  },
  methods: {
    // 初始化Dialog
    initForm() {
      this.dialogVisible = true
      this.fileList = []
      this.progressInfo = {
        visible: false,
        percent: 0
      }
      this.params.siteID = this.$route.query.siteID
      this.params.platformID = this.$route.query.platformID
    // console.log(this.params)
    },

    // 文件上传处理事件
    async fileUploadHandler(event) {
      let progressInfo = this.progressInfo
      progressInfo.visible = true

      const { file } = event
      const formData = new FormData()
      formData.append('file', file)
      formData.append('siteID', this.params.siteID)
      formData.append('platformID', this.params.platformID)
      formData.append('version', 'Y')
      try {
        let res = await axios.post('/ui/publishplatform/templatezip', formData, {
          onUploadProgress: function(e) {
          // console.log(e)
            let total = e.total - 0
            let loaded = e.loaded - 0
            progressInfo.percent = total === loaded ? 100 : (loaded / total * 100).toFixed() - 0
          },
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        })
        if (res.data.status === 1) {
          await util.showProgress(res.data.taskID, `数据导入中...`)
          this.$router.back()
          this.dialogVisible = false
          this.$emit('success')
        } else {
          util.showMessage(res)
        }
      } catch (e) {
        util.showErrorNotification(e)
      }
    },

    // 导入模板包Dialog关闭事件
    importDialogCloseHandler() {
    // console.log('abort upload!')
      this.$refs.uploadTemplate.abort()
      this.$refs.uploadTemplate.clearFiles()
    },

    // 文件上传onchange事件
    uploaderChangeHandler(file, fileList) {
    // console.log(file)
    // console.log(fileList)
    },

    // 文件上传onremove事件
    uploaderRemoveHandler(file, fileList) {
    // console.log(file)
    // console.log(fileList)
    },

    // 确认导入模板包
    doSiteTemplateImport() {
    // console.log(this.fileList)
      this.$refs.uploadTemplate.submit()
    },

    // 模板包导入出错后处理事件
    uploadTemplateErrorHandler(err, file, fileList) {
      this.Dialog(err)
      // console.log(err)
      return false
    },

    // 模板包导入前处理事件
    beforeUploadTemplateHandler(file) {
    // console.log(file)
      if (!file || (!file.name.endsWith('.zip') && !file.name.endsWith('.ZIP'))) {
        this.Dialog('只能上传zip文件 ！')
        return false
      }
      return true
    },

    // 消息Dialog封装
    Dialog(msg) {
      this.$confirm(msg, '系统提示', {
        confirmButtonText: '确定',
        showCancelButton: false,
        type: 'warning'
      })
    },

    // 消息显示封装
    MsgPop(msg, type) {
      if (!type) {
        this.$message(msg)
        return
      }
      this.$message({
        message: msg,
        type: type
      })
    }
  },
  // props: {
  //   params: {
  //      type: Object
  //     default: function() {
  //       return {
  //          siteID: 0
  //         platformID: 0
  //       }
  //     }
  //   }
  //  }
  watch: {}
}
</script>
