<template>
  <div>
    <div class="step-div">
      <div v-for="(item,index) in stepList" style="width: 140px;">
        <div class="step-div" >
          <div class="num-div" @click="switchStep(item,$event)">{{index+1}}</div>
          <div v-if="index < stepList.length-1" class="num-line"></div>
        </div>
        <div class="num-title">
          处置人 {{ item.nickName }}
        </div>
        <div class="num-title">
          {{item.disposeTime}}
        </div>
      </div>
    </div>

    <el-button
      type="primary"
      plain
      icon="el-icon-plus"
      size="mini"
      style="margin: 10px 0px"
      @click="addStep"
    >新增步骤</el-button>

    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="处置内容" prop="disposeContent">
        <el-input type="textarea" v-model="form.disposeContent" placeholder="请输入处置内容"/>
      </el-form-item>
    </el-form>

    <div style="text-align: right" v-if="isAdd">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </div>
</template>

<script>
  import { listStep, stepListInfo, getStep, delStep, addStep, updateStep, exportStep } from "@/api/emergency/step";

  export default {
    name: "dispose",
    props:{
      responseId:{
        type: Number
      }
    },
    components: {
    },
    data() {
      return {
        stepList: [],
        rules: {
          disposeContent: [
            { required: true, message: "处置内容不能为空", trigger: "blur" }
          ],
        },
        form: {},
        isAdd: false
      };
    },
    created() {
      this.getList();
    },
    methods: {
      /** 查询应急处置步骤列表 */
      getList() {
        stepListInfo({responseId:this.responseId}).then(res => {
          if(res.code == 200 && res.data && res.data.length > 0){
            this.stepList = res.data;
            this.$nextTick(()=>{
                this.showlast();
            })
          }else{
            this.isAdd = true;
          }
        });
      },
      switchStep(item,$event){
        if(document.getElementsByClassName("num-div2")[0]!=undefined){
          document.getElementsByClassName("num-div2")[0].setAttribute("class","num-div")
        }
        $event.target.setAttribute("class","num-div2");
        if(item!=null){
          this.form = item;
        }
      },
      showlast(){
        if(document.getElementsByClassName("num-div2").length>0){
          document.getElementsByClassName("num-div2")[0].setAttribute("class","num-div")
        }
        document.getElementsByClassName("num-div")[this.stepList.length-1].setAttribute("class","num-div2");
        this.form = this.stepList[this.stepList.length-1];
      },
      submitForm(){
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.form.responseId = this.responseId;
            addStep(this.form).then(res =>{
              this.msgSuccess("新增成功");
              this.isAdd = false;
              this.getList();
            })
          }
        })

      },
      cancel(){
        this.reset();
      },
      addStep(){
        this.reset();
        this.isAdd = true;
      },
      reset(){
        this.form = {
          stepId: null,
          responseId: null,
          disposeContent: null,
          disposeTime: null,
          disposer: null
        };
        this.resetForm("form");
      }

    }
  };
</script>
<style scoped lang="scss">
  .step-div{
    display:flex;
    flex-direction:row;
    justify-content:flex-start;
    width: 100%;
  }

  .num-div{
    width: 30px;
    height: 30px;
    border:2px solid #b0b0b0;
    color: #b0b0b0;
    border-radius: 15px;
    text-align: center;
    font-size: 18px;
    line-height: 26px;
    margin-left: 5px;
    cursor:pointer;
  }

  .num-line{
    margin-left: 5px;
    width: 100px;
    height: 1px;
    border:1px solid #b0b0b0;
    margin-top: 14px;
  }

  .num-title{
    width: 140px;
    height: 30px;
    line-height: 30px;
  }

  .num-div2{
    width: 30px;
    height: 30px;
    border:2px solid #000000;
    color: #000000;
    border-radius: 15px;
    text-align: center;
    font-size: 18px;
    line-height: 26px;
    margin-left: 5px;
    cursor:pointer;
  }
</style>
