<template>
	<div>
		<!-- 步骤条 -->
		<!-- 点击下一步步骤条及组件切换（若未完成上一次填写则无法跳转下一个组件）
        完成后变成成功状态，此时可以点击步骤条回到上一步，下一步变成等待状态
    	-->
		<el-steps :active="active - 0" finish-status="success" align-center style="margin-top: 20px;">
			<el-step
				v-for="(item, index) of stepParams"
				:key="index"
				:title="item.title"
				:status="item.status"
				:class="stepSuc.includes(index) ? 'stepSuc' : 'stepErr'"
				@click.native="handStep(index)"
			></el-step>
		</el-steps>
		<!-- 上/下一页 -->
		<div class="changeStep">
			<el-button @click="previous" v-if="active>0">上一步</el-button>
			<el-button @click="finish" v-if="active >= 2">完成</el-button >
			<el-button @click="next" v-else>下一步</el-button>
		</div>
		<component :is="steps" ref="reportanalyse" :reportName="reportMessage.name" :patentNo="patentNo" :reportId="reportId" :splitType="splitType" :splitBy="splitBy" :personId="personId" :ChosePatentSure="ChosePatentSure" @isSave="isSave" @save="save" :isFinish="isFinish" @addTask="addTask"></component>
		<!-- 弹窗提示 -->
		<el-dialog title="温馨提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
			<div class="spanDiv">
				<div>
					<span class="spanCountdown">{{ countdown }}</span>
					<span class="spanCenter">秒后跳转到<span class="spanJump" @click="dialogVisibleSure">报告管理</span>页面</span>
				</div>
			</div> 
		</el-dialog>
	</div>
</template>

<script>
	import AssignTasks from "./InvalidPage/AssignTasks";
	import ChosePatent from "./InvalidPage/ChosePatent";
	import Claims from "./InvalidPage/Claims.vue";
export default {
  components: {
    Claims,
    ChosePatent,
    AssignTasks,
  },
  data() {
    return {
      reportMessage:{},
      isFinish:false,
      IsTask:false,
      patentNo: '',
      reportId: '',
      splitType:'',
      splitBy: '',
      personId:"",
      // tabPosition: 'left',
      active: 0,
      // products:[],
      // showbtn:false,
      // patentList:[],
      // projectId:"",
      steps: "Claims",
      stepSuc: [],
      stepParams: [
        {
          title: "标的专利详情",
          status: "process",
        },
        {
          title: "选择对比文件",
          status: "wait",
        },
        {
          title: "分配任务文件",
          status: "wait",
        },
      ],
      dialogVisible: false,
      countdown: 3,
      keepSure: true,//是否保存
      timer: null,
      ChosePatentSure: false,
      ChosePatentSave:false
    };
  },
  created() {
    this.patentNo = this.$route.query.patentNo
    this.reportId = this.$route.query.id
    // this.splitBy = this.$route.query.splitBy
    // this.splitType = this.$route.query.splitType
    console.log("@@@", this.patentNo, this.reportId,this.$s.getSession('reportMessage1'))
    this.splitBy = this.$s.getSession('reportMessage1').splitBy?this.$s.getSession('reportMessage1').splitBy.toString():null
    this.splitType = this.$s.getSession('reportMessage1').splitType?this.$s.getSession('reportMessage1').splitType.toString():null
    this.personId = this.$route.query.personId
    this.reportMessage = this.$s.getSession('reportMessage1')
    console.log("@@@", this.patentNo, this.reportId,this.$s.getSession('reportMessage1'))
  },
  mounted() {
    let activeA = localStorage.activeWatch==undefined?localStorage.activeWatch:JSON.parse(localStorage.activeWatch)
    if (activeA) {
      let m = activeA.findIndex(item => { return item.reportId == this.reportId })
      if (m<0) {
        this.active=this.active
      } else {
        this.active=activeA[m].active
        this.stepSuc = activeA[m].stepSuc
      }
    } else {
      this.active=this.active
    };
    this.gong()
  },
  methods: {
    // isEdit(val){
    //   if(val){

    //   }
    // },
  //获取是否完成
    addTask(val){
      this.IsTask = val
      this.isFinish = false
      if(val){
        this.active = 3;
        this.stepSuc.push(this.active - 1);
        this.stepParams[2].status = "success";
      }
    },

    isSave(val) {
      this.keepSure=val
    },
    save(val) {
      this.ChosePatentSave = val
      this.ChosePatentSure = val
    },
    // 从当前页点击上一步骤，回到上一步骤的页面，当前页消失变成等待（只能通过点击下一页进行下一步骤），上一页变成可编写
    // 点击下一步将index存入一个数组中，点击上一步骤的某个页面，拿到index，删除数组后面的index，显示页面
    handStep(id) {
      if (this.stepSuc.indexOf(id) != -1) {
        this.stepSuc = this.stepSuc.slice(0, this.stepSuc.indexOf(id));
        this.active = id;
        this.gong();
      }
    },
    //步骤条样式及组件
    gong() {
      switch (this.active) {
        case 0:
          this.stepParams[0].status = "process";
          this.stepParams[1].status = "wait";
          this.stepParams[2].status = "wait";
          this.steps = "Claims";
          break;
        case 1:
          this.stepParams[0].status = "success";
          this.stepParams[1].status = "process";
          this.stepParams[2].status = "wait";
          this.steps = "ChosePatent";

          break;
        case 2:
          this.stepParams[0].status = "success";
          this.stepParams[1].status = "success";
          this.stepParams[2].status = "process";
          this.steps = "AssignTasks";
          break;
        default:
          this.stepParams[0].status = "success";
          this.stepParams[1].status = "success";
          this.stepParams[2].status = "success";
          break;
      }
    },
    next() {//下一步
      if (this.active==1) {
        if (this.ChosePatentSure) {
          this.active += 1;
          this.stepSuc.push(this.active-1);
          console.log(this.stepSuc)
          this.gong();
          this.ChosePatentSave = false;
          this.ChosePatentSure = false;
        } else {
          this.ChosePatentSure = true;
        }
      } else {
        if (this.keepSure) {
          this.active += 1;
          this.stepSuc.push(this.active-1);
          console.log(this.stepSuc)
          this.gong();
        } else {//未保存提示
          this.$confirm('您的修改未保存，如果点击确定将直接跳转下一步，您的修改不会被保存，若想保存您的修改，请点击取消，点击保存按钮保存修改！', '温馨提示',  {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {//
            this.active += 1;
            this.stepSuc.push(this.active - 1);
            this.gong();
          }).catch(() => {
                  
          });
        }
      }
      
      
    },
    previous() {//上一步
      if (this.active==3) {
        this.active = 1
        if (this.stepSuc.indexOf(this.active) != -1) {
          this.stepSuc = this.stepSuc.slice(0, this.stepSuc.indexOf(this.active));
        }
      } else {
        this.active -= 1;
        this.stepSuc.pop()
      }
      this.gong();
    },
  
    //完成
    finish() {
     
      this.isFinish = true

      
    },
    out(){
      this.dialogVisible = true;
      this.timer = setInterval(() => {
        if (this.countdown == 0) {
          this.$router.replace("/admin/rManage");
          clearInterval(this.timer);
        } else {
          this.countdown--;
        }
      }, 1000);
      this.IsTask = false
    },
    //跳转
    dialogVisibleSure() {
      this.$router.replace("/admin/rManage");
    },
    handleClose() {
      clearInterval(this.timer);
      this.dialogVisible = false;
    }
  },
  watch: {
    active(val) {
      console.log(val);
      // localStorage.clear("activeWatch");
      var act = localStorage.activeWatch==undefined?localStorage.activeWatch:JSON.parse(localStorage.activeWatch)
      var a = {
        reportId: this.reportId,
        stepSuc:this.stepSuc,
        active:val
      }
      // console.log(act);
      if (act) {
        // console.log(11);
        var c = act.findIndex(item => { return item.reportId == this.reportId })
        if (c < 0) {
          act.push(a)
        } else {
          act[c].active=val
        }
        localStorage.activeWatch=JSON.stringify(act)
      } else {
        var b = [];
        b.push(a)
        localStorage.activeWatch=JSON.stringify(b)
      }
    },
    ChosePatentSave(val) {
      if (val) {
        this.ChosePatentSure=true
        this.next()
      }
    },
    IsTask(val){
      if(val){
        this.out()
      }
    }
  }
};
</script>

<style lang="scss" scoped>
	.changeStep{
		padding: 0 20px;
		display: flex;
		justify-content: flex-end;
	}
	.changeStep button{
		margin-left: 20px;
	}
	.spanDiv{
		display: flex;
		justify-content: center;
		height: 100px ;
	}
	.spanCountdown{
		color: red;
		font-size: 24px;
		margin: 10px;
	}
	.spanCenter{
		margin: 0;
		font-size: 16px;
	}
	.spanJump:hover{
		cursor :pointer;
		color: red;
		text-decoration:underline;
	}
	.spanJump{
		font-size: 16px;
		margin: 10px 0;
		color: #42A5F5;
	}
</style>