<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">
        <!--筛选条件-->
        <search-area size="small" @search="search">
          <search-item>
            <el-input
              v-model="listQuery.tenantName"
              size="small"
              clearable
              placeholder="请输入项目名称"
            />
          </search-item>
        </search-area>
        <el-row class="table-title">
          <el-col :span="6">
            <div class="title-header">
              <i class="el-icon-menu" />{{ headerValue }}
            </div>
          </el-col>
          <el-col :span="12" :offset="6" class="edit_btns">
            <el-button
              class="edit_btn"
              size="small"
              @click="add"
            >
              新增
            </el-button>
          </el-col>
        </el-row>
        <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="维度" 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>
              <el-button type="text" @click="del(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: {
        tenantName: '',
        keywords: '',
        beginTime: '',
        endTime: '',
        deptId: '',
        offset: 1,
        limit: 20,
        sort: 'id'
      }
    }
  },
  mounted() {
    this.fetchDeptTree()
    this.fetchData()
  },
  methods: {
    search() {},
    // 获取组织结构树
    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() {
    },
    // 新增
    add() {
      this.$refs.editTenantConfig.initDialog('create')
    },
    // 修改
    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);
      }
    }
  }
  $tableTitleHeight:46px;
  .table{
    margin-bottom: 20px;
  }
  .pagination-container{
    margin-bottom: 50px;
  }
  .table-title{
    background-color:rgba(243, 243, 243, 1);
    height: $tableTitleHeight;
    .title-header{
      line-height:$tableTitleHeight;
      color: #606266;
      font-size: 15px;
      i{
        margin-left: 5px;
        margin-right: 5px;
      }
    }
  }
  .edit_btns{
    .edit_btn{
      float:right;
      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
    }
  }
</style>
<style>
  .dept-div .el-scrollbar__wrap{
    overflow-x: auto;
    background-color: #fff;
    padding: 0px;
  }
</style>