<template>
  <span>
    <el-button icon="el-icon-back" @click="importDialogVisible = true">导入</el-button>
    <el-dialog
        :title="'导入'+name"
        :visible.sync="importDialogVisible"
        width="40%"
        top="30vh"
        :close-on-click-modal="false"
        name="uploadDialog"
        custom-class="upload-dialog"
        v-if="importDialogVisible"
      >
        <div style="height: 150px; padding-left: 20px">
          <eip-sys-type-selector
            v-if="typeKey || catId"
            placeholder="请选择分类"
            :type-key="typeKey"
            :cat-id="catId"
            v-model="formTypeSelectorCatName"
            :sys-type-id.sync="formTypeSelectorCatId"
            :validate="{required: true}"
          />
          <br />
          <br />
          <el-upload
            style="display: inline-block"
            :action="realUploadUrl"
            :on-success="handleUploadResult"
            :on-error="handleUploadResult"
            :headers="uploadHeaders"
            :on-exceed="onExceed"
            accept=".zip"
            :before-upload="beforeUpload"
            :limit="1"
            :auto-upload="false"
            ref="upload"
          >
            <el-button size="small" icon="el-icon-upload">选择{{name}}</el-button>
          </el-upload>
        </div>
        <span slot="footer" class="dialog-footer" style="text-align: right;">
          <el-button @click="importDialogVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="uploadSubmit"
            element-loading-text="导入中..."
            v-loading.fullscreen.lock="fullscreenLoading"
            >确 定</el-button
          >
        </span>
      </el-dialog>

      <el-dialog
        title="温馨提示"
        :visible="myDialogVisible"
        :before-close="beforeClose2"
        name="myDialogVisible"
        width="30%"
        custom-class="upload-dialog"
        top="30vh"
      >
        <span>部分{{name}}已存在，请确认重复项的导入操作！</span>
        <span slot="footer" class="dialog-footer" style="text-align: right;">
          <el-button type="default" @click="beforeClose2">取消</el-button>
          <el-button type="primary" @click="confirmSubmit('jump')"
            >跳过重复项</el-button
          >
          <el-button type="primary" @click="confirmSubmit('cover')"
            >覆盖更新</el-button
          >
        </span>
      </el-dialog>
  </span>

</template>

<script>
import req from '@/request.js'
import {mapState} from 'vuex'
const EipSysTypeSelector = () =>import('@/components/selector/EipSysTypeSelector.vue')

export default {
  components: { EipSysTypeSelector },
  name: 'ht-import-button',
  props: {
    typeKey: {
      type: String,
      default: '',
    },
    catId: {
      type: String,
      default: '',
    },
    requestMethod: {
      type: String,
      default: 'POST',
    },
    uploadUrl: {
      type: String,
      required: true,
    },
    confirmUrl: {
      type: String,
      required: true,
    },
    name: {
      type: String,
      required: true,
    },
    htTable: {
      type: Object,
    },
  },
  data() {
    return {
      importDialogVisible: false,
      formTypeSelectorCatId:'',
      formTypeSelectorCatName:'',
      myDialogVisible: false,
      fullscreenLoading: false
    }
  },
  computed: {
    ...mapState({
      uploadHeaders: function(mapState) {
        return {Authorization: 'Bearer ' + mapState.login.currentUser.token}
      },
      realUploadUrl: function() {
        if (this.typeKey || this.catId) {
          return this.uploadUrl +this.formTypeSelectorCatId
        }
        return this.uploadUrl
      }
    })
  },
  mounted() {},
  methods: {
    handleSuccess(message) {
      this.$message.success(message)
      this.myDialogVisible = false
      if (this.htTable) {
        this.htTable.querys = []
        this.htTable.load()
      }
      this.importDialogVisible = false
      this.fullscreenLoading = false
    },
    confirmSubmit(arg) {
      const this_ = this
      let url =this.confirmUrl + this.uploadAddress +'&status=' + arg 
      if (this.typeKey || this.catId) {
        url+= '&typeId=' +this.formTypeSelectorCatId
      }
      req.post(url).then(function(rep) {
        rep = rep.data
        if (rep && rep.state) {
          this_.handleSuccess(rep.message)
        } else {
          this_.$message.error(rep.message || '保存失败')
        }
      })
    },
    handleUploadResult(data) {
      if (data.state) {
        if (data.message && data.message == 'confirmUpload') {
          this.uploadAddress = data.value
          this.myDialogVisible = true
          return
        } else {
          this.handleSuccess(data.message)
        }
      } else {
        this.fullscreenLoading = false
        this.$message({type: 'error', message: data.message})
      }
    },
    beforeUpload(file) {
      if (!file.name.endsWith('.zip')) {
        this.$message.warning('只能导入zip文件!')
        return false
      }
      this.fullscreenLoading = true
    },
    onExceed(file) {
      this.$message.warning('只能选择一个zip文件!')
    },
    uploadSubmit() {
      if (
        !this.$refs.upload.uploadFiles ||
        this.$refs.upload.uploadFiles.length == 0
      ) {
        this.$message.warning('请选择要导入的'+this.name+'!')
        return false
      }
      this.$refs.upload.submit()
    },
    beforeClose2() {
      this.myDialogVisible = false
      this.fullscreenLoading = false
    }
  },
}
</script>