<template>
  <ht-user-selector
    v-model="value"
    :validate="validate"
    :name="name"
    :placeholder="placeholder"
    :permission="permission"
    :single="single"
    :config="config"
    :data="data"
    :table-columns="tableColumns"
    :pagination="pagination"
    :demensions="demensions"
    :default-demension="defaultDemension"
    :orgs="orgs"
    :roles="roles"
    :load-org-tree="loadOrgTree"
    :append-to-body="appendToBody"
    @load="handleLoad"
    @valueChange="valueChange"
    @loadDemensions="loadDemensions"
    @changeDemension="changeDemension"
    @loadOrgUser="loadOrgUser"
    @select="select"
    @row-click="rowClick"
    @select-data="selectData"
    select-label="fullname"
    quick-search-props="fullname,account,email"
    ref="htUserSelector"
  />
</template>
<script>
import selector from '@/api/selector.js'
import req from '@/api/sysType.js'

export default {
  name: 'my-role-selector',
  props: {
    validate: [String, Object],
    value: String,
    name: String,
    placeholder: String,
    permission: String,
    single: Boolean,
    config: Object,
    appendToBody: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      data: [],
      demensions: [],
      defaultDemension: '',
      orgs: [],
      roles: [
        { id: '1', name: '管理员' },
        { id: '1', name: '管理员' },
        { id: '1', name: '管理员' },
        { id: '1', name: '管理员' },
        { id: '1', name: '管理员' },
        { id: '1', name: '管理员' },
        { id: '1', name: '管理员' },
        { id: '1', name: '管理员' },
        { id: '1', name: '管理员' },
        { id: '1', name: '管理员' },
        { id: '1', name: '管理员' },
        { id: '1', name: '管理员' },
        { id: '1', name: '管理员' },
        { id: '1', name: '管理员' },
        { id: '1', name: '管理员' },
        { id: '1', name: '管理员' },
        { id: '1', name: '管理员' },
        { id: '1', name: '管理员' },
        { id: '1', name: '管理员' },
        { id: '1', name: '管理员' },
        { id: '1', name: '管理员' },
        { id: '1', name: '管理员' },
        { id: '1', name: '管理员' },
        { id: '1', name: '管理员' },
        { id: '1', name: '管理员' },
        { id: '1', name: '管理员' },
        { id: '1', name: '管理员' },
        { id: '1', name: '管理员' },
        { id: '1', name: '管理员' },
        { id: '1', name: '管理员' },
        { id: '1', name: '管理员' },
        { id: '1', name: '管理员' },
        { id: '1', name: '管理员' },
        { id: '1', name: '管理员' },
        { id: '1', name: '管理员' },
        { id: '1', name: '管理员tesAA' }
      ],
      tableColumns: [
        { prop: 'fullname', label: '名称', width: '120' },
        { prop: 'account', label: '账号', width: '120' },
        { prop: 'email', label: '邮件' }
      ],
      pagination: {
        page: 1,
        pageSize: 50,
        total: 0
      },
      orgLength: 0
    }
  },
  mounted() {},
  methods: {
    loadDemensions() {
      setTimeout(() => {
        this.demensions = [
          { id: 1, demName: '行政维度' },
          { id: 2, demName: '分公司维度' }
        ]
        this.defaultDemension = 1
      }, 1000)
    },
    handleLoad(param, cb) {
      this.$message('输入关键字查询用户')
      selector
        .getUsers(param)
        .then((response) => {
          this.data = response.rows
          this.pagination.page = response.page
          this.pagination.pageSize = response.pageSize
          this.pagination.total = response.total
          cb()
        })
        .catch((err) => {
          cb()
        })
    },
    valueChange(value, data) {
      this.$emit('input', value)
    },
    select(selection, row) {
      console.log(selection, row)
    },
    rowClick(row, column, event) {
      console.log(row)
    },
    selectData(data) {
      console.log(data)
    },
    loadOrgTree(node, resolve) {
      // 组织节点点击事件 异步加载组织
      this.$message('组织节点点击事件 请异步加载组织')
      let _this = this

      req.getSysTypeData({}).then(function(data) {
        // _this.orgs = data;
        var resultData = [{ id: node.id, name: '组织' + node.id }]
        if (_this.orgLength > 2) {
          resultData = []
        }
        _this.orgLength++
        resolve(resultData)
      })
    },
    changeDemension(currentDemension) {
      // 维度改变 重新获取组织
      this.$message('维度改变 请重新获取组织')
    },
    loadOrgUser(org) {
      // 根据组织获取用户
    }
  }
}
</script>
