<template>
    <div class="screen-org-tree">
      <div class="no-data" v-if="list.length == 0">
        <img
          src="../../../../../../assets/img/modules/visual/noData.png"
          alt=""
          srcset=""
          class="no-data-img"
        />
      </div>
      <div class="level-row" v-for="(level1, index1) in list" :key="index1">
        <div class="level-1-row">
          <div class="level-1-row-item">
            <img class="level-1-row-item-line" src="../../../../../../assets/img/plugins/zuo.png">
            <div class="level-1-row-item-content">
              <div class="level-1-row-item-content-info" @click.stop="onClickNode(level1.id)">
                <img src="../../../../../../assets/img/plugins/dangqi.png" class="level-1-row-item-content-info-icon">
                <div class="level-1-row-item-content-info-text">
                  <div class="level-1-row-item-content-info-text-title">{{level1.name}}</div>
                  <div class="level-1-row-item-content-info-text-leader">书记: {{level1.leaderName}}
                    <img src="../../../../../../assets/img/plugins/shuoming-X.png" class="level-1-row-item-content-info-text-leader-icon" @click.stop="onShowInfoDialog(level1.id, level1.leaderId, $event)">
                  </div>
                </div>
              </div>
              <img src="../../../../../../assets/img/plugins/jiantou-D.png" class="level-1-row-item-content-arrow">
            </div>
            <img class="level-1-row-item-line" src="../../../../../../assets/img/plugins/you.png">
          </div>
        </div>
        <div class="level-2-row">
          <div class="level-2-row-item" v-for="(level2, index2) in level1.children" :key="index2" @click.stop="onClickNode(level2.id)">
            <img class="level-2-row-item-top" src="../../../../../../assets/img/plugins/jiantou-A.png">
            <div class="level-2-row-item-content">
              <img src="../../../../../../assets/img/plugins/danghui.png" class="level-2-row-item-content-icon">
              <div class="level-2-row-item-content-title">{{level2.name}}</div>
              <div class="level-2-row-item-content-leader">书记: {{level2.leaderName}}
                <img src="../../../../../../assets/img/plugins/shuoming-X.png" class="level-2-row-item-content-leader-icon" @click.stop="onShowInfoDialog(level2.id, level2.leaderId, $event)">
              </div>
            </div>
            <img class="level-2-row-item-bottom" src="../../../../../../assets/img/plugins/jiantou-X.png">
            <div class="level-3-item" v-for="(level3, index3) in level2.children" :key="index3" @click.stop="onClickNode(level3.id)">
              <img src="../../../../../../assets/img/plugins/dian.png" class="level-3-item-icon">
              <div class="level-3-item-title">{{level3.name}}</div>
              <div class="level-3-item-leader">{{level3.leaderName}}</div>
              <img class="level-3-item-leader-icon" src="../../../../../../assets/img/plugins/shuoming-X.png" @click.stop="onShowInfoDialog(level3.id, level3.leaderId, $event)">
            </div>
          </div>
        </div>
      </div>
      <!-- 个人信息弹窗 -->
      <transition name="el-fade-in-linear">
        <info-dialog v-if="showInfo"
                      :axisStructId="axisStructId"
                      :leaderId="leaderId"
                      :position="pos" 
                      @close="showInfo = false"></info-dialog>
      </transition>
    </div>
</template>

<script>
import infoDialog from './info-dialog'
export default {
  name: "screen-org-tree",
  components: {
    infoDialog
  },
  props: {
    list: {
      type: Array
    }
  },
  data() {
    return {
      // list: [
      //   {  
      //     id: '0',
      //     name: '兴德路社区党委',
      //     leaderId: '0',
      //     leaderName: '杨磊',
      //     children: [
      //       {
      //         id: '1',
      //         name: '第一党支部',
      //         leaderId: '1',
      //         leaderName: '吴红',
      //         children: [
      //           {
      //             id: '11',
      //             name: '第一党小组第一党小组第一党小组',
      //             leaderId: '11',
      //             leaderName: '吴红',
      //             children: []
      //           },
      //           {
      //             id: '12',
      //             name: '第二党小组',
      //             leaderId: '12',
      //             leaderName: '牟振华',
      //             children: []
      //           },
      //           {
      //             id: '31',
      //             name: '第三党小组',
      //             leaderId: '31',
      //             leaderName: '吴红',
      //             children: []
      //           },
      //           {
      //             id: '42',
      //             name: '第四党小组',
      //             leaderId: '42',
      //             leaderName: '牟振华',
      //             children: []
      //           }
      //         ]
      //       },
      //       {
      //         id: '2',
      //         name: '第二党支部',
      //         leaderId: '2',
      //         leaderName: '吴红',
      //         children: [
      //           {
      //             id: '21',
      //             name: '第一党小组',
      //             leaderId: '21',
      //             leaderName: '吴红',
      //             children: []
      //           },
      //           {
      //             id: '22',
      //             name: '第二党小组',
      //             leaderId: '22',
      //             leaderName: '牟振华',
      //             children: []
      //           },
      //           {
      //             id: '31',
      //             name: '第三党小组',
      //             leaderId: '31',
      //             leaderName: '吴红',
      //             children: []
      //           },
      //           {
      //             id: '42',
      //             name: '第四党小组',
      //             leaderId: '42',
      //             leaderName: '牟振华',
      //             children: []
      //           }
      //         ]
      //       },
      //       {
      //         id: '3',
      //         name: '第三党支部',
      //         leaderId: '3',
      //         leaderName: '吴红',
      //         children: [
      //           {
      //             id: '31',
      //             name: '第一党小组',
      //             leaderId: '31',
      //             leaderName: '吴红',
      //             children: []
      //           },
      //           {
      //             id: '32',
      //             name: '第二党小组',
      //             leaderId: '32',
      //             leaderName: '牟振华',
      //             children: []
      //           }
      //         ]
      //       },
      //       {
      //         id: '4',
      //         name: '第四党支部',
      //         leaderId: '4',
      //         leaderName: '吴红',
      //         children: [
      //           {
      //             id: '41',
      //             name: '第一党小组',
      //             leaderId: '41',
      //             leaderName: '吴红',
      //             children: []
      //           },
      //           {
      //             id: '42',
      //             name: '第二党小组',
      //             leaderId: '42',
      //             leaderName: '牟振华',
      //             children: []
      //           }
      //         ]
      //       },
      //       {
      //         id: '5',
      //         name: '第五党支部',
      //         leaderId: '5',
      //         leaderName: '吴红',
      //         children: [
      //           {
      //             id: '51',
      //             name: '第一党小组',
      //             leaderId: '51',
      //             leaderName: '吴红',
      //             children: []
      //           },
      //           {
      //             id: '52',
      //             name: '第二党小组',
      //             leaderId: '52',
      //             leaderName: '牟振华',
      //             children: []
      //           }
      //         ]
      //       }
      //     ]
      //   }
      // ],
      showInfo: false, // 是否显示个人信息弹窗
      pos: { x: 0, y: 0 }, // 个人信息弹窗位置
      axisStructId: '', // 传给弹窗的组织节点id
      leaderId: '', // 传给弹窗的人员id
    }
  },
  mounted() {

  },
  methods: {
    onShowInfoDialog (axisStructId, leaderId, e) {
      this.axisStructId = axisStructId
      this.leaderId = leaderId
      this.pos.x = e.layerX
      this.pos.y = e.layerY
      this.showInfo = true
    },
    onClickNode (id) {
      console.log(id)
      this.$emit('onClickNode', { id: id })
    }
  },
}
</script>

<style lang="scss" >
.screen-org-tree {
  width: 100%;
  height: 100%;
  .level-row{
    overflow: auto;
  }
  .level-1-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    &-item {
      width: 80%;
      display: flex;
      justify-content: center;
      border-bottom: 1px dashed #2b85ff;
      cursor: pointer;
      &-line {
        width: 178px;
        height: 16px;
        margin-top: 30px;
      }
      &-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0 7px;
        &-info {
          width: 400px;
          height: 80px;
          background: url('../../../../../../assets/img/plugins/dangwei-by.png') no-repeat;
          background-size: 100% 100%;
          display: flex;
          align-items: center;
          &-icon {
            width: 57px;
            height: 41px;
            margin-left: 12px;
          }
          &-text {
            width: calc(100% - 70px);
            height: 100%;
            text-align: center;
            &-title {
              height: 30px;
              font-size: 26px;
              font-weight: bold;
              display: flex;
              align-items: flex-end;
              letter-spacing: 3px;
              margin-left: 7px;
              margin-top: 20px;
              background-image: linear-gradient(to top, #00a2ff, #56f9ff, #ffffff);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            }
            &-leader {
              height: calc(100% - 50px);
              display: flex;
              align-items: center;
              justify-content: center;
              letter-spacing: 2px;
              font-size: 16px;
              &-icon {
                margin-left: 7px;
                width: 14px;
                height: 14px;
                cursor: help;
              }
            }
          }
        }
      }
    }
  }
  .level-2-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-around;
    &-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      &-top {

      }
      &-bottom {

      }
      &-content {
        width: 170px;
        height: 110px;
        background: url('../../../../../../assets/img/plugins/zhibu-by.png') no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        cursor: pointer;
        &-icon {
          margin-top: 10px;
        }
        &-title {
          font-size: 20px;
          font-weight: bold;
          letter-spacing: 1px;
          width: 100%;
          text-align: center;
          overflow: hidden;
          text-overflow: ellipsis;
          word-wrap:break-word;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          display: -webkit-box;
        }
        &-leader {
          display: flex;
          align-items: center;
          &-icon {
            width: 14px;
            height: 14px;
            margin-left: 4px;
            cursor: help;
          }
        }
      }
      .level-3-item {
        width: 170px;
        height: 38px;
        background: url('../../../../../../assets/img/plugins/xiaozu-by.png') no-repeat;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;
        cursor: pointer;
        margin-bottom: 16px;
        &-leader-icon {
          width: 14px;
          height: 14px;
          cursor: help;
        }
      }
    }
  }
  // 暂无数据
  .no-data {
    width: 100%;
    height: calc(100% - 50px);
    display: flex;
    align-items: center;
    justify-content: center;
    &-img {
      width: 249px;
      height: 172px;
    }
  }
}
</style>