<template>
<div class="treeClass">
  <vxe-table
      border
      resizable
      ref="mytree"
      show-overflow="tooltip"
      highlight-current-row
      row-id="id"
      header-align="center"
      align="left"
      :tree-config="{lazy: true,children: 'children',expandRowKeys: defaultExpandKeys,line: true , hasChild: 'hasChild', loadMethod: loadChildrenMethod}"
      :data="datalist">
    <vxe-table-column field="name" width="100%" title="区域" tree-node>
      <template v-slot="{ row }">
        <div @click="cellClickEvent(row)">
          <Tag v-if="row.grade==='3'" color="primary">市</Tag>
          <Tag v-if="row.grade==='4'" color="primary">区</Tag>
          <Tag v-if="row.grade==='5'" color="primary">街道</Tag>
          <Tag v-if="row.grade==='6'" color="primary">社区</Tag>
          <Tag v-if="row.grade==='7'" color="primary">网格</Tag>
          <Tag v-if="row.grade==='8'" color="primary">楼</Tag>
          <Tag v-if="row.grade==='9'" color="primary">单元</Tag>
          {{row.name}}
        </div>
      </template>
    </vxe-table-column>
  </vxe-table>
</div>
</template>

<script>
import { findOfficeChildrenList, newGetCompanyInfo } from '@/api/contradiction.js'

export default {
  props: ['maxLevel'],
  name: 'treeInfoTwo',
  data () {
    return {
      severUserInfo: {},
      datalist: [],
      defaultExpandKeys: ['220000000000'],
      activeRow: {}
    }
  },
  methods: {
    updateTree () {
      this.$refs.mytree.reloadTreeChilds(this.activeRow)
    },
    loadChildrenMethod ({ row }) {
      return new Promise((resolve, reject) => {
        if (row.grade >= this.maxLevel) {
          reject(new Error('Error message'))
        }
        findOfficeChildrenList({
          grade: row.grade,
          id: row.id
        }).then(ret => {
          if (ret.data.errcode === 0) {
            resolve(ret.data.data)
          } else {
            this.$Notice.error({ title: '获取树形结构失败', desc: ret.data.errmsg })
            reject(ret.data.errmsg)
          }
        })
      })
    },
    newGetCompanyInfo () {
      let data = {
        id: this.severUserInfo.company_id
      }
      newGetCompanyInfo(data).then(ret => {
        if (ret.data.errcode === 0) {
          let result = ret.data.data
          result.children = []
          this.datalist.push(result)
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    cellClickEvent (e) {
      this.activeRow = e
      this.$emit('callBackTree', e)
    }
  },
  mounted () {
    this.severUserInfo = this.$store.state.user.severUserInfo
    this.newGetCompanyInfo()
  }
}
</script>

<style scoped>
.treeClass{
  /*height: 500px;*/
  overflow-y: auto;
  /*overflow-x: hidden;*/
}
/*.treeClass >>> .vxe-table .vxe-tree-cell{*/
/*  font-size: 8px;*/
/*  padding-left:0px*/
/*}*/
/*.treeClass>>>.vxe-table .vxe-body--row{*/
/*  background: #235CA7;*/
/*}*/
/*.treeClass>>>.vxe-header--row{*/
/*  background: #235CA7;*/
/*}*/
/*.vxe-table{*/
/*  color: white;*/
/*}*/
.ivu-card-body{
  padding: 0px;
}
</style>
