<template>
  <div>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="7" :md="6" :lg="5" :xl="4">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>租户列表</span>
          </div>
          <el-menu
            ref="elMenu"
            default-active="0"
            class="el-menu"
            @select="onSelect"
          >
            <el-menu-item v-for="(menu, index) in tenantList" :key="index" :index="index.toString()">
              <span slot="title">{{ menu.tenantName }}</span>
            </el-menu-item>
          </el-menu>
          <div />
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="17" :md="18" :lg="19" :xl="20">
        <el-card>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="功能权限" name="first">
              <el-tree
                ref="tree"
                :data="menuList"
                :props="defaultProps"
                show-checkbox
                node-key="rowKey"
                @check="handleCheck"
              >
                <span slot-scope="{ node, data }">
                  <el-tag size="mini" :type="tagType(data.type)">{{ tagName(data.type) }}</el-tag>
                  <span> {{ node.label }}</span>
                </span>
              </el-tree>
              <div class="buttons-group" style="margin-top: 20px;text-align: center">
                <el-button
                  v-permission="'AuthMgr_setting'"
                  type="primary"
                  @click="saveRoleAuth"
                >保存</el-button>
              </div>
            </el-tab-pane>
            <el-tab-pane v-if="false" label="数据权限" name="second">配置管理</el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getMenuList } from '@/api/system-management/menu-management'
import { getTenantAuth, setTenantAuth } from '@/api/tenant-management/tenant-auth'
import { getAllTenantList } from '@/api/tenant-management/tenant-management'

export default {
  name: 'Index',
  data() {
    return {
      add: true,
      dialogVisible: false,
      currentId: null,
      activeName: 'first',
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      checkedKeys: [],
      defaultActive: null,
      roleCategoryList: [],
      menuList: [],
      tenantList: []
    }
  },
  created() {
    this.init()
      .then(_ => {})
      .catch(err => console.error(err.message))
  },
  methods: {
    getTenantAuth(id) {
      getTenantAuth({ tenantId: id })
        .then(res => {
          const { data } = res
          this.$nextTick()
            .then(_ => {
              this.$refs.tree.setCheckedKeys(data.rowKeyList.map(v => v.rowKey))
            })
            .catch(err => {
              console.error(err)
            })
          this.currentRole = id
        })
        .catch(err => {
          this.$message.error(err.message)
        })
    },
    handleCheck(data, checked) {
      const { checkedKeys } = checked
      this.checkedKeys = checkedKeys
    },
    handleClick() {},
    async init() {
      const tenantList = await getAllTenantList({ roleType: 1 })
      this.tenantList = tenantList.data
      const { data } = await getMenuList()
      this.menuList = data
      if (this.tenantList.length > 0) {
        this.tableData = await this.getTenantAuth(this.tenantList[0].id)
      }
      return Promise.resolve()
    },
    onSelect(i) {
      this.getTenantAuth(this.tenantList[i].id)
    },
    tagType(data) {
      const typeName = {
        '-1': 'danger',
        '0': '',
        '1': 'success',
        '2': 'warning'
      }
      return typeName[data]
    },
    tagName(data) {
      const tagName = {
        '-1': '系统',
        '0': '菜单',
        '1': '页面',
        '2': '按钮'
      }
      return tagName[data]
    },
    saveRoleAuth() {
      const params = {
        tenantId: this.currentRole,
        rowKeyList: this.checkedKeys
      }
      setTenantAuth(params)
        .then(_ => {
          this.$message.success('操作成功')
        })
        .catch(err => {
          this.$message.error(err.message)
        })
    }
  }
}
</script>

<style scoped lang="scss">
  .el-menu{
    border-right: none
  }
  .box-card{
    >>> .el-card__body{
      min-height: calc(100vh - 150px);
    }
  }

</style>
