<!--申请入党-->
<template>
  <div class="body">
    <div v-loading.fullscreen.lock="loadingFull" />
    <div class="super-flow-base-demo">
      <super-flow
        ref="superFlow"
        :node-list="nodeList"
        :link-list="linkList"
        :origin="origin"
        :draggable="false"
      >
        <template v-slot:node="{ meta }">
          <div :class="`flow-node flow-node-${meta.prop}`">
            <header class="ellipsis">{{ meta.idx }}.{{ meta.name }}</header>
            <section v-if="meta.child.length > 0">
              <div
                v-for="(item, index) in meta.child"
                @click="clickList(item, meta)"
              >
                <div class="child">▶ {{ item.name }}</div>
              </div>
            </section>
            <section v-else>
              <div else class="child" style="color:#827e7e">
                暂无要上传的内容
              </div>
            </section>
          </div>
        </template>
      </super-flow>
    </div>
  </div>
</template>

<script>
import SuperFlow from "vue-super-flow";
import "vue-super-flow/lib/index.css";
import { fatherLists } from "@/api/organizationList/index";
import { processFlow } from "@/api/process/index";
import { setTimeout } from "timers";
import store from "@/store";

export default {
  components: { SuperFlow },
  data() {
    return {
      loadingFull: false,
      treeList: [], //支部列表
      linkSetting: {
        desc: ""
      },
      organization_id: "",
      organizationText: "",
      nodeSetting: {
        name: "",
        desc: ""
      },
      index: "",
      searchParams: {
        name: "", //支部名称
        zb_sj: "", //支部书记
        limit: 15, //每页显示条数
        page: 1 //当前页码
      }, //搜索框数据
      origin: [681, 465],
      nodeList: [],
      linkList: [],
      flowList: ""
    };
  },
  props: {},
  created() {
    var that = this;
    this.loadingFull = true;
    setTimeout(function() {
      that.dataList();
    }, 500);
    fatherLists().then(res => {
      console.log(res, "llllll");
      this.treeList = res.data;
    });
    this.clickList();
  },
  mounted() {
    this.loadingFull = true;
    var that = this;
    setTimeout(function() {
      that.dataList();
    }, 500);
    fatherLists().then(res => {
      console.log(res, "llllll");
      this.treeList = res.data;
      const id = sessionStorage.getItem("organizationId");
      console.log(typeof id, typeof 22);
      if (id) {
        that.organization_id = Number(id);
      }
    });
  },
  methods: {
    dataList() {
      console.log(this.$parent.flowDate, "pppp");
      let flowList = JSON.parse(sessionStorage.getItem("flowDate"));
      let arr = [];
      let list = [];
      let nodelist = flowList;
      let index = -1;
      console.log(flowList, "nodelist");
      let clientX, clientY;
      for (let i = 0, leng = nodelist.length; i < leng; i++) {
        let clientX, clientY;
        if (i < 3) {
          clientX = -600 + 450 * i;
          console.log(i, "index");
          clientY = -420;
          if (i < 2) {
            arr.push({
              idx: nodelist[i].idx,
              id: nodelist[i].key,
              coordinate: [clientX, clientY],
              meta: nodelist[i]
            });
            if (nodelist[i + 1]) {
              list.push({
                id: nodelist[i].idx,
                startId: nodelist[i].key,
                endId: nodelist[i + 1].key,
                startAt: [160, 40],
                endAt: [0, 40],
                meta: null
              });
            }
          } else {
            arr.push({
              idx: nodelist[i].idx,
              id: nodelist[i].key,
              coordinate: [clientX, clientY],
              meta: nodelist[i]
            });
            if (nodelist[i + 1]) {
              list.push({
                id: nodelist[i].idx,
                startId: nodelist[i].key,
                endId: nodelist[i + 1].key,
                startAt: [160, 40],
                endAt: [160, 40],
                meta: null
              });
            }
          }
        } else if (i >= 3) {
          clientY = -100;
          clientX = 300 - 450 * (i - 3);
          arr.push({
            idx: nodelist[i].idx,
            id: nodelist[i].key,
            coordinate: [clientX, clientY],
            meta: nodelist[i]
          });
          if (nodelist[i + 1]) {
            list.push({
              id: nodelist[i].idx,
              startId: nodelist[i].key,
              endId: nodelist[i + 1].key,
              startAt: [0, 40],
              endAt: [150, 25],
              meta: null
            });
          }
          console.log(i, "这是测试------------------------------------------");
        }
        this.nodeList = arr;
        this.linkList = list;
        console.log(this.linkList, "linkList");
        this.loadingFull = false;
      }
    },
    //selectNode(e) {
    //  console.log(e, "meta");
    //  let nodeIndex = e.index;
    //  console.log(nodeIndex, "meta");
    //  sessionStorage.setItem("organizationText", e.label);
    // },
    selectOrganization(e) {
      console.log(e, "767");
      console.log(this.organization_id);
      sessionStorage.setItem("organizationId", this.organization_id);
    },
    //点击选择流程，列表
    clickList(item, meta) {
      this.$emit("childData", item);
      let nodeIndex = meta.index;
      sessionStorage.setItem("organizationText", meta.label);
      sessionStorage.setItem("selectedZb", JSON.stringify(item));
      let roles = store.getters.roles;
      roles.map(item => {
        if (item == "Super admin" || item == "Admin") {
          this.$router.push({ name: "applylist", query: {} });
        } else {
          this.$router.push({ name: "student", query: {} });
        }
      });
    }
  }
};
</script>

<style lang="scss">
@import "@/assets/styles/content.scss";
.ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-wrap: break-word;
}

.child {
  line-height: 40px;
  height: 40px;
}
.super-flow-base-demo {
  width: 100%;
  height: 800px;
  margin: 0 auto;
  background-color: #ffffff;
  .super-flow__line {
  }

  .super-flow__node {
    border-radius: 10px;
    min-width: 220px !important;
    overflow: hidden;
    height: auto !important;
    border: 1px solid #bc1d16;
    width: auto !important;
    .flow-node {
      > header {
        font-size: 18px;
        font-weight: 500;
        height: 45px;
        min-width: 200px;
        line-height: 45px;
        text-align: left;
        padding: 0 12px;
        color: #ffff !important;
        // border-bottom: solid 1px #fcd8d8;
        background-color: #bc1d16 !important;
        border-radius: 10px 10px 0 0;
      }

      > section {
        text-align: left;
        min-height: 60px;
        overflow: hidden;
        padding: 10px 5px;
        letter-spacing: 1px;
        font-size: 16px;
        text-align: left;
        color: #bc1d16 !important;
        word-break: break-all;
        cursor: pointer;
        .child {
          padding: 0 0px;
          &:hover {
            background-color: #bc1d16 !important;
            color: #fff !important;
            border: 1px solid #fff;
            padding: 0 5px;
            border-radius: 5px;
          }
        }
      }
      &.flow-node-start {
        > header {
          background-color: #55abfc;
        }
      }

      &.flow-node-condition {
        > header {
          background-color: #bc1d16;
        }
      }

      &.flow-node-approval {
        > header {
          background-color: rgba(188, 181, 58, 0.76);
        }
      }

      &.flow-node-cc {
        > header {
          background-color: #30b95c;
        }
      }

      &.flow-node-end {
        > header {
          height: 50px;
          line-height: 50px;
          background-color: rgb(0, 0, 0);
        }
      }
    }
  }
}
</style>
