<template>
  <!-- 人员选择弹层 -->
  <SuperTableSelectorDialog
    v-on="$listeners"
    v-bind="$attrs"
    title="人员选择"
    select-title-name="已选人员"
    :treeTabList="['行政维度']"
    :isShow.sync="isShowDialog"
    hintLanguage="提示：请在列表中选择人员后，点击确认。"
    :search-option="optionList"
    :treeData="orgData"
    :tree-item="treeItem"
    selectLabel="fullname"
    :defaultTreeExpandLevel="1"
    :table-data="tableData"
    :table-options="tableOptions"
    :table-loading="tableLoading"
    :tableParams="params"
    @open="open"
    @closed="closed"
    @tableRefresh="getTableData"
    @treeChange="treeChange"
    ref="superTableSelectorDialog"
  />
</template>

<script>
import {getOrgUserQuery, orgTree} from '@/api/systemInterface'
import {refineRequestBody, setQueryValue} from '@/utils/requestWrappers'
import SuperTableSelectorDialog from '@/components/SuperTableSelectorDialog/index.vue'
import {findNodeAndChildrenIds} from '@/utils/treeUtils'

export default {
  name: 'UserSelectorDialog',
  components: {SuperTableSelectorDialog},
  props: {
    isShow: {
      default: false,
      type: Boolean,
    },
  },
  data() {
    return {
      orgData: [], // 组织树
      optionList: [
        {title: '账号', prop: 'account', type: 'input', default: true},
        {title: '名称', prop: 'fullname', type: 'input'},
        {title: '电话', prop: 'mobile', type: 'input'},
      ],
      tableOptions: [
        {label: '名称', minWidth: '100', prop: 'fullname'},
        {label: '账号', minWidth: '100', prop: 'account'},
        {label: '电话', minWidth: '80', prop: 'mobile'},
        {label: '性别', minWidth: '60', prop: 'sex'},
      ],
      params: {
        pageBean: {pageSize: 20, page: 1, total: 0},
        querys: [
          {group: 'orgTree', operation: 'IN', property: 'ORG_ID_', value: ''},
          {
            group: 'quick',
            operation: 'LIKE',
            property: 'account',
            relation: 'OR',
            value: '',
          },
          {
            group: 'quick',
            operation: 'LIKE',
            property: 'fullname',
            relation: 'OR',
            value: '',
          },
          {
            group: 'quick',
            operation: 'LIKE',
            property: 'mobile',
            relation: 'OR',
            value: '',
          },
        ],
        sorter: [{direction: 'DESC', property: 'updateTime'}],
      },
      tableData: [], // 岗位数据
      treeItem: {}, // 树选中
      tableLoading: false, // 表格loading
    }
  },
  computed: {
    isShowDialog: {
      get() {
        return this.isShow
      },
      set(val) {
        this.$emit('update:isShow', val)
      },
    },
  },
  created() {
    this.getOrgTreeData()
    this.open()
  },
  methods: {
    // 打开弹层时触发
    open() {
      this.getTableData()
    },

    // 关闭弹层触发
    closed() {
      const {orgData} = this
      // 重置data中的数据
      Object.assign(this.$data, this.$options.data.call(this), {orgData})
      this.treeItem = this.orgData[0] || {}
      // setQueryValue(
      //   this.params,
      //   'ORG_ID_',
      //   findNodeAndChildrenIds(this.orgData, this.treeItem?.id || '')
      // )
      setQueryValue(this.params, 'ORG_ID_', this.treeItem?.id)
    },

    // 获取公司树
    async getOrgTreeData() {
      this.orgData = await orgTree()
      this.treeItem = this.orgData[0] || {}
      // setQueryValue(
      //   this.params,
      //   'ORG_ID_',
      //   findNodeAndChildrenIds(this.orgData, this.treeItem?.id || '')
      // )
      setQueryValue(this.params, 'ORG_ID_', this.treeItem?.id)
    },

    //获取岗位列表数据
    async getTableData() {
      this.tableData = []
      this.tableLoading = true
      const {total = 0, rows = []} = await getOrgUserQuery(
        refineRequestBody(this.params)
      )
      this.params.pageBean.total = total
      this.tableData = rows
      this.tableLoading = false
    },

    // 树改变
    treeChange(treeItem) {
      // 修改对应的字段值
      // setQueryValue(
      //   this.params,
      //   'ORG_ID_',
      //   findNodeAndChildrenIds(this.orgData, treeItem.id || '')
      // )
      setQueryValue(this.params, 'ORG_ID_', treeItem.id)
      this.getTableData()
    },
  },
}
</script>

<style lang="scss" scoped>
</style>
