<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="next" v-else>下一步</el-button>
		</div>
		<component :is="steps" ref="reportanalyse" :reportMessage="reportMessage" :patentNo="patentNo" :reportId="reportId" :personId="personId" @isSave="isSave"></component>
    </div>
</template>

<script>
import Product from "@/views/report/FTO/FTOPage/product.vue";
import ProductContrast from './tortPage/ProductContrast.vue'
 export default{
    components: {
        Product,
        ProductContrast
    },
    data() {
        return {
            reportMessage:{},
            patentNo: '',
            reportId: '',
            personId:"",
            active: 0,
            steps: "Product",
            stepSuc: [],
            stepParams: [
                {
                title: "标的产品",
                status: "process",
                },
                {
                title: "技术特征对比",
                status: "wait",
                },
            ],
            keepSure: true,
        }
    },
    created() {
        this.patentNo = this.$route.query.patentNo
        this.reportId = this.$route.query.id
        this.personId = this.$route.query.personId
        this.reportMessage = this.$s.getSession('reportMessage1')
        console.log("@@@",this.$s.getSession('reportMessage1'))
    },
    watch:{
        active(val) {
            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)
            }
        },
    },
    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: {
        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.steps = "Product";
                    break;
                case 1:
                    this.stepParams[0].status = "success";
                    this.stepParams[1].status = "process";
                    this.steps = "ProductContrast";
                    break;
                default:
                    this.stepParams[0].status = "success";
                    this.stepParams[1].status = "success";
                    this.stepParams[2].status = "success";
                    break;
            }
        },
        isSave(val) {
            this.keepSure=val
        },
        previous() {//上一步
            this.active -= 1;
            this.stepSuc.pop()
            this.gong();
        },
        next() {//下一步
            if (this.keepSure) {
                this.active += 1;
                this.stepSuc.push(this.active-1);
                this.gong();
            } else {//未保存提示
                this.$confirm('请先输入产品信息！！！', '温馨提示',  {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {//
                    this.active += 1;
                    this.stepSuc.push(this.active - 1);
                    this.gong();
                }).catch(() => {
                        
                });
            }
        },
    },
 }
</script>

<style lang="scss" scoped>
	.changeStep{
		padding: 0 20px;
		display: flex;
		justify-content: flex-end;
	}
	.changeStep button{
		margin-left: 20px;
	}
</style>