<template>
  <div class="layout-no-cols right-list-toolbar">
    <el-toolbar>
      <el-button @click="addClickHandler" priv="Member.Branch.Add">
        <i class="fa fa-plus"></i>新建      </el-button>
    </el-toolbar>
    <div v-loading="loading">
      <tree-table :data="dataSource" :expanded-level="9" row-key="branchCode">
        <tree-table-column label="名称">
          <template slot-scope="scope">
            <el-button type="text" class="table-title-button" :title="scope.row.name" priv="Member.Branch.Edit" @click.stop="editClickHandler(scope.row)">{{scope.row.name}}
            </el-button>
          </template>
        </tree-table-column>
        <el-table-column prop="memberCount" label="会员数量">
        </el-table-column>
        <el-table-column prop="branchCode" label="编码">
        </el-table-column>
        <el-table-column prop="managerName" label="机构主管">
        </el-table-column>
        <el-table-column prop="phone" label="电话">
        </el-table-column>
        <el-table-column prop="fax" label="传真">
        </el-table-column>
        <el-table-column label="操作" align="right">
          <template slot-scope="scope">
            <el-button @click.stop="editClickHandler(scope.row)" priv="Member.Branch.Edit" type="text" title="编辑" class="table-operate-icon">
              <i class="fa fa-edit f16"></i>
            </el-button>
            <el-button @click.stop="delClickHandler(scope.row)" priv="Member.Branch.Delete" type="text" title="删除" class="table-operate-icon">
              <i class="fa fa-remove f16"></i>
            </el-button>
          </template>
        </el-table-column>
      </tree-table>
    </div>
  </div>
</template>
<script>
import util from '@src/common/util.js'
import TreeTable from '@src/components/treeTable/TreeTable.vue'
import TreeTableColumn from '@src/components/treeTable/TreeTableColumn.vue'
export default {
  components: {
    'tree-table': TreeTable,
    'tree-table-column': TreeTableColumn
  },
  data() {
    return {
      loading: false,
      dataSource: [] //  机构列表数据
    }
  },
  created() {
    this.loadBranchData()
  },
  methods: {
    // 加载机构数据
    async loadBranchData() {
      this.loading = true
      let res = await axios.get('/ui/memberbranch')
      this.loading = false
      this.dataSource = res.data.data
    },
    addClickHandler() {
      this.$router.push({path: '/member/branch/new'})
    },
    editClickHandler(row) {
      if (!row || !row.branchInnerCode) {
        return
      }
      this.$router.push({path: `/member/branch/${row.branchInnerCode}`, query: {parentId: row.parentInnerCode}})
    },
    async delClickHandler(data) {
      try {
        await this.$confirm('确认删除？', '系统提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
      } catch (e) {
        return
      }
      try {
        let res = await axios.delete(`/ui/memberbranch/${data.branchInnerCode}`)
        util.showMessage(res)
        if (res.data.status === 1) {
          this.loadBranchData()
        }
      } catch (e) {
        // util.showErrorNotification(e)

      }
    }
  }
}
</script>
<style scoped>
  .wrap{
    width: 100%;
  }
</style>
