<script setup lang="tsx">
import { ElDrawer, ElAvatar } from 'element-plus'
import { reactive, ref, unref } from 'vue'
import { useTable } from '@/hooks/web/useTable'
import { Table, TableColumn } from '@/components/Table'
import { BaseButton } from '@/components/Button'
import { Search } from '@/components/Search'
import { designerSearch } from '@/api/staff/types'
import { FormSchema } from '@/components/Form'
import { getStaffSalesperson } from '@/api/staff'

const { tableRegister, tableState, tableMethods } = useTable({
  fetchDataApi: async () => {
    const { data } = await getStaffSalesperson({
      page: unref(currentPage) || 1,
      limit: unref(pageSize) || 10,
      ...unref(searchParams)
    })
    return {
      list: data.list || [],
      total: data.count || 0
    }
  }
})
const { dataList, loading, currentPage, pageSize, total } = tableState
const { getList } = tableMethods
const modelValue = defineModel<boolean>()

const tableColumns = reactive<TableColumn[]>([
  {
    field: 'id',
    label: 'ID',
    align: 'center',
    headerAlign: 'center',
    minWidth: '60px'
  },
  {
    field: 'info',
    label: '头像',
    align: 'center',
    headerAlign: 'center',
    minWidth: '60px',
    slots: {
      default: (data: any) => {
        const row = data.row
        return (
          <>
            <ElAvatar shape="circle" size="small" src={row.avatar}>
              <img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
            </ElAvatar>
          </>
        )
      }
    }
  },
  {
    field: 'name',
    label: '姓名',
    minWidth: '90px'
  },
  {
    field: 'phone',
    label: '手机号',
    minWidth: '130px'
  },
  {
    field: 'detail_address',
    label: '地址',
    minWidth: '130px'
  },
  {
    field: 'action',
    label: '操作',
    width: '90px',
    slots: {
      default: (data: any) => {
        const row = data.row
        return (
          <>
            <BaseButton type="primary" onClick={() => confirm(row)}>
              选择
            </BaseButton>
          </>
        )
      }
    }
  }
])

const emit = defineEmits(['confirm'])
const confirm = (row: any) => {
  const data = Object.assign({}, row)
  emit('confirm', data)
}
const searchSchema = reactive<FormSchema[]>([
  {
    field: 'name',
    label: '搜索',
    component: 'Input',
    componentProps: {
      placeholder: '姓名查询'
    }
  }
])
const searchParams = ref<designerSearch>({
  name: ''
})
const setSearchParams = (data: any) => {
  searchParams.value = data
  getList()
}
</script>

<template>
  <ElDrawer v-model="modelValue" title="选择用户" size="700px">
    <Search :schema="searchSchema" @reset="setSearchParams" @search="setSearchParams" />
    <div class="mt-10px"></div>
    <Table
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :pagination="{
        total
      }"
      :columns="tableColumns"
      stripe
      :data="dataList"
      :loading="loading"
      @register="tableRegister"
    />
    <template #footer>
      <div>
        <BaseButton @click="() => (modelValue = false)">关闭</BaseButton>
      </div>
    </template>
  </ElDrawer>
</template>
