<template>
  <span>
     <el-button v-if="buttonType==='text'" :type="buttonType" :icon="icon" size="mini" @click="dialogVisible = true" :disabled="disabled">
      {{ title }}
    </el-button>
    <el-button v-else :type="buttonType" :icon="icon" size="mini" @click="dialogVisible = true" plain :disabled="disabled">
      {{ title }}
    </el-button>
    <el-dialog :title="$t('import.title')" :visible="dialogVisible" width="500px" :close-on-click-modal="false"
      :before-close="handleClose" :append-to-body="true" destroy-on-close>
      <el-steps :active="active" finish-status="success" process-status="finish">
        <el-step :title="$t('import.upload')" />
        <el-step :title="$t('import.check')" />
        <el-step :title="$t('import.importFinish')" />
      </el-steps>
      <div>
        <upload-basic v-show="active === 0" ref="upload" :fileName="fileName" :tableType="tableType"
          @uploadSuccess="handleUploadSuccess" @forward="active++" :defaultParams="defaultParams" />
        <data-check ref="check" v-show="active === 1" :upload-result="uploadResult" :tableType="tableType"
          @forward="active++ " @back="active--" :defaultParams="defaultParams"  @successData="res =>this.$emit('importSuccess', res)" />
        <import-success v-show="active === 2||active === 3" :upload-result="uploadResult" />
      </div>

    </el-dialog>
  </span>
</template>

<script>

import UploadBasic from './UploadBasic'
import DataCheck from './DataCheck'
import ImportSuccess from './ImportSuccess'

export default {
  name: 'ImportModal',
  components: { UploadBasic, DataCheck, ImportSuccess },
  props: {
    close: {
      type: Function,
      default: () => { },
      desc: '关闭弹窗触发'
    },
    title: {
      type: String,
      default: "导入",
      desc: '按钮文字'
    },
    fileName: {
      type: String,
      // required: true
    },
    tableType: {
      type: Number,
      // required: true
    },
    icon: {
      type: String,
      default: 'el-icon-upload'
    },
    defaultParams: {
      type: Object,
      default: () => {
      },
      desc: '为上传表格设置默认条件',
    },
    buttonType: {
      type: String,
      default: ""
    },
    disabled:{
      type : Boolean,
      default: false
    }
  },
  data() {
    return {
      active: 0,
      dialogVisible: false,
      uploadResult: [],
    }
  },
  methods: {
    handleUploadSuccess(data) {
      this.uploadResult = data
      // this.$emit('importSuccess', data)
      if (this.uploadResult.flatMap(item => item.errorList).length === 0) {
        //代表成功
        setTimeout(() => {
          this.$refs.check.handleSave()
        }, 500)

      }

    },
    handleClose() {
      this.active = 0
      this.dialogVisible = false
      this.uploadResult = []
      this.$refs.upload.clear()
      this.close()
    }
  }
}
</script>
