import { defineComponent } from 'vue';
export interface Expose {
}

export default defineComponent({
  name: 'App',
  props: { modelValue: { type: Object as PropType<FormData>, required: true } },
  emits: ['update:modelValue'],
  setup(props: { a: 1 }, { emit, slots, expose }) {
    const count = ref(0);
    const inc = () => {
      count.value++;
    };
    
    expose({ ... } satisfies Expose) // https://github.com/vuejs/core/issues/6643#issuecomment-2232546917
    return () => (
      <div onClick={withModifiers(inc, ['self'])}>{count.value}</div>
      <h1>{slots.default ? slots.default() : 'foo'}</h1>
      
    );
  },
});

// In other components
import CompA, {Exposed} from "./CompA"
const componentRef = ref<ComponentInstance<typeof CompA> & Exposed>()

<CompA ref={el => componentRef.value = el}>
      {{
        default: () => 'default',
        slotA: () => 'slotA'
      }}
</CompA>

import BaseContainer from '@/components/BaseContainer'
import Pagination from '@/components/Pagination'
import { ElForm, ElFormItem, ElInput, ElTable, ElTableColumn, ElButton } from 'element-plus'
import { defineComponent, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'

/********************
 * 类型定义
 ********************/
interface QueryParams {
  personId: string
}

interface Item {
  personId: string
  personName: string
  personPhone: string
  personAddress: string
}

export default defineComponent({
  name: 'DifficultHouseholdList',

  setup() {
    /********************
     * 公共变量定义
     ********************/
    const loading = ref(false)
    const tableData = ref<Item[]>([])
    const queryParams = ref<QueryParams>({
      personId: ''
    })
    const paginationConfig = ref<PaginationConfiguration>({
      total: 0,
      pageNum: 1,
      pageSize: 10
    })
    const route = useRoute()
    const projectId = route.query.parentId as string

    /********************
     * 业务逻辑
     ********************/

    /**
     * 搜索表单初始化
     */

    /**
     * 表格初始化
     */

    const handleQuerySearch = () => {
      getTableData()
    }
    const handleQueryReset = () => {
      queryParams.value.personId = ''
      getTableData()
    }
    const handleAdd = () => {}
    const handleEdit = (row: Item) => {}
    const handleDelete = (row: Item) => {}
    const getTableData = async () => {
      const res = {} as any
      loading.value = true
      // paginationConfig.value.total =
      loading.value = false
    }

    /********************
     * 初始化
     ********************/

    onMounted(() => {
      getTableData()
    })

    return () => {
      return (
        <BaseContainer fill back>
          <div class="flex h-full flex-col">
            <ElForm model={queryParams.value} class="flex items-center gap-3 w-full flex-wrap">
              <ElFormItem label="被征收人编号" prop="personId">
                <ElInput
                  v-model={queryParams.value.personId}
                  placeholder="请输入被征收人编号"
                  clearable
                  style="width: 200px"
                  onKeydown={(e: KeyboardEvent) => {
                    if (e.key === 'Enter') handleQuerySearch()
                  }}
                />
              </ElFormItem>
              <ElFormItem class="ml-auto">
                <ElButton type="primary" icon="ElIconSearch" onClick={handleQuerySearch}>
                  搜索
                </ElButton>
                <ElButton icon="ElIconRefresh" onClick={handleQueryReset}>
                  重置
                </ElButton>
              </ElFormItem>
            </ElForm>
            <div class="flex mb-3">
              <div>
                <ElButton type="primary" icon="ElIconPlus" onClick={handleAdd}>
                  新增
                </ElButton>
              </div>
            </div>
            <ElTable class="flex-1" v-loading={loading.value} data={tableData.value}>
              <ElTableColumn width="60" type="selection" align="center" />
              <ElTableColumn label="序号" width="60" type="index" align="center">
                {(scope) => (
                  <span>
                    {(paginationConfig.value.pageNum - 1) * paginationConfig.value.pageSize +
                      scope.$index +
                      1}
                  </span>
                )}
              </ElTableColumn>
              <ElTableColumn label="" align="center">
                <template>
                  <div>123</div>
                </template>
              </ElTableColumn>
              <ElTableColumn label="" align="center" prop="" />
              <ElTableColumn label="操作" align="center" width="100">
                {(scope) => (
                  <div class="flex align-center justify-center">
                    <ElButton
                      link
                      type="primary"
                      icon="ElIconEdit"
                      onClick={() => handleEdit(scope.row)}
                    >
                      编辑
                    </ElButton>
                    <ElButton
                      link
                      type="danger"
                      icon="ElIconDelete"
                      onClick={() => handleDelete(scope.row)}
                    >
                      删除
                    </ElButton>
                  </div>
                )}
              </ElTableColumn>
            </ElTable>
            <div class="relative">
              <Pagination
                layout="->, total, sizes, prev, pager, next, jumper"
                v-model:page={paginationConfig.value.pageNum}
                v-model:limit={paginationConfig.value.pageSize}
                total={paginationConfig.value.total}
                onPagination={() => getTableData()}
              />
            </div>
          </div>
        </BaseContainer>
      )
    }
  }
})