<template>
  <app-container>
    <el-row>
      <!--左半部分-->
      <el-col :span="5">
        <div class="dept-div">
          <el-card class="box-card" shadow="always">
            <div slot="header">
              <span>项目名称</span>
            </div>
            <el-scrollbar ref="deptScroll" class="user-dept-scroll">
              <el-tree
                ref="tree2"
                v-loading="treeLoading"
                :data="deptTree"
                :props="defaultProps"
                :default-expand-all="expandAllNode"
                :expand-on-click-node="expandNodeClick"
                @node-click="handleNodeClick"
              />
            </el-scrollbar>
          </el-card>
        </div>
      </el-col>
      <!--右半部分-->
      <el-col :span="19">
        <div class="headerTeam">
          <span>{{ headerValue }}</span>
        </div>
        <el-table :data="list">
          <el-table-column label="通讯协议" align="center" />
          <el-table-column label="默认坐标系" align="center" />
          <el-table-column label="生成工单" align="center" />
          <el-table-column label="APP推送" align="center" />
          <el-table-column label="NB平台配置" align="center">
            <el-table-column label="平台地址" align="center" />
            <el-table-column label="应用名称" align="center" />
            <el-table-column label="APPID" align="center" />
            <el-table-column label="APPKEY" align="center" />
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="edit(scope.row)">
                编辑
              </el-button>
              <el-button type="text" @click="detail(scope.row)">
                详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <edit-tenant-config ref="editTenantConfig" @watchChild="fetchData" />
  </app-container>
</template>

<script>
import { getDeptTreeList } from '@/api/system/dept'
import { toTreeList } from '@/utils/structure'
import editTenantConfig from '@/views/systemConfig/tenantConfig/components/editTenantConfig'
// import { alarmTenantList, delAlarmTenant } from '@/api/systemConfig/tenantConfig'
export default {
  name: 'TenantConfig',
  components: { editTenantConfig },
  data() {
    return {
      treeLoading: false,
      deptTree: null,
      headerValue: null,
      list: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      expandAllNode: true,
      expandNodeClick: false,
      listQuery: {
        keywords: '',
        beginTime: '',
        endTime: '',
        deptId: '',
        offset: 1,
        limit: 20,
        sort: 'id'
      }
    }
  },
  mounted() {
    this.fetchDeptTree()
    this.fetchData()
  },
  methods: {
    // 获取组织结构树
    fetchDeptTree() {
      this.treeLoading = true
      getDeptTreeList(this.listQuery).then(response => {
        this.deptTree = toTreeList(response.data, '0', true)
        this.treeLoading = false
      })
    },
    // 点击左侧组织结构项触发
    handleNodeClick(val) {
      console.log(val)
      this.headerValue = val.name
      this.listQuery.deptId = val.id
    },
    // 获取用户数据
    fetchData() {
    },
    // 修改
    edit(row) {
      this.$refs.editTenantConfig.initDialog('update', row)
    },
    // 详情
    detail(row) {
      this.$refs.editTenantConfig.initDialog('detail', row)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .dept-div{
    padding-right: 12px;
    .box-card{
      width:100%;
      .user-dept-scroll{
        width:100%;
        height: calc(100vh - 260px);
      }
    }
  }
  .headerTeam{
    font-size: 20px;
  }
</style>
<style>
  .dept-div .el-scrollbar__wrap{
    overflow-x: auto;
    background-color: #fff;
    padding: 0px;
  }
</style>