<template>
  <FormPage
    ref="formPage"
    :action-column="actionColumn"
    :paging="paging">
    <template #searchFormItem="{searchForm}">
      <ElFormItem label="统一社会信用代码">
        <ElInput v-model="searchForm.uscc" placeholder="统一社会信用代码"/>
      </ElFormItem>
      <ElFormItem label="企业名称">
        <ElInput v-model="searchForm.orgName" placeholder="企业名称"/>
      </ElFormItem>
      <ElFormItem label="法人名称">
        <ElInput v-model="searchForm.legalRepresentative" placeholder="法人名称"/>
      </ElFormItem>
      <ElFormItem label="市">
        <ElInput v-model="searchForm.cityName" placeholder="市"/>
      </ElFormItem>
      <ElFormItem label="区县">
        <ElInput v-model="searchForm.areaName" placeholder="区县"/>
      </ElFormItem>
      <ElFormItem label="乡镇街道">
        <ElInput v-model="searchForm.townName" placeholder="乡镇街道"/>
      </ElFormItem>
      <ElFormItem label="详细地址">
        <ElInput v-model="searchForm.address" placeholder="详细地址"/>
      </ElFormItem>
    </template>
    <template #simpleSearchFormItem="{searchForm}">
      <ElFormItem>
        <ElInput v-model="searchForm.uscc" placeholder="统一社会信用代码"/>
      </ElFormItem>
      <ElFormItem>
        <ElInput v-model="searchForm.orgName" placeholder="企业名称"/>
      </ElFormItem>
    </template>
    <template #columns>
      <!-- ，GeTiHu-个体户、QiYe--企业 -->
      <ElTableColumn label="主体类型" prop="orgCategoryTxt"/>
      <!-- <ElTableColumn label="统一社会信用代码" prop="uscc" /> -->
      <ElTableColumn label="企业名称" prop="orgName" width="140"/>
      <ElTableColumn label="营业执照" width="100px">
        <template #default="{ row }">
          <el-image :preview-src-list="[AppApi.fileUrl(row.businessLicense)]" :src="AppApi.fileUrl(row.businessLicense)" preview-teleported show-progress style="width: 60px; height: 60px"/>
        </template>
      </ElTableColumn>
      <ElTableColumn label="法人名称" prop="legalRepresentative"/>
      <!-- <ElTableColumn label="法人身份证号" prop="idcard" />
       <ElTableColumn label="身份证有效期" prop="idcardStartTime"/>
        <ElTableColumn label="身份证有效期" prop="idcardEndTime"/> -->
      <ElTableColumn label="身份证正面" prop="idcardFront" width="100">
        <template #default="{ row }">
          <el-image :preview-src-list="[AppApi.fileUrl(row.idcardFront)]" :src="AppApi.fileUrl(row.idcardFront)" preview-teleported show-progress style="width: 60px; height: 60px"/>
        </template>
      </ElTableColumn>
      <ElTableColumn label="身份证反面" prop="idcardBack" width="100">
        <template #default="{ row }">
          <el-image :preview-src-list="[AppApi.fileUrl(row.idcardBack)]" :src="AppApi.fileUrl(row.idcardBack)" preview-teleported show-progress style="width: 60px; height: 60px"/>
        </template>
      </ElTableColumn>
      <!-- <ElTableColumn label="省" prop="provinceName"/>
        <ElTableColumn label="市" prop="cityName"/> -->
      <ElTableColumn label="区县" prop="areaName"/>
      <ElTableColumn label="乡镇街道" prop="townName"/>
      <ElTableColumn label="详细地址" prop="address" width="180"/>
      <!-- <ElTableColumn label="经度" prop="lng" />
      <ElTableColumn label="纬度" prop="lat" /> -->
      <ElTableColumn label="创建时间" prop="createTime" width="140"/>
      <ElTableColumn label="修改时间" prop="modifyTime" width="140"/>
    </template>
    <OrgForm ref="orgForm" :research="research"/>
  </FormPage>
</template>

<script lang="ts" setup>
import OrgApi from '@/pages/cst/org/org-api.ts'
import OrgForm from '@/pages/cst/org/OrgForm.vue'
import AppApi from '@/common/app/app-api.ts'
import FormPage from '@/components/page/FormPage.vue'
import type { ActionColumnType } from '@/components/page/a-page-type.ts'
import type { ComponentExposed } from 'vue-component-type-helpers'

const formPageIns = useTemplateRef<ComponentExposed<typeof FormPage>>('formPage')
const actionColumn = reactive<ActionColumnType<OrgTypes.SearchOrgResult>>({
  tableActions: [
    {
      icon: 'Delete',
      loading: false,
      type: 'danger',
      tooltip: '删除',
      confirm: {
        title: '是否删除当前数据',
      },
      action({row}) {
        OrgApi.del([ row.id! ])
          .then(() => {
            ElMessage.success('删除成功')
            return true
          })
      },
    },
  ],
})

function research() {
  formPageIns.value?.doSearch()
}

function paging(param: OrgTypes.SearchOrgParam) {
  return OrgApi.paging(param)
}

</script>
