<script setup lang="ts">
import { ref, onMounted } from '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'
import {verifyCompany_list} from "@/api/percentage";

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: ''
}
const searchHandle = () => {
  InitParam.T_name = search.value
  tableRef.value?.searchTable()
}
/**
 * 获取信息
 */
const getVerifyCompanyInfo = (row: any) => {
	drawerRef.value?.closeDrawer()
	emit('onUserInfo', row)
}

const props = withDefaults(defineProps<{ title: string }>(), {})
const title = ref(props.title)

const callbackDrawer = (done: () => void) => {
	drawerRef.value?.closeDrawer()
	done()
}

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

</script>

<template>
  <div class="VerifyCompany">
    <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="verifyCompany_list"
        layout="total, prev, pager, next"
        :rowClick="getVerifyCompanyInfo"
      >
        <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>
