<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { User_List } from '@/api/user/index'
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: '名字' }]
const InitParam = {
  User_tokey: globalStore.GET_User_tokey,
  T_name: '',
  T_dept_leader: 0
}
const searchHandle = () => {
  InitParam.T_name = search.value
  tableRef.value?.searchTable()
}
/**
 * 获取信息
 */
const getApproverInfo = (row: any) => {
  emit('onUserInfo', row)
  drawerRef.value?.closeDrawer()
}

const props = withDefaults(defineProps<{ title: string; dept_leader?: number }>(), {
  dept_leader: undefined
})
const title = ref(props.title)

const callbackDrawer = (done: () => void) => done()
const emit = defineEmits<{ (event: 'onUserInfo', value: any): void }>()
const openDrawer = () => drawerRef.value?.openDrawer()
defineExpose({
  openDrawer
})

onMounted(() => {
  if (props.dept_leader === 1) InitParam.T_dept_leader = props.dept_leader
})
</script>

<template>
  <div>
    <Drawer ref="drawerRef" :handleClose="callbackDrawer">
      <template #header="{ params }">
        <h3 :id="params.titleId" :class="params.titleClass">{{ title }}</h3>
      </template>
      <TableBase
        ref="tableRef"
        :columns="Dialogcolumns"
        :initParam="InitParam"
        :requestApi="User_List"
        layout="total, prev, pager, next"
        :rowClick="getApproverInfo"
      >
        <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>
      </TableBase>
    </Drawer>
  </div>
</template>

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