<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
    <div>
        <vxe-toolbar>
            <template v-slot:buttons>
                <vxe-button @click="$refs.xTree.setAllTreeExpansion(true)">展开所有</vxe-button>
                <vxe-button @click="$refs.xTree.clearTreeExpand()">关闭所有</vxe-button>
            </template>
        </vxe-toolbar>
        <vxe-table
                border
                resizable
                row-id="id"
                :row-key="true"
                show-overflow="tooltip"
                highlight-hover-row
                align="center"
                header-align="center"
                ref="xTree"
                :loading="tableLoading"
                :tree-config="{children: 'children',expandAll: true,line: true }"
                :data="dataList">
            <vxe-table-column field="name" title="区域名称" fixed="left" tree-node></vxe-table-column>
            <vxe-table-column field="code" title="区域编码"></vxe-table-column>
            <vxe-table-column field="type" title="区域类型">
                <template v-slot="{ row }">
                    <div v-if="row.type==1" type="1">国家</div>
                    <div v-if="row.type==2" type="2">省份丶直辖市</div>
                    <div v-if="row.type==3" type="3">地市</div>
                    <div v-if="row.type==4" type="4">区县</div>
                </template>
            </vxe-table-column>
            <vxe-table-column field="remarks" title="备注"></vxe-table-column>
            <vxe-table-column field="date" min-width="20%" title="操作">
                <template v-slot="{ row }">
                    <Button size="small" class="actionBtn" type="primary" @click="addArea(row)">添加下级
                    </Button>
                    <Button size="small" class="actionBtn" type="info" @click="updateArea(row)">修改
                    </Button>
                    <Button size="small" class="actionBtn" type="error" @click="deleteArea(row)"
                            :loading="deleteLoading">删除
                    </Button>
                </template>
            </vxe-table-column>
        </vxe-table>
    </div>
</template>
<script>
import { getAreaList, delArea } from '../../../../../api/system/sys-area-list'
export default {
  name: 'tableList',
  props: {},
  data () {
    return {
      dataList: [],
      TreeList: [],
      treeID: '',
      treeIDName: '',
      AreaList: [],
      deleteLoading: false,
      tableLoading: false
    }
  },
  methods: {
    init () {
      this.tableLoading = true
      getAreaList().then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.tableLoading = false
          data.data.forEach(item => {
            item.title = item.name
          })
          this.dataList = this.$common.toTree(data.data, 'children', 'id', 'parent_id')
          this.AreaList = data.data
          /* this.treeID = this.data1[0].id
                                  this.treeIDName = this.data1[0].name */
        } else {
          this.$Message.error(ret.data.errmsg)
          this.tableLoading = false
        }
      })
    },
    addArea (data) {
      this.$emit('addOption', data)
    },
    updateArea (data) {
      this.$emit('updateOption', data)
    },
    deleteArea (row) {
      this.deleteLoading = true
      delArea(row).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Message.success('删除成功')
          this.deleteLoading = false
          this.init()
        } else {
          this.$Message.error('删除失败\n' + ret.data.errmsg)
        }
      })
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>
    .actionBtn {
        margin-right: 5px;
        margin-bottom: 5px;
    }
</style>
