<script setup lang="ts">
import { nextTick, ref } from 'vue'
import { User_List } from '@/api/user/index'
// import Dialog from '@/components/dialog/Dialog.vue'
import Drawer from '@/components/Drawer/index.vue'
import { GlobalStore } from '@/stores/index'
import TableBase from '@/components/TableBase/index.vue'
import { ColumnProps } from '@/components/TableBase/interface/index'

const search = ref('')
const globalStore = GlobalStore()
const drawerRef = ref<InstanceType<typeof Drawer> | null>(null)
const tableRef = ref<InstanceType<typeof TableBase> | null>(null)

const Dialogcolumns: ColumnProps[] = [{ prop: 'T_name', label: '名字', name: 'T_name' }]
const InitParam = {
  User_tokey: globalStore.GET_User_tokey,
  T_name: '',
  T_dept_leader: 1
}
const searchHandle = () => {
  InitParam.T_name = search.value
  tableRef.value?.searchTable()
}
/**
 * 获取信息
 */
const getApproverInfo = (row: any) => {
  emit('onUserInfo', row)
  drawerRef.value?.closeDrawer()
}
const callbackDrawer = (done: () => void) => {
  done()
}

const emit = defineEmits<{ (event: 'onUserInfo', value: any): void }>()

/**
 * 配置高度
 */
const onResize = () => {
  const height = document.documentElement.clientHeight
  return height - 45 - 74 - 40 - 12
}

const openDrawer = () => drawerRef.value?.openDrawer()
defineExpose({
  openDrawer
})
</script>

<template>
  <div>
    <Drawer ref="drawerRef" :handleClose="callbackDrawer">
      <template #header="{ params }">
        <h3 :id="params.titleId" :class="params.titleClass">选择经办人</h3>
      </template>
      <TableBase
        ref="tableRef"
        :columns="Dialogcolumns"
        :initParam="InitParam"
        :requestApi="User_List"
        layout="total, prev, pager, next"
        :onResize="onResize"
      >
        <template #table-header>
          <el-row :gutter="20">
            <el-col :span="24" class="d-flex">
              <span class="inline-flex">姓名：</span>
              <el-input v-model="search" type="text" placeholder="按姓名搜索" />
              <el-button type="primary" @click="searchHandle">搜索</el-button>
            </el-col>
          </el-row>
        </template>
        <template #T_name="{ row }">
          <el-button type="primary" link @click="getApproverInfo(row)">{{ row.T_name }}</el-button>
        </template>
      </TableBase>
    </Drawer>
  </div>
</template>

<style scoped>
.inline-flex {
  white-space: nowrap;
}
.d-flex {
  display: flex;
  align-items: center;
}
</style>
