<template>
  <div class="organWrap">
    <div class="top-nav">
      <div class="top-nav-list">
        <div v-for="item in navList" :key="item.key" :class="[item.ifActive ? 'top-nav-itemAC' : 'top-nav-item']" @click="chooseNav(item)">{{ item.name }}</div>
      </div>
    </div>
    <!-- <div style="width: 100%; height: 100%；position: relative;">
      <div style="width: 100px; height: 100px; background-color: aqua; color: #fff;" v-drag>222</div>
    </div> -->
    <div class="content" v-on:wheel="zoomSize" :style="'transform: scale(' + nowVal / 100 + ');'">
      <div class="flowLevel">
        <div>社区党委</div>
      </div>
      <div class="flowLevel-2"><div>网格党支部</div></div>
      <div class="flowLevel-3"><div>楼院党小组</div></div>
      <div class="flowLevel-4"><div>党员中心户</div></div>
      <div class="flowLevel-5"><div>联系家庭</div></div>
      <el-row>
        <el-col :span="4">
          <div class="contentList"></div>
        </el-col>
        <el-col :span="20">
          <div class="dingflow-design">
            <nodeWrap :nodeConfig.sync="nodeConfig"></nodeWrap>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
// import Tree from "./components/tree.vue";
export default {
  name: "organizational",
  // components: {
  //   Tree,
  // },
  data() {
    return {
      navList: [
        {
          name: "党委组织架构",
          key: "1",
          ifActive: true,
        },
        {
          name: "居委组织架构",
          key: "2",
          ifActive: false,
        },
        {
          name: "网格架构",
          key: "3",
          ifActive: false,
        },
      ],
      cardList: [
        {
          title: "社区党委",
          key: "1",
          name: "南昌路社区党委 （党委书记：解书记）",
          children: [
            {
              title: "网格党支部",
              name: "第一网格党支部(支部书记：王艺发)",
              key: "1",
              children: [
                {
                  title: "楼院党小组",
                  name: "第一楼院党小组 （组长：韩文国）",
                  key: "1",
                },
                {
                  title: "楼院党小组",
                  name: "第二楼院党小组 （组长：褚丽兰）",
                  key: "2",
                },
              ],
            },
            {
              title: "网格党支部",
              name: "第二网格党支部 （支部书记：尤芬紫）",
              key: "2",
              children: [
                {
                  title: "楼院党小组",
                  name: "第一楼院党小组 （组长：韩文国）",
                  key: "1",
                },
                {
                  title: "楼院党小组",
                  name: "第二楼院党小组 （组长：褚丽兰）",
                  key: "2",
                },
              ],
            },
            {
              title: "网格党支部",
              name: "第三网格党支部 （支部书记：凤桥强）",
              key: "3",
              children: [
                {
                  title: "楼院党小组",
                  name: "第一楼院党小组 （组长：韩文国）",
                  key: "1",
                },
                {
                  title: "楼院党小组",
                  name: "第二楼院党小组 （组长：褚丽兰）",
                  key: "2",
                },
                {
                  title: "楼院党小组",
                  name: "第三楼院党小组 （组长：王丽丽）",
                  key: "3",
                },
              ],
            },
          ],
        },
      ],
      nowVal: 100,
      nodeConfig: {
        title: "社区党委",
        name: "南昌路社区党委(党委书记：解书记)",
        key: "1",
        children: [
          {
            title: "网格党支部",
            name: "第一网格党支部 （支部书记：王艺发）",
            type: 2,
            children: [
              {
                title: "楼院党小组",
                type: 3,
                name: "第一楼院党小组 （组长：韩文国）",
                children: [
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "周游",
                  },
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "王阳明",
                  },
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "刘艳萍",
                  },
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "谢苗苗",
                  },
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "杨军",
                  },
                ],
              },
              {
                title: "楼院党小组",
                type: 3,
                name: "第二楼院党小组 （组长：褚丽兰）",
                children: [
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "周游",
                  },
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "王阳明",
                  },
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "刘艳萍",
                  },
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "谢苗苗",
                  },
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "杨军",
                  },
                ],
              },
            ],
          },
          {
            title: "网格党支部",
            name: "第二网格党支部 （支部书记：尤芬紫）",
            type: 3,
            children: [
              {
                title: "楼院党小组",
                type: 3,
                name: "第一楼院党小组 （组长：韩文国）",
                children: [
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "周游",
                  },
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "王阳明",
                    children: [
                      {
                        title: "联系家庭",
                        type: 5,
                        name: "王宇",
                      },
                      {
                        title: "联系家庭",
                        type: 5,
                        name: "刘冰冰",
                      },
                      {
                        title: "联系家庭",
                        type: 5,
                        name: "杨飞宇",
                      },
                      {
                        title: "联系家庭",
                        type: 5,
                        name: "齐天",
                      },
                    ],
                  },
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "刘艳萍",
                  },
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "谢苗苗",
                  },
                ],
              },
              {
                title: "楼院党小组",
                type: 3,
                name: "第二楼院党小组 （组长：褚丽兰）",
                children: [
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "周游",
                  },
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "王阳明",
                  },
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "刘艳萍",
                  },
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "谢苗苗",
                  },
                ],
              },
            ],
          },
          {
            title: "网格党支部",
            name: "第三网格党支部 （支部书记：凤桥强）",
            type: 3,
            children: [
              {
                title: "楼院党小组",
                type: 3,
                name: "第一楼院党小组 （组长：韩文国）",
                children: [
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "周游",
                  },
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "王阳明",
                  },
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "刘艳萍",
                  },
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "谢苗苗",
                  },
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "杨军",
                  },
                ],
              },
              {
                title: "楼院党小组",
                type: 3,
                name: "第二楼院党小组 （组长：褚丽兰）",
                children: [
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "周游",
                  },
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "王阳明",
                  },
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "刘艳萍",
                  },
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "谢苗苗",
                  },
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "杨军",
                  },
                ],
              },
              {
                title: "楼院党小组",
                type: 3,
                name: "第三楼院党小组 （组长：王丽丽）",
                children: [
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "周游",
                  },
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "王阳明",
                  },
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "刘艳萍",
                  },
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "谢苗苗",
                  },
                ],
              },
            ],
          },
        ],
      },
    };
  },
  computed: {},
  methods: {
    chooseNav(item) {
      this.navList.forEach((d) => {
        if (item.key === d.key) {
          d.ifActive = true;
        } else {
          d.ifActive = false;
        }
      });
    },
    zoomSize(e) {
      e.preventDefault();
      if (e.deltaY > 0) {
        if (this.nowVal == 50) return;
        this.nowVal -= 0.5;
      } else if (e.deltaY < 0) {
        if (this.nowVal == 300) return;
        this.nowVal += 0.5;
      }
    },
  },
};
</script>

<style lang="scss">
@import "~@/assets/css/workflow.scss";
@mixin navListCommon {
  width: 120px;
  height: 36px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 500;
  margin-right: 4px;
  text-align: center;
  line-height: 36px;
  cursor: pointer;
}

@mixin flowLevwlCommon {
  position: absolute;
  width: 100%;
  margin-bottom: 45px;
  background: linear-gradient(90deg, rgba(14, 121, 213, 0.14) 86%, rgba(79, 175, 255, 0) 100%);
  color: #fff;
  font-size: 16px;
}

@mixin flowLevelAfter {
  position: absolute;
  content: "";
  display: block;
  background-size: 100%;
}

.organWrap {
  margin-top: 18px;
  .top-nav {
    .top-nav-list {
      display: flex;
      margin-left: 28px;
      .top-nav-item {
        @include navListCommon;
        background-image: url("~@/assets/images/home/noChooseMain.png");
        color: #96b1ce;
      }
      .top-nav-itemAC {
        @include navListCommon;
        background-image: url("~@/assets/images/home/chooseMain.png");
        color: #fff;
      }
    }
  }
  .content {
    margin-top: 65px;
    padding: 0 17px;
    position: relative;
    transition: transform 0.3s ease-in-out;
    transform-origin: 50% 50%;
    .contentList {
      position: relative;
      width: 100%;
      height: 109px;
      // margin-bottom: 45px;
      // background: linear-gradient(90deg, rgba(14, 121, 213, 0.14) 86%, rgba(79, 175, 255, 0) 100%);
    }
    .flowLevel {
      @include flowLevwlCommon;
      top: -10px;
      height: 164px;
      line-height: 164px;
      div {
        padding-left: 80px;
        &::after {
          @include flowLevelAfter;
          top: 51px;
          left: 15px;
          width: 180px;
          height: 60px;
          background-image: url(~@/assets/images/home/dwbg.png);
        }
      }
    }
    .flowLevel-2 {
      @include flowLevwlCommon;
      top: 184px;
      height: 119px;
      line-height: 119px;
      div {
        padding-left: 80px;
        &::after {
          @include flowLevelAfter;
          top: 26px;
          left: 15px;
          width: 180px;
          height: 60px;
          background-image: url(~@/assets/images/home/dzb.png);
        }
      }
    }
    .flowLevel-3 {
      @include flowLevwlCommon;
      top: 328px;
      height: 85px;
      line-height: 85px;
      div {
        padding-left: 80px;
        &::after {
          @include flowLevelAfter;
          top: 10px;
          left: 15px;
          width: 180px;
          height: 60px;
          background-image: url(~@/assets/images/home/lydxz.png);
        }
      }
    }
    .flowLevel-4 {
      @include flowLevwlCommon;
      top: 429px;
      height: 135px;
      line-height: 135px;
      div {
        padding-left: 80px;
        &::after {
          @include flowLevelAfter;
          top: 35px;
          left: 15px;
          width: 180px;
          height: 60px;
          background-image: url(~@/assets/images/home/dyzxh.png);
        }
      }
    }
    .flowLevel-5 {
      @include flowLevwlCommon;
      top: 598px;
      height: 135px;
      line-height: 135px;
      div {
        padding-left: 80px;
        &::after {
          @include flowLevelAfter;
          top: 35px;
          left: 15px;
          width: 180px;
          height: 60px;
          background-image: url(~@/assets/images/home/lxjt.png);
        }
      }
    }
  }
}
</style>
