<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)">
        <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: 7,
      },
      isShowProcess: false, //显示旁边弹窗
      processObj: {}, //传递子组件
      flowObj: {
        FlowId: 7,
        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>
