<template>
  <div class="list-panel" style="position: relative;">
    <div>
        <div class="title-header">
          <h2 class="name">数据导入</h2>
        </div>
     </div>
      <div class="contentList">
        <div class="btnList">
          <!-- <el-button  @click="goback" style="margin-left: 10px">返回</el-button> -->
          <el-button type="primary" @click="goHis" v-if="this.active===0">导入历史</el-button>
        </div>
      </div>
      <div class="importProgress">
        <el-steps :active="active" finish-status="success" align-center space="15%">
          <el-step title="上传excel"></el-step>
          <el-step title="选择并预览数据"></el-step>
          <el-step title="匹配字段"></el-step>
          <el-step title="导入数据"></el-step>
        </el-steps>
      </div>
      <div class="itemPage">
        <uploadExcel v-if="this.active===0"></uploadExcel>
        <previewData v-if="this.active===1"></previewData>
        <matchField v-if="this.active===2" @isdisabled='isAble'></matchField>
        <importState v-if="this.active===3" @curActive='changeActive'></importState>
      </div>
      <div style="margin-top: 20px;" v-show="this.active===1||this.active===2">
        <el-button type="primary" @click="nextBtn" class="fr" style="margin-left:10px;" :disabled=isAbled>下一步</el-button>
        <el-button type="primary" @click="preBtn" class="fr">上一步</el-button>
      </div>
  </div>
</template>
<script>
// 上传Excel页面
import uploadExcel from './uploadExcel.vue';
// 预览数据页面
import previewData from './previewData.vue';
// 匹配字段页面
import matchField from './matchField.vue';
// 导入数据页面
import importState from './importState.vue';
  export default {
    data(){
      return {
         active: 0,
         isAbled:false
      };
    },
    created(){
    },
    methods: {
      changeActive(msg){
        this.active=msg;
      },
      goHis(){
        this.active++;
      },
      isAble(msg){
        this.isAbled=msg;
      },
      goback(){
        this.$router.push('/appArea');
      },
      preBtn(){
        if (this.active-- < 1) this.active = 0;
      },
      nextBtn(){
        if (this.active++ > 2) this.active = 3;
      },
      startBtn(){
        if (this.active++ > 2) this.active = 3;
      }
    },  
    components: {
       uploadExcel:uploadExcel,
       previewData:previewData,
       matchField:matchField,
       importState:importState
    },
  };
</script>
<style>
  input[type=file] {
    display: none;
}
</style>
<style scoped>
  .contentList{
    width: 100%;
    position: relative;
  }
  .btnList{
    height: 46px;
    line-height: 46px;
    background: #fff;
  }
  .btnList .el-button{
    height: 36px;
    width: 88px;
  }
  .importProgress{
    margin:16px 0px;
    text-align: center;
    background: #fff;
    padding: 5px 0px;
  }
</style>

