<template>
 <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="400px"
    :append-to-body="true"
    :before-close="close"
    :destroy-on-close="true"
    :close-on-click-modal="false">
     <el-upload
       ref="upload"
       :limit="1"
       accept=".xlsx, .xls"
       :headers="upload.headers"
       :data="reqData"
       :action="upload.url"
       :disabled="upload.isUploading"
       :before-upload="handleBeforeUpload"
       :on-progress="handleFileUploadProgress"
       :on-success="handleFileSuccess"
       :http-request="reqUploadFile"
       :auto-upload="false"
       drag
     >
       <i class="el-icon-upload"></i>
       <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
       <div class="el-upload__tip text-center" slot="tip">
         <div class="el-upload__tip" slot="tip">
           <!-- <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据 -->
         </div>
         <span>仅允许导入xls、xlsx格式文件。</span>
         <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>
       </div>
     </el-upload>
     <div slot="footer" class="dialog-footer">
       <el-button @click="close">取 消</el-button>
       <el-button type="primary" @click="submitFileForm">确 定</el-button>
     </div>
 </el-dialog>
</template>
<script>

import { mapGetters } from 'vuex'
import { getToken, getSign } from "@/utils/auth"
import { randomStr20 } from '@/utils/util'
import { importTicket, importTemplate} from "@/api/business/ticket";
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      loading: false,
      // 表单参数
      form: {},
      reqData: {},
      // 盲票导入参数
      upload: {
        // 是否显示弹出层（盲票导入）
        open: false,
        // 弹出层标题（盲票导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/api/v1/mp/admin/ticket/box/importTicket"
      },
    }
  },

  computed: {
    ...mapGetters(['userInfo']),
    title() {
      return '盲票导入'
    }
  },

  created() {
    // 是编辑
    // if (this.editId) {
    //    this.getDetail()
    // }
  },

  mounted() {
    document.body.appendChild(this.$el)
  },

  destroyed() {
    // if appendToBody is true, remove DOM node after destroy
    if (this.appendToBody && this.$el && this.$el.parentNode) {
      this.$el.parentNode.removeChild(this.$el)
    }
  },

  methods: {

    // 上传前loading加载
    handleBeforeUpload(file) {
      this.getHttpHeader()
      this.vloading = this.$loading({
        lock: true,
        text: "正在导入.....",
        background: "rgba(0, 0, 0, 0.7)",
      });
    },

    /** 下载模板操作 */
    importTemplate() {
      console.log("importTemplate ====================")
      importTemplate().then(response => {
        this.download(response.msg);
      });
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
      this.getList();
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },

    // 自定义文件上传的实现
    reqUploadFile(param) {
      var data = this.reqData || {}
      var params = {
        file: param.file,
        ...data
      }
      importTicket(params, this.headers).then(response => {
       //  console.log("importTicket============ response.msg"+response.msg)
        this.upload.open = false;
        this.upload.isUploading = false;
        this.$refs.upload.clearFiles();
        this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
        // this.$emit('saveSuccess')
        this.vloading.close();
        this.close()

      }).catch(response => {
        console.log("导入 shibia==========")
        this.upload.open = false;
        this.upload.isUploading = false;
        this.$refs.upload.clearFiles();
        this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
        this.vloading.close();
        //param.onError()
      })
    },

    // 请求头
    getHttpHeader() {
      let timestamp = parseInt(new Date().getTime()),
        nonce = randomStr20();
      var sign = getSign(this.reqData || {}, timestamp)
      let url = this.uploadImgUrl + '?sign=' + sign + '&nonce=' + nonce;
      this.fileSaveUrl = url
      var headers = {
        "Authorization": "Bearer " + getToken(),
        "x-zz-timestamp": timestamp
      }
      this.headers = headers
    },

    /**
     * 关闭窗口
     */
    close() {
      this.$emit('close')
      this.form = {
        month:3,
        packageType:'1'
      }
    }
  }
}
</script>

<style scoped lang="scss">
.tag{
  margin-right: 15px;
  width: 90px;
  text-align: center;
  cursor: pointer;

}

.tag-select{
  background-color: #409eff!important;
  border-color: #409eff!important;
  color: #fff!important;
}

.cover-content-item{
  width: 220px;
  float: left;
  position: relative;
  .cover-img {
    width: 200px;
    height: 100px;
  }
  .cover-mark {
    position: absolute;
    top: 0px;
    right: 28px;
    z-index: 1;
    color: red;
    cursor: pointer;
    visibility: hidden;
  }
  .select {
      visibility: visible!important;
  }
}

.dialog-footer{
  text-align: center;
}

</style>

<style lang="scss">
.ygp-form-items {
   .el-form-item{
     padding: 0 5px;
   }
  .el-form-item__label {
    line-height: 1.2;
    padding-bottom: 8px;
    word-break: break-all;
    word-wrap: break-word;
    color: #333;
  }

  .el-form-item__error {
    position: relative;
    top: auto;
    left: auto;
  }

  .el-form-item.is-desc_text {
    .el-form-item__label {
      display: none;
    }
  }
}
</style>
