<template>
  <div class="home" style="height: 100%; width: 100%;">
    <div class = "left-content">
        <!-- <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" style="font-size: 20px"></el-tree> -->
        <flexableTree :defaultdata="data" :defaultProps="defaultProps" :nodeClick="handleNodeClick"></flexableTree>
    </div>
    <div class="content">
      <div class="head">
      <div class="head-message">
        {{ message }}
      </div>
    </div>
    </div>
  </div>
</template>

<script>
import flexableTree from './components/flexable-tree.vue'

export default {
  components: {
    flexableTree
  },
  data () {
    return {
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      data: [],
      dataList: [],
      markerPointList: [],
      point: {
        lat: 38.81908568,
        lng: 130.06145253
      },
      loading: true,
      BMap: null,
      map: null,
      info: {}
    }
  },
  activated () {
    this.getDataList()
    this.getInfo()
  },
  methods: {
    getInfo () {
      this.$http({
        url: this.$http.adornUrl('/home/info'),
        method: 'get'

      }).then(({ data }) => {
        if (data && data.successful) {
          var content = data.resultValue
          this.info.petCount = content.petCount
          this.info.petConetntSize = content.petConetntSize
        }
      })
    },
    getDataList () {
      this.$http({
        url: this.$http.adornUrl('/pet/listAll'),
        method: 'get'

      }).then(({ data }) => {
        if (data && data.successful) {
          this.data = []
          var content = data.resultValue
          this.dataList = content
          this.markerPointList = content
          var element = {
            id: '0',
            name: '全部',
            children: content
          }
          this.data.push(element)
        } else {
          this.dataList = []
        }
        this.dataListLoading = false
      })
    },
    handleNodeClick (node) {
      if (node.id === '0') {
        this.markerPointList = [ ]
        for (var data in this.dataList) {
          this.markerPointList.push({'lng': data.lng, 'lat': data.lat})
        }
      } else {
        this.markerPointList.push({'lng': node.lng, 'lat': node.lat})
        this.point = {'lng': node.lng, 'lat': node.lat}
      }
    },
    show () {

    }
  }

}
</script>

<style lang="scss">
  .home {
    display: flex;
    flex-direction: row;
  }
  .left-content{
      float: left;
      width: 30%;
      padding-left: 20px;
      padding-right: 20px;
    }
  .head {
    height: 20%;
    width: 100%;
    display: block;
    .head-message {
      display: block;
      height: 20px;
    }
    .head-content {
      display: flex;
      flex-direction: row;
      justify-content: space-evenly;
      padding: auto;
      .info-content {
        width: 50%;
        height: 120px;
        margin: 10px;
        border: 1px solid;
        border-radius: 10px;
        border-color: #13C2C2;
        cursor: pointer;
        font-size: 12px;
        position: relative;
        overflow: hidden;
        color: #666;
        background: #fff;
        &:hover {
          box-shadow: 1px 1px  8px #13C2C2;
        }
      }
      .img-head{
        float: left;
        margin: 14px 0 0 14px;
        padding: 16px;
        -webkit-transition: all .38s ease-out;
        transition: all .38s ease-out;
        border-radius: 6px;
        color: #40c9c6;
      }
      .index{
        float: right;
        font-weight: 700;
        margin: 26px;
        margin-left: 0;
      }
    }
  }
  .svg-icon[data-v-f9f7fefc] {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    float: left;
    font-size: 48px;
}
  .content {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;

    .right-content {
      float: right;
      display: block;
      width: 100%;
      height: 685px;
    }
  }
  .map{
    width: 100%;
    height: 100%;
  }
  .card-panel-text{
    line-height: 18px;
    color: rgba(0,0,0,.45);
    font-size: 16px;
    margin-bottom: 12px;
  }
  .card-panel-num{
    font-size: 20px;
  }
  .el-tree-node__content{
    height: 30px;
  }
  .el-tree-node__expand-icon{
    font-size: 20px;
  }
  .el-tree-node__label{
    font-size: 20px;
  }

</style>
