<template>
    <div class="height_100">
      <el-container>
          <el-header style="height:auto !important">
              <div class="head">
                  <el-steps :active="active" finish-status="success">
                      <el-step v-for="(step,index) in steps" :key="index" :title="step.name"></el-step>
                  </el-steps>
              </div>
          </el-header>
          <el-main class="height_100" v-DivHeight="getDivHeight">
              <div v-if="showTable" :style="`padding:0 50px;height:${tableHeight - 80}px`">
                  <component ref="exportReportMessage" class="height_100" :is='component'  :projectId="projectId" :choose="true" :checkList="choose[component]"></component>
              </div>
          </el-main>
          <el-footer class="pagination">
              <div class="btns">
                  <el-button type="primary" size="small" @click="reBack" v-if="this.active!=0">返回上一步</el-button>
                  <el-button type="primary" size="small" @click="next" :loading="btnLoading">{{ active == steps.length-1?'确认并复用':'确认并进行下一步' }}</el-button>
              </div>
          </el-footer>
      </el-container>
    </div>
</template>
  
<script>
  import { getTableHeight } from '@/views/components/mixins'
  import contrastFile from '../details/components/contrastFile/contrastFile.vue';
  import contrastRecords from '../details/components/contrastRecords/contrastRecords.vue';
  import searchRecords from '../details/components/searchRecords/searchRecords.vue'
  const steps = [
      {
          name:'选择对比文件',
          value:1,
          component:'contrastFile'
      },
      {
          name:'选择对比记录',
          value:2,
          component:'contrastRecords'
      },
      {
          name:'选择检索记录',
          value:3,
          component:'searchRecords'
      }
  ]
  export default {
      mixins:[getTableHeight],
    components: {
      contrastFile,
      contrastRecords,
      searchRecords
    },
    props: {
      projectId:{
          
      },
      toProjectId:{

      }
    },
    data() {
      return {
          active: 0,
          steps:[],
          component:'contrastFile',
          choose:{
              contrastFile:[],
              contrastRecords:[],
              searchRecords:[],
          },
          btnLoading:false
      };
    },
    watch: {},
    computed: {},
    created() {},
    mounted() {
      this.init()
    },
    methods: {
      init(){
          var step = [1,2,3]
          this.steps = steps.filter(item=>{
              return step.indexOf(item.value) !=-1
          })
          this.component = this.steps[0].component
      },
      reBack(){
          if(this.active == 0){
              return 
          }
          this.active--
          this.component =  this.steps[this.active].component
      },
      next(){
        this.choose[this.component] = this.$refs.exportReportMessage.checkList1
          if(this.active == this.steps.length - 1){
            var params = {
                fromProjectId:this.projectId,
                toProjectId:this.toProjectId,
                searchRecordIds:this.choose.searchRecords,
                compareRecordIds:this.choose.contrastRecords,
                compareLiteratureIds:this.choose.contrastFile,
            }
            var message = this.$message({
                message: '信息复用中...',
                type: 'warning',
                duration:0
            });
            this.btnLoading = true
            this.$api.copyNoveltyMessage(params).then(response=>{
                if(response.code == 200){
                    message.close()
                    this.$message.success('信息复用完成')
                    this.btnLoading = false
                    var reportId = response.data
                    const router = this.$router.resolve({
                        path: '/noveltySearchDetails',
                        query: {
                            projectId:reportId
                        }
                    })
                    window.open(router.href,"_self")
                }
            }).catch(error=>{
                message.close()
                this.$message.error('信息复用失败')
                this.btnLoading = false
            })
            return 
          }
          
          this.active++
          this.component =  this.steps[this.active].component
      },
    },
  };
  </script>
  <style lang="scss" scoped>
  .head{
      width:100%;
      padding: 10px;
  }
  .btns{
      display: flex;
      align-items: center;
      justify-content: center;
  }
  </style>