<template>
  <div class="modal" v-show="dangyuanCommittee">
    <section>
      <div class="dialog_header">
        <div class="close-icon" @click="closeDialog">
          <img src="@/assets/images/common/dialog-colse.png" alt="" />
        </div>
        <div class="title-container">
          <div class="title">{{ dialogTitle }}</div>
        </div>
      </div>
      <div class="dialog_body">
        <div class="content">
          <div class="main">
            <div class="wrap">
              <div class="content">
                公司信息
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
export default {
  name: '',
  data () {
    return {
      dialogTitle: '党员分析',
      loading: false,
      levelArr: [],
      nowVal: 100,
      nodeConfig: {},
      treeHeight: 300
    }
  },
  computed: {
    ...mapGetters(['dangyuanCommittee'])
  },
  components: {},
  watch: {
    '$store.state.chooseArea.chooseName' (n, v) {
      if (n.orgId) {
        // this.levelArr = [];
        // this.nodeConfig = {};
        // this.getTreeData();
      }
    }
  },
  mounted () {
    // const orgId = this.$store.state.chooseArea.chooseName.orgId;
    // if (orgId) {
    //   this.getTreeData();
    // }
  },
  created () {},
  methods: {
    ...mapActions({
      showGlobalDialog: 'showGlobalDialog'
    }),
    closeDialog () {
      this.showGlobalDialog('')
    }
  }
}
</script>

<style lang="scss" scoped>
.modal {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 150;

  section {
    @include flex(column);
    background: url("~@/assets/images/common/dialog-bg.png") no-repeat !important;
    background-size: 100% 100% !important;
    width: 1354px;
    height: 843px;
    overflow: hidden;
    padding-bottom: 16px;
    box-sizing: border-box;

    .dialog_header {
      position: relative;
      margin-bottom: 40px;

      .close-icon {
        width: 18px;
        height: 18px;
        position: absolute;
        top: 10px;
        right: 16px;
        cursor: pointer;
      }

      .title-container {
        align-items: center;
        background: url("~@/assets/images/common/dialog-header.png") no-repeat;
        background-size: 100% 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 60px;
        font-size: 26px;

        .title {
          font-family: zaozigongfang;
          letter-spacing: 2px;
          line-height: 50px;
          background-size: 100% 100%;
          display: flex;
          justify-content: center;
          height: 60px;
          font-size: 26px;
          color: #fff;
        }
      }
    }

    .dialog_body {
      position: relative;

      > .content {
        box-sizing: border-box;
        color: #fff;
        padding: 0px 24px 0 27px;

        .main {
          height: 716px;
          overflow-y: hidden;
          box-sizing: border-box;
          overflow-y: scroll;

          &::-webkit-scrollbar {
            width: 3px;
          }

          &::-webkit-scrollbar-track {
            border-radius: 10px;
            background: rgba(12, 129, 254, 0.24);
          }

          &::-webkit-scrollbar-thumb {
            border-radius: 10px;
            background: linear-gradient(270deg, #0063fe, #0095ff);
          }

          .header {
            width: 100%;
            height: 30px;
            text-align: left;
            background: linear-gradient(
              90deg,
              rgb(26, 109, 224) 0%,
              rgba(13, 113, 248, 0) 50%
            );
            display: flex;
            justify-content: flex-start;
            align-items: center;
          }

          .flex {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            .item {
              display: flex;
              width: 647px;
              padding: 16px 24px 16px 16px;
              box-sizing: border-box;
              background: #1657b8;
              border-radius: 2px;
              margin-bottom: 10px;

              img {
                width: 186px;
                height: 120px;
              }

              p {
                display: -webkit-box;
                overflow: hidden;
                -webkit-line-clamp: 4;
                -webkit-box-orient: vertical;
                text-overflow: ellipsis;
                margin-bottom: 0;
              }

              > .content {
                flex: 1;
                @include flex(column);
                padding-left: 17px;
                box-sizing: border-box;

                & > :nth-child(1) {
                  display: flex;
                  justify-content: space-between;

                  & > :nth-child(2) {
                    color: #00d4f3;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

.top-24 {
  margin-top: 24px;
}

.noImg {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #7a84a9;
  width: 186px;
  height: 110px;
}
@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%;
}
.wrap {
  .content {
    margin-top: 0px;
    padding: 0 17px;
    position: relative;
    transition: transform 0.3s ease-in-out;
    transform-origin: 50% 50%;

    .contentList {
      position: relative;
      width: 100%;
      height: 109px;
    }

    .lastLevel {
      height: 180px !important;
      // margin-top: -45px !important;
    }

    .flowLevel-1 {
      @include flowLevwlCommon;
      top: -10px;
      height: 164px;
      line-height: 164px;

      div {
        padding-left: 80px;

        &::after {
          @include flowLevelAfter;
          top: 51px;
          left: 15px;
          width: 180px;
          height: 60px;
          opacity: 0.6;
          background-image: url(~@/assets/images/icon/zdw.png);
        }
      }
    }

    .flowLevel-2,
    .flowLevel-3,
    .flowLevel-4,
    .flowLevel-5,
    .flowLevel-6,
    .flowLevel-7 {
      @include flowLevwlCommon;
      height: 180px;
    }

    .flowLevel-2 {
      top: 181px;
      line-height: 180px;

      div {
        padding-left: 80px;

        &::after {
          @include flowLevelAfter;
          top: 60px;
          left: 15px;
          width: 180px;
          height: 60px;
          opacity: 0.6;
          background-image: url(~@/assets/images/icon/cdw.png);
        }
      }
    }

    .flowLevel-3 {
      top: 379px;
      line-height: 180px;

      div {
        padding-left: 80px;

        &::after {
          @include flowLevelAfter;
          top: 60px;
          left: 15px;
          width: 180px;
          height: 60px;
          opacity: 0.6;
          background-image: url(~@/assets/images/icon/dzz.png);
        }
      }
    }

    .flowLevel-4 {
      top: 578px;
      line-height: 180px;

      div {
        padding-left: 80px;

        &::after {
          @include flowLevelAfter;
          top: 60px;
          left: 15px;
          width: 180px;
          height: 60px;
          background-image: url(~@/assets/images/icon/dxz.png);
          opacity: 0.6;
        }
      }
    }

    .flowLevel-5 {
      top: 776px;
      line-height: 180px;

      div {
        padding-left: 80px;

        &::after {
          @include flowLevelAfter;
          top: 60px;
          left: 15px;
          width: 180px;
          height: 60px;
          background-image: url(~@/assets/images/icon/dyzxhT.png);
          opacity: 0.6;
        }
      }
    }

    .flowLevel-6 {
      top: 974px;
      line-height: 180px;

      div {
        padding-left: 80px;

        &::after {
          @include flowLevelAfter;
          top: 60px;
          left: 15px;
          width: 180px;
          height: 60px;
          // background-image: url(~@/assets/images/icon/lxjt.png);
        }
      }
    }

    .flowLevel-7 {
      top: 1171px;
      line-height: 180px;

      div {
        padding-left: 80px;

        &::after {
          @include flowLevelAfter;
          top: 60px;
          left: 15px;
          width: 180px;
          height: 60px;
          //   background-image: url(~@/assets/images/icon/lxjt.png);
        }
      }
    }

    .otherTop {
      &::after {
        top: 60px !important;
      }
    }

    .flowLevel-8 {
      @include flowLevwlCommon;
      top: 1371px;
      height: 180px;
      line-height: 180px;

      div {
        padding-left: 80px;

        &::after {
          @include flowLevelAfter;
          top: 60px;
          left: 15px;
          width: 180px;
          height: 60px;
          //   background-image: url(~@/assets/images/icon/lxjt.png);
        }
      }
    }

    .flowLevel-9 {
      @include flowLevwlCommon;
      top: 1179px;
      height: 180px;
      line-height: 180px;

      div {
        padding-left: 80px;
        &::after {
          @include flowLevelAfter;
          top: 60px;
          left: 15px;
          width: 180px;
          height: 60px;
          //   background-image: url(~@/assets/images/icon/dyzxh.png);
        }
      }
    }

    .flowLevel-10 {
      @include flowLevwlCommon;
      top: 1338px;
      height: 180px;
      line-height: 180px;

      div {
        padding-left: 80px;

        &::after {
          @include flowLevelAfter;
          top: 60px;
          left: 15px;
          width: 180px;
          height: 60px;
          //   background-image: url(~@/assets/images/icon/lxjt.png);
        }
      }
    }
  }
}
</style>
