<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
    <div>
        <vxe-toolbar :data="tableData" :custom="{trigger: 'hover', immediate: true, isFooter: false, checkMethod: checkColumnMethod}">
            <template v-slot:buttons>
                <vxe-button @click="$refs.xTree.setAllTreeExpansion(true)">展开所有</vxe-button>
                <vxe-button @click="$refs.xTree.clearTreeExpand()">关闭所有</vxe-button>
            </template>
            <template v-slot:tools>
                <Input :search="true" v-model="filterName" placeholder="请输入机构名称" @on-search="handleSearch"/>
            </template>
        </vxe-toolbar>
        <vxe-table
                resizable
                border
                ref="xTree"
                row-id="id"
                :row-key="true"
                :loading="tableLoading"
                show-overflow="tooltip"
                highlight-hover-row
                align="center"
                header-align="center"
                :data.sync="tableData"
                :customs.sync="columns"
                :tree-config="{children: 'children', expandAll: false, line: true}">
            <!--<vxe-table-column type="seq" width="200" title="序号" tree-node></vxe-table-column>-->
            <vxe-table-column header-align="center" align="left" width="25%" field="name" title="机构名称" tree-node>
                <template v-slot="{ row }">
                    <a @click="update(row)">{{ row.name }}</a>
                </template>
            </vxe-table-column>
            <!--<vxe-table-column field="balance_price" title="预存余额" :visible="false" formatter="commafy"></vxe-table-column>-->
            <vxe-table-column field="area_name" title="归属区域"></vxe-table-column>
            <vxe-table-column field="code" title="机构编码"></vxe-table-column>
            <vxe-table-column field="type_c" title="类型"></vxe-table-column>
            <vxe-table-column min-width="20%" title="操作">
                <template v-slot="{ row }">
                    <Button size="small" class="actionBtn" type="primary" @click="add(row)">添加下级</Button>
                    <Button size="small" class="actionBtn" type="info" @click="update(row)">修改</Button>
                    <Button v-has="'SYS_office_shanchu'" size="small" class="actionBtn" type="error" @click="remove(row.id)">删除</Button>
                </template>
            </vxe-table-column>
        </vxe-table>
    </div>
</template>

<script>
import { getCompanyList, deleteOffice } from '../../../../../api/system/system'

export default {
  name: 'companyList',
  props: {},
  data () {
    return {
      originData: [],
      tableData: [],
      columns: [],
      tableLoading: false,
      filterName: ''
    }
  },
  mounted () {
    this.findList()
  },
  methods: {
    checkColumnMethod ({ column }) {
      if (column.property === 'name') {
        return false
      }
      return true
    },
    findList () {
      this.tableLoading = true
      getCompanyList().then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.tableLoading = false
          this.originData = this.$common.xeUtils.clone(this.$common.toTree(data.data, 'children', 'id', 'parent_id'), true)
          this.handleSearch(data.data)
        } else {
          this.error(data)
          this.tableLoading = false
        }
      })
    },
    handleSearch (data) {
      // 搜索
      this.tableLoading = true
      let filterName = this.$common.xeUtils.toString(this.filterName).trim()
      if (filterName) {
        let options = { children: 'children' }
        let searchProps = ['name']
        this.tableData = this.$common.xeUtils.searchTree(this.originData, item => searchProps.some(key => this.$common.xeUtils.toString(item[key]).indexOf(filterName) > -1), options)
        this.tableLoading = false
        // 搜索之后默认展开所有子节点
        this.$nextTick(() => {
          this.$refs.xTree.setAllTreeExpansion(true)
        })
      } else {
        this.tableData = this.originData
        this.tableLoading = false
      }
    },
    add (data) {
      this.$emit('addOption', data)
    },
    update (data) {
      this.$emit('updateOption', data)
    },
    remove (data) {
      this.$Modal.confirm({
        title: '确认删除此机构么？',
        content: '此操作会删除该机构下全部用户',
        loading: true,
        onOk: () => {
          this.deleteOffice(data)
        }
      })
    },
    deleteOffice (val) {
      deleteOffice({ id: val }).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.$Modal.remove()
          this.findList()
          this.success()
        } else {
          this.$Modal.remove()
          this.error(data)
        }
      })
    },
    success () {
      this.$Message.success('操作成功')
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    }
  },
  watch: {}
}
</script>

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