<template>
  <div
    v-loading="options.loading"
    class="c-tree-sidebar__main"
  >
    <template v-if="!options.loading">
      <template v-if="options.users.length">
        <el-tree
          ref="tree"
          :data="options.users"
          node-key="id"
          highlight-current
          :props="{ label: 'username' }"
          @node-click="onChange"
        />
        <el-button-group
          v-if="hasPages"
          class="has-top-padding"
        >
          <el-button
            class="o-pagination-button"
            type="primary"
            size="mini"
            :disabled="isFirstPage"
            @click="onFirstPage"
          >
            首页
          </el-button>
          <el-button
            class="o-pagination-button"
            type="primary"
            size="mini"
            icon="el-icon-arrow-left"
            :disabled="isFirstPage"
            @click="onPresentPage"
          />
          <el-button
            class="o-pagination-button"
            type="primary"
            size="mini"
            icon="el-icon-arrow-right"
            :disabled="isLastPage"
            @click="onNextPage"
          />
        </el-button-group>
      </template>
      <div
        v-else
        class="has-padding-top"
      >
        <template v-if="!options.loading">
          <warning
            v-if="options.error"
            @click="getUsers"
          />
          <div
            v-else
            class="u-bold u-text-center"
          >
            暂无账号，请先添加账号
          </div>
        </template>
      </div>
    </template>
  </div>
</template>

<script>
import { getUsersByGroup } from '@/api/user'

export default {
  name: 'AssignToUser',
  props: {
    tenant: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      options: null
    }
  },
  computed: {
    isFirstPage () {
      return this.options.params.pageNum === 1
    },
    isLastPage () {
      return !this.options.hasNextPage
    },
    hasPages () {
      return !this.isFirstPage || !this.isLastPage
    }
  },
  watch: {
    tenant () {
      this.init()
    }
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      if (this.options) {
        this.options.used = false
      }
      this.options = {
        loading: true,
        error: false,
        users: [],
        used: true,
        hasNextPage: false,
        params: {
          id: this.tenant.id,
          pageSize: 10,
          pageNum: 1
        }
      }
      this.onChange()
      this.getUsers()
    },
    onFirstPage () {
      this.options.params.pageNum = 1
      this.getUsers()
    },
    onPresentPage () {
      this.options.params.pageNum -= 1
      this.getUsers()
    },
    onNextPage () {
      this.options.params.pageNum += 1
      this.getUsers()
    },
    getUsers () {
      const options = this.options
      options.loading = true
      options.error = false
      getUsersByGroup(options.params).then(
        ({ data, totalCount }) => {
          options.loading = false
          if (data.length && options.used) {
            options.users = data
            options.hasNextPage = totalCount > data.length
            this.$emit('change', data[0].id)
            this.$nextTick(() => {
              this.$refs.tree.setCurrentKey(data[0].id)
            })
          }
        },
        () => {
          options.users = []
          options.loading = false
          options.error = false
        }
      )
    },
    onChange (user) {
      this.$emit('change', user?.id)
    }
  }
}
</script>
