<template>
  <div class="griddv">
    <div class="left">
      <div class="griddv-title">
        <h2>网格列表</h2>
      </div>
      <div class="griddv-tree">
        <el-tree
          :data="treeList"
          :props="defaultProps"
          @node-click="handleNodeClick"
          node-key="id"
          ref="tree"
          default-expand-all
          highlight-current>
        </el-tree>
      </div>
    </div>
    <div class="middle">

    </div>
    <div class="right" v-if="false">

    </div>
  </div>
</template>

<script>
  export default {
    name: 'AppGridDV',

    label: '网格数据大屏',

    props: {
      instance: Function,
      dict: Object,
    },

    data () {
      return {
        treeList: [],
        defaultProps: {
          children: 'girdList',
          label: 'girdName',
        }
      }
    },

    created () {
      this.getTreeList()
    },

    mounted () {

    },

    methods: {
      handleNodeClick (e) {
        console.log(e)
      },

      getTreeList () {
        this.instance.post('/app/appgirdinfo/listAll').then((res) => {
          if (res.code == 0) {
            this.treeList = [...res.data]
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .griddv {
    display: flex;
    align-items: center;
    height: 100%;

    * {
      box-sizing: border-box;
    }

    .griddv-title {
      display: flex;
      width: 320px;
      height: 62px;
      background-image: url(../assets/grid/title-bg.png);
      background-size: 100% 100%;

      h2 {
        width: 100%;
        height: 50px;
        line-height: 50px;
        padding-left: 24px;
        font-weight: 600;
        font-size: 20px;
        letter-spacing: 1px;
        color: #fff;
      }
    }

    & > div {
      height: 100%;
    }

    .right {
      width: 440px;
    }

    .middle {
      flex: 1;
      margin: 0 20px;
      background: rgba(7, 11, 35, 0.4);
      border: 1px solid #2D50B5;
    }

    .left {
      width: 320px;
      background: rgba(7, 11, 35, 0.4);
      border: 1px solid #2D50B5;

      .griddv-tree {
        height:  calc(100% - 62px);
        overflow-y: auto;
        padding: 0 8px 8px 8px;
      }

      ::v-deep .el-tree {
        background: transparent;

        .el-tree-node__expand-icon {
          color: #eaeff9;
        }

        .el-tree-node__expand-icon.is-leaf {
          color: transparent;
        }

        .el-tree-node__content {
          height: 32px;
          color: #eaeff9;
          font-size: 14px;
          user-select: none;
          font-weight: normal!important;
        }

        .is-current > .el-tree-node__content, .el-tree-node__content:hover {
          background: linear-gradient(270deg, #4895D9 0%, #2D52CA 100%);
        }
      }
    }
  }
</style>