<style>
  .changeClassProcess {
    width: 350px;
  }

  .changeClassProcess .processList {
    width: 100%;
    height: auto;
  }

  .changeClassProcess .processTop {
    width: 100%;
    height: 54px;
    background-color: #F1F1F1;
    color: #000000;
    text-align: center;
    line-height: 54px;
    border-radius: 2px;
    cursor: pointer;
    position: relative;
  }

  .changeClassProcess .processLine {
    width: 100%;
    height: 54px;
    background-color: #fff;
    color: #bbb6b6;
    text-align: center;
    line-height: 54px;
  }

  .changeClassProcess .processLine i {
    font-size: 25px;
    font-weight: bold;
  }

  .changeClassProcess .otherList {
    background-color: #2961FE !important;
    color: #fff;
    font-weight: bold;
  }

  .changeClassProcess .process_TwoList {
    display: flex;
    background-color: #2961FE !important;
    color: #fff;
    font-weight: bold;
    align-items: center;
    justify-content: center;
  }

  .changeClassProcess .process_He {
    width: 36px;
    height: 36px;
    background-color: #3FC4FF;
    text-align: center;
    line-height: 36px;
    color: #fff;
    border-radius: 50%;
  }

  .changeClassProcess .process_Left {
    width: 40%;
    height: 100%;
    text-align: right;
  }

  .changeClassProcess .process_center {
    width: 20%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .changeClassProcess .process_Right {
    width: 40%;
    height: 100%;
    text-align: left;
  }

  .changeClassProcess .process_OR {
    background-color: #F28C1D;
  }

  .changeClassProcess .addProcessBtn {
    width: 100%;
    height: 45px;
    text-align: center;
    line-height: 45px;
    color: #2961FE;
    border: 1px dashed #2961FE;
    border-radius: 2px;
    cursor: pointer;
  }

  .changeClassProcess .process_BtnList {
    margin-top: 30px;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .changeClassProcess .process_BtnOne {
    width: 90px;
    height: 38px;
    text-align: center;
    line-height: 38px;
    border-radius: 2px;
    border: 1px solid #A1AAB2;
    color: #000000;
    cursor: pointer;
    margin-right: 50px;
  }

  .changeClassProcess .SetShouSun {
    display: inline-block;
    border-radius: 2px;
    background-color: #8175FB;
    color: #fff;
    position: absolute;
    right: 10px;
    width: 60px;
    height: 27px;
    left: 0;
    top: 0;
    line-height: 27px;
    font-size: 13px;
  }

  .changeClassProcess .operationDiv {
    position: absolute;
    right: 0;
    top: 0;
    height: 30px;
    line-height: 30px;
    padding-right: 10px;
    vertical-align: top;
  }

  .changeClassProcess .operationDiv i:first-child {
    font-size: 13px;
  }

  .changeClassProcess .operationDiv i:hover {
    color: red;
  }

  .changeClassProcess .justTwoClass {
    margin-left: 8px;
  }
</style>
<template>
  <div class="changeClassProcess">
    <div class="processList">
      <div class="processTop">发起人</div>
      <div class="processLine">
        <i class="iconfont icon-down"></i>
      </div>
    </div>
    <template v-for="(item,index) in flowObj.FlowNodeList">
      <div class="processList" @click="getItem(index)" :key="index">
        <template v-if="item.FlowAduitList&&item.FlowAduitList.length==1">
          <div class="processTop otherList">
            {{item.FlowAduitList[0].AduitName}}
            <template v-if="item.FlowAduitList&&item.FlowAduitList.length>0 && item.FlowAduitList[0].IsSpecNode==1">
              <span class="SetShouSun">设定收损</span>
            </template>
            <div class="operationDiv">
              <i class="iconfont icon-shanchu" style="position:relative;top:-2px;" @click.stop="DeleteNode(index)"></i>
              <i style="margin:0 8px;" class="iconfont icon-shangyi2" v-if="index!=0"
                @click.stop="moveDown(index,0)"></i>
              <i class="iconfont icon-xiayi" :class="{'justTwoClass':index==0}" @click.stop="moveDown(index,1)"
                v-if="index!=flowObj.FlowNodeList.length-1"></i>
            </div>
          </div>
          <div class="processLine" v-if="index!=flowObj.FlowNodeList.length-1">
            <i class="iconfont icon-down"></i>
          </div>
        </template>
        <template v-else>
          <div class="processTop process_TwoList">
            <div class="process_Left">{{item.FlowAduitList[0].AduitName}}</div>
            <div class="process_center">
              <template v-if="item.FlowAduitList[0].AuditWay==2">
                <div class="process_He">和</div>
              </template>
              <template v-if="item.FlowAduitList[0].AuditWay==3">
                <div class="process_He process_OR">或者</div>
              </template>
            </div>
            <div class="process_Right">
              <template v-for="(subItem,subIndex) in item.FlowAduitList" v-if="subIndex>0">
                {{subItem.AduitName}}
              </template>
            </div>
            <template v-if="item.FlowAduitList&&item.FlowAduitList.length>0 && item.FlowAduitList[0].IsSpecNode==1">
              <span class="SetShouSun">设定收损</span>
            </template>
            <div class="operationDiv">
              <i class="iconfont icon-shanchu" style="position:relative;top:-2px;" @click.stop="DeleteNode(index)"></i>
              <i style="margin:0 8px;" class="iconfont icon-shangyi2" v-if="index!=0"
                @click.stop="moveDown(index,0)"></i>
              <i class="iconfont icon-xiayi" :class="{'justTwoClass':index==0}" @click.stop="moveDown(index,1)"
                v-if="index!=flowObj.FlowNodeList.length-1"></i>
            </div>
          </div>
          <div class="processLine" v-if="index!=flowObj.FlowNodeList.length-1">
            <i class="iconfont icon-down"></i>
          </div>
        </template>
      </div>
    </template>
    <br />
    <div class="addProcessBtn" @click="AddNode">新增节点</div>
    <div class="process_BtnList">

      <q-btn label="保存" color="accent q-px-md" style="font-weight:400 !important" @click="setBackClassFlow" />
    </div>
    <process-form v-if="isShowProcess" :save-obj="processObj" :NodeIndex="ChooseNodeIndex" @close="closeProcessForm"
      @success="refreshPage" :authObj="showObj">
    </process-form>
  </div>
</template>
<script>
  import processForm from '../../components/flow/process-form';
  import {
    queryBackClassFlow,
    saveBackClassFlow
  } from '../../api/system/index'
  export default {
    meta: {
      title: ""
    },
    components: {
      processForm
    },
    data() {
      return {
        msg: {
          FlowId: 4
        },
        isShowProcess: false, //显示旁边弹窗
        processObj: {}, //传递子组件
        flowObj: {
          FlowId: 4,
          FlowName: "临时上课邀请流程",
          FlowNodeList: [], //审核节点列表
        },
        //显示对象
        showObj: {
          isShowShouSun: 0, //不显示收损
        },
        ChooseNodeIndex: 0,
      }
    },
    created() {},
    mounted() {
      this.getBackClassFlow();
    },
    methods: {
      //新增节点
      AddNode() {
        this.flowObj.FlowNodeList.push({
          FlowId: 0,
          NodeId: 0,
          NodeName: "新增节点",
          SortNum: 0,
          FlowAduitList: [{
            AduitName: "新增节点",
            AuditType: 2,
            AuditWay: 2,
            CheckId: 0,
            FlowId: 0,
            IsSpecNode: 0,
            NodeId: 8,
            PostType: 0,
            UserId: 0,
          }]
        });
      },
      //删除节点
      DeleteNode(index) {
        this.$q.dialog({
          title: '提示信息',
          message: '是否确定删除该流程',
          cancel: true,
          persistent: true,
          ok: "确定",
          cancel: "取消",
        }).onOk(() => {
          this.flowObj.FlowNodeList.splice(index, 1);
        }).onCancel(() => {

        });
      },
      getBackClassFlow() {
        queryBackClassFlow(this.msg).then(res => {
          if (res.Code == 1 && res.Data) {
            this.flowObj = res.Data;
          }
        })
      },
      //点开旁边
      getItem(nodeIndex) {
        this.processObj = this.flowObj;
        this.ChooseNodeIndex = nodeIndex;
        this.isShowProcess = true;
      },
      //关闭
      closeProcessForm() {
        this.isShowProcess = false
      },
      //成功刷新
      refreshPage() {
        this.isShowProcess = false;
        this.getBackClassFlow();
      },
      //保存退课流程
      setBackClassFlow() {
        saveBackClassFlow(this.flowObj).then(res => {
          if (res.Code == 1) {
            this.$q.notify({
              icon: 'iconfont icon-chenggong',
              color: 'accent',
              timeout: 2000,
              message: '操作成功',
              position: 'top'
            })
            this.refreshPage();
          }
        })
      },
      //下移下移
      moveDown(index, IsUp) {
        var currentItem = this.flowObj.FlowNodeList[index];
        if (IsUp == 0) {
          if (index > 0) {
            var upItem = this.flowObj.FlowNodeList[index - 1];
            this.$set(this.flowObj.FlowNodeList, index - 1, currentItem);
            this.$set(this.flowObj.FlowNodeList, index, upItem);
          }
        } else {
          if (index != this.flowObj.FlowNodeList.length - 1) {
            var downItem = this.flowObj.FlowNodeList[index + 1];
            this.$set(this.flowObj.FlowNodeList, index + 1, currentItem);
            this.$set(this.flowObj.FlowNodeList, index, downItem);
          }
        }
      }
    }
  }
</script>