<template>
  <div class="index-home">
    <div v-if="roles=='Super admin' ||  roles=='Admin'">
      <el-row
        :gutter="40"
        class="panel-group"
      >
        <el-col
          :xs="12"
          :sm="12"
          :lg="8"
          class="card-panel-col"
        >
          <div
            class="card-panel"
            @click="handleSetLineChartData('newVisitis')"
          >
            <div class="card-panel-icon-wrapper icon-people">
              <img
                src="@/assets/image/user.png"
                alt=""
                srcset=""
                class="card-img"
              >
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">
                总用户数
              </div>
              <count-to
                :start-val="0"
                :end-val="indexDate.user_nums"
                class="card-panel-num"
              />
            </div>
          </div>
        </el-col>
        <el-col
          :xs="12"
          :sm="12"
          :lg="8"
          class="card-panel-col"
        >
          <div
            class="card-panel"
            @click="handleSetLineChartData('messages')"
          >
            <div class="card-panel-icon-wrapper icon-message">
              <img
                src="@/assets/image/zhibu.png"
                alt=""
                srcset=""
                class="card-img"
              >

            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">
                支部数
              </div>
              <count-to
                :start-val="0"
                :end-val="indexDate.organization_nums"
                :duration="3000"
                class="card-panel-num"
              />
            </div>
          </div>
        </el-col>
        <el-col
          :xs="12"
          :sm="12"
          :lg="8"
          class="card-panel-col"
        >
          <div
            class="card-panel"
            @click="handleSetLineChartData('purchases')"
          >
            <div class="card-panel-icon-wrapper icon-money">
              <img
                src="@/assets/image/dangyuan.png"
                alt=""
                srcset=""
                class="card-img"
              >
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">
                正式党员数
              </div>
              <count-to
                :start-val="0"
                :end-val="indexDate.dy_nums"
                class="card-panel-num"
              />
            </div>
          </div>

        </el-col>

      </el-row>
      <el-row :gutter="32">
        <el-col
          :xs="24"
          :sm="24"
          :lg="8"
        >

          <div class="chart-wrapper">
            <pie-chart />
          </div>
        </el-col>
        <el-col
          :xs="24"
          :sm="24"
          :lg="8"
        >
          <div class="chart-wrapper">
            <div class="list">
              <div class="left">
                <img
                  class="icon"
                  src="@/assets/image/nv.png"
                  alt=""
                >
              </div>
              <div class="right">
                <el-progress
                  :text-inside="true"
                  :stroke-width="32"
                  :percentage="girlPercent"
                  status="exception"
                ></el-progress>
              </div>
            </div>
            <div class="list">
              <div class="left">
                <img
                  class="icon"
                  src="@/assets/image/nan.png"
                  alt=""
                >
              </div>
              <div class="right">
                <el-progress
                  :text-inside="true"
                  :stroke-width="32"
                  :percentage="boyPercent"
                ></el-progress>
              </div>
            </div>
          </div>
        </el-col>

      </el-row>
    </div>
    <div v-else>
      <div class="stu-title">
        中国共产党发展党员流程图
      </div>
      <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}`"
              @click="selectNode(meta)"
            >
              <header class="ellipsis">{{ meta.idx }}.{{ meta.name }}</header>
              <section v-if="meta.child.length > 0">
                <div v-for="(item, index) in meta.child">
                  <div v-for="(item1 , index1) in item.child">{{item1.name}}</div>
                  <div
                    class="child"
                    @click.stop="clickList(item)"
                  >
                    ▶ {{ item.name }}
                  </div>
                </div>
              </section>
              <section v-else>
                <div
                  else
                  class="child"
                  @click.stop="clickList(meta)"
                >
                  ▶ {{ meta.name }}
                </div>
              </section>
            </div>
          </template>
        </super-flow>
      </div>
      <!-- <flow
        :flowDate="flowDate"
        @childData="getChildDate"
      />-->
    </div>

  </div>
</template>

<script>
import SuperFlow from "vue-super-flow";
import "vue-super-flow/lib/index.css";
import Flow from "@/views/process/components/Flow";
import CountTo from "vue-count-to";
import { statistics } from "@/api/index/index";
import PieChart from "./admin/components/PieChart";
import RaddarChart from "./admin/components/RaddarChart";
import SwitchRoles from "@/views/permission/components/SwitchRoles";
import store from "@/store";
import { processFlow } from "@/api/process/index";

export default {
  components: {
    CountTo,
    PieChart,
    RaddarChart,
    Flow,
    SuperFlow
  },
  data() {
    return {
      roles: store.getters.roles[0],
      indexDate: "",
      girlPercent: 0,
      boyPercent: 0,
      childDate: "",
      origin: [681, 465],
      nodeList: [],
      linkList: [],
      flowDate: "",
      loadingFull: false
    };
  },
  created() {
    processFlow().then(res => {
      this.loadingFull = true;
      console.log(res.data, "数据流程");
      this.flowDate = res.data;
      this.dataList();
      sessionStorage.setItem("flowDate", JSON.stringify(res.data));
    }),
      statistics().then(res => {
        this.indexDate = res.data;
        let total = res.data.user_nums;
        let boy = res.data.sex_group[0].nums;
        let girl = res.data.sex_group[1].nums;
        this.girlPercent = (girl / total) * 100;
        //this.girlPercent=girl/total
        this.boyPercent = (boy / total) * 100;
        console.log(this.boyPercent);
      });
  },
  methods: {
    dataList() {
      console.log(this.$parent.flowDate, "pppp");
      let arr = [];
      let list = [];
      let nodelist = [];
      let data = [];
      let data1 = [];
      this.flowDate.map(item => {
        data.push(item.child);
        item.child.map(item1 => {
          console.log(item1, "---------------------------------------item1");
          data1.push(item1);
        });
      });
      nodelist = data1;

      let index = -1;

      let clientX, clientY;
      for (let i = 0, leng = nodelist.length; i < leng; i++) {
        let clientX, clientY;
        if (i < 4) {
          clientX = -650 + 350 * i;
          console.log(i, "index");
          clientY = -420;
          if (i < 3) {
            arr.push({
              idx: nodelist[i].idx,
              id: nodelist[i].key,
              coordinate: [clientX, clientY],
              meta: nodelist[i]
            });
            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]
            });
            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 >= 4 && i < 8) {
          clientY = -140;
          clientX = 400 - 350 * (i - 4);
          if (i < 7) {
            arr.push({
              idx: nodelist[i].idx,
              id: nodelist[i].key,
              coordinate: [clientX, clientY],
              meta: nodelist[i]
            });
            list.push({
              id: nodelist[i].idx,
              startId: nodelist[i].key,
              endId: nodelist[i + 1].key,
              startAt: [0, 40],
              endAt: [160, 40],
              meta: null
            });
          } else {
            arr.push({
              idx: nodelist[i].idx,
              id: nodelist[i].key,
              coordinate: [clientX, clientY],
              meta: nodelist[i]
            });
            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 >= 8 && i < 12) {
          clientX = -650 + 350 * (i - 8);
          clientY = 140;
          if (i < 11) {
            arr.push({
              idx: nodelist[i].idx,
              id: nodelist[i].key,
              coordinate: [clientX, clientY],
              meta: nodelist[i]
            });
            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]
            });
            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 >= 12 && i < 16) {
          clientX = 400 - 350 * (i - 12);
          clientY = 420;
          if (i < 15) {
            arr.push({
              idx: nodelist[i].idx,
              id: nodelist[i].key,
              coordinate: [clientX, clientY],
              meta: nodelist[i]
            });
            list.push({
              id: nodelist[i].idx,
              startId: nodelist[i].key,
              endId: nodelist[i + 1].key,
                  startAt: [0, 40],
              endAt: [160, 40],
              meta: null
            });
          } else {
            arr.push({
              idx: nodelist[i].idx,
              id: nodelist[i].key,
              coordinate: [clientX, clientY],
              meta: nodelist[i]
            });
            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 >= 16 && i < 20) {
          clientX = -650 + 350 * (i - 16);
          clientY = 700;
          if (i < 19) {
            arr.push({
              idx: nodelist[i].idx,
              id: nodelist[i].key,
              coordinate: [clientX, clientY],
              meta: nodelist[i]
            });
            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]
            });
            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 >= 20 && i < 24) {
          clientX = 400 - 350 * (i - 20);
          clientY = 980;
          if (i < 23) {
            arr.push({
              idx: nodelist[i].idx,
              id: nodelist[i].key,
              coordinate: [clientX, clientY],
              meta: nodelist[i]
            });
            list.push({
              id: nodelist[i].idx,
              startId: nodelist[i].key,
              endId: nodelist[i + 1].key,
              startAt: [0, 40],
              endAt: [160, 40],
              meta: null
            });
          } else {
            arr.push({
              idx: nodelist[i].idx,
              id: nodelist[i].key,
              coordinate: [clientX, clientY],
              meta: nodelist[i]
            });
            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 >= 24 && i < 28) {
          clientX = -650 + 350 * (i - 24);
          clientY = 1260;
          if (i < 27) {
            arr.push({
              idx: nodelist[i].idx,
              id: nodelist[i].key,
              coordinate: [clientX, clientY],
              meta: nodelist[i]
            });
            list.push({
              id: nodelist[i].idx,
              startId: nodelist[i].key,
              endId: nodelist[i + 1].key,
              startAt: [0, 40],
              endAt: [160, 40],
              meta: null
            });
          } else {
            arr.push({
              idx: nodelist[i].idx,
              id: nodelist[i].key,
              coordinate: [clientX, clientY],
              meta: nodelist[i]
            });
            list.push({
              id: nodelist[i].idx,
              startId: nodelist[i].key,
              endId: nodelist[i + 1].key,
              startAt: [-160, 40],
              endAt: [-160, 40],
              meta: null
            });
          }
        }
        this.loadingFull = false;
        this.nodeList = arr;
        this.linkList = list;
        console.log(this.nodeList, "linkList");
        this.loadingFull = false;
      }
    },
    handleSetLineChartData(type) {
      this.$emit("handleSetLineChartData", type);
    },
    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) {
      console.log(item, "item");
      this.$emit("childData", item);
      sessionStorage.setItem("selectedZb", JSON.stringify(item));
      console.log(store, "storestore");
      let roles = store.getters.roles;
      console.log(roles, "roles");
      roles.map(item => {
        console.log(item, "itemitem");
        if (item == "Super admin" || item == "admin") {
          this.$router.push({ name: "applylist", query: {} });
        } else {
          this.$router.push({ name: "student", query: {} });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.index-home{
margin: 0 30px;}
.stu-title {
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 40px;
  font-weight: bold;
  color: #bc1d16;
}
.panel-group {
  margin-top: 18px;

  .card-panel-col {
    margin-bottom: 32px;
  }

  .card-panel {
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.05);

    &:hover {
      .card-panel-icon-wrapper {
        color: #ffffff;
      }
    }
    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }
    .card-panel-icon {
      float: left;
      font-size: 48px;
    }

    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;

      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        font-size: 20px;
      }
    }
  }
}

@media (max-width: 550px) {
  .card-panel-description {
    display: none;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }
}
.chart-wrapper {
  background: #ffffff;
  padding-top: 20px;
  padding: 20px;
  margin-bottom: 32px;
  box-shadow: 4px 4px 40px rgb(0 0 0 / 5%);
  .list {
    display: flex;
  }

  .left {
    flex: 0 0 30%;
    .icon {
      height: 100px;
      margin: 48px;
    }
  }

  .right {
    flex: 1;
    margin-top: 90px;
  }

  .el-progress-circle {
    height: 90px;
    width: 100px;
  }
}
.wrapper {
  display: flex;
}
.el-progress-bar__outer {
  height: 32px !important;
}
.card-img {
  height: 50px;
}
.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__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 12px;
        letter-spacing: 1px;
        font-size: 16px;
        text-align: left;
        color: #bc1d16 !important;
        word-break: break-all;
        cursor: pointer;
        .child {
          padding: 0 0px;
        }
      }
      &.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);
        }
      }
    }
  }
}
.super-flow__line {
  z-index: 60 !important;
}
.super-flow-base-demo {
  height: 2000px;
  width: 85%;
  margin: 0 auto;
}
</style>
