<template>
  <wrapper
    fill
    margin
    padding
    background
  >
    <template v-if="tenants">
      <el-tabs
        v-model="active"
        class="c-tabs has-bottom-padding"
      >
        <el-tab-pane
          label="设备到部门"
          name="Group"
        />
        <el-tab-pane
          label="设备到人"
          name="User"
        />
      </el-tabs>
      <div class="l-flex__auto l-flex">
        <template v-if="groups">
          <div
            v-if="isSuperAdmin"
            class="c-tree-sidebar u-overflow-y--auto"
          >
            <el-tree
              ref="tenantTree"
              :data="tenants"
              class="c-tree-sidebar__main"
              node-key="path"
              :current-node-key="tenant.path"
              highlight-current
              @node-click="onTenantTreeClick"
            />
          </div>
          <div
            class="c-tree-sidebar u-overflow-y--auto"
            :class="{ large: !isSuperAdmin }"
          >
            <component
              :is="active"
              :tenant="tenant"
              :groups="groups"
              @change="onChange"
            />
          </div>
          <device
            v-if="value"
            :is-group="isGroup"
            :tenant="tenant"
            :value="value"
          />
        </template>
      </div>
    </template>
    <template v-else>
      <div
        v-loading="loading"
        class="l-flex__auto l-flex--row center"
      >
        <template v-if="!loading">
          <warning
            v-if="error"
            @click="getTreeData"
          />
          <div
            v-else
            class="u-bold"
          >
            暂无租户，请先添加租户
          </div>
        </template>
      </div>
    </template>
  </wrapper>
</template>

<script>
import { mapGetters } from 'vuex'
import { getTenantTree } from '@/api/user'
import Group from './Group'
import User from './User'
import Device from './Device'

export default {
  name: 'DeviceAssign',
  components: {
    Group,
    User,
    Device
  },
  data () {
    return {
      active: 'Group',
      tenants: null,
      tenant: null,
      groups: null,
      group: null,
      value: null
    }
  },
  computed: {
    ...mapGetters(['isSuperAdmin']),
    isGroup () {
      return this.active === 'Group'
    }
  },
  created () {
    this.getTreeData()
  },
  methods: {
    getTreeData () {
      this.loading = true
      this.error = false
      getTenantTree().then(
        ({ data }) => {
          if (data.length) {
            this.tenants = data
            this.tenant = data[0]
            this.groups = data[0].subGroups
          }
        },
        () => {
          this.error = true
        }
      ).finally(() => {
        this.loading = false
      })
    },
    onTenantTreeClick (tenant) {
      if (this.tenant.id !== tenant.id) {
        this.tenant = tenant
        this.groups = tenant.subGroups
      }
    },
    onChange (value) {
      this.value = value
    }
  }
}
</script>
