<template>
  <div class="dailyinspectionDetailDistri_bution">
    <div v-show="active === 1">
      <taskGeneration></taskGeneration>
    </div>
    <div v-show="active === 2">
      <avoid></avoid>
    </div>
    <div v-show="active === 3">
      <checkExtraction></checkExtraction>
    </div>

    <br />
    <div class="btn_operation">
      <el-button type="primary" v-show="is_btnShow && active != 2" @click="next_step()">暂存</el-button>
      <el-button type="primary" @click="go_dailyinspection()">取消</el-button>
      <el-button type="primary" v-show="active != 2">发送</el-button>
      <el-button type="primary" v-show="active>1 && active != 3 " @click="last_step()">上一步</el-button>
<!--      <el-button type="primary" @click="next_step()">确定</el-button>-->
      <el-button type="primary" v-show="is_btnShow" @click="next_step()">下一步</el-button>


    </div>
  </div>
</template>

<script>
    import taskGeneration from "./distribution/taskGeneration"
    import avoid from "./distribution/avoid"
    import checkExtraction from "./distribution/checkExtraction"
    export default {
        name: "dailyinspectionDetailDistri_bution",
        components:{
            taskGeneration,
            avoid,
            checkExtraction
        },
        data(){
            return{
                is_btnShow:true,//控制下一步按钮显示隐藏
                active:1
            }
        },
        methods:{
            go_dailyinspection(){
              this.$router.push("/inspection/dailyinspection")
            },
            show_btn(){
                if(this.active == 1 || this.active == 2){
                    this.is_btnShow = true;
                }
            },
            next_step(){
                if(this.active > 1){
                    this.is_btnShow = false
                }else{
                    this.is_btnShow = true
                }
                if(this.active < 3){
                    this.active++;
                }else{
                    this.is_btnShow = false
                }
                console.log(this.active)
            },
            last_step(){
                this.active--
                this.show_btn()
                console.log(this.active)
            }
        }
    }
</script>

<style scoped>
  .dailyinspectionDetailDistri_bution{
    margin-left: 10px;
    overflow-y: auto;
    height: calc(100vh - 218px);
    width: calc(100% - 40px);
    overflow-x: hidden;
    background: #f6f7f9;
    border: 1px solid #efeded;
    padding: 0 10px;
  }
  .mySteps{
    margin: 20px 80px 15px 50px;
  }
  .btn_operation{
    text-align: center;
  }
</style>

