<template>
  <FormPage
    ref="formPage"
    :action-column="actionColumn"
    :left-tools="leftTools"
    :paging="paging">
    <template #searchFormItem="{ searchForm }">
      <!-- <ElFormItem label="Id">
        <ElInput
          v-model="searchForm.id"
          placeholder="Id"/>
      </ElFormItem> -->
      <ElFormItem label="编号">
        <ElInput v-model="searchForm.sn" placeholder="编号"/>
      </ElFormItem>
      <!-- JinXingZhong-进行中、YiFaHuo-已发货、YiChuKu-已出库、YiQuXiao--已取消 - -->
      <!-- <ElFormItem label="状态">
        <ElInput v-model="searchForm.salesOrderStatus" placeholder="状态" />
      </ElFormItem> -->
      <ElFormItem label="购买方客户">
        <ElInput v-model="searchForm.customerId" placeholder="购买方客户"/>
      </ElFormItem>
      <!-- ，JinXingZhong--进行中、YiFaHuo--已发货、YiChuKu--已出库、YiQuXiao--已取消 -->
      <!-- <ElFormItem label="下单日期">
        <ElInput v-model="searchForm.orderDate" placeholder="下单日期" />
      </ElFormItem>
      <ElFormItem label="发货日期">
        <ElInput v-model="searchForm.shipmentDate" placeholder="发货日期" />
      </ElFormItem>
      <ElFormItem label="产品分类">
        <ElInput v-model="searchForm.goodsCategoryId" placeholder="产品分类" />
      </ElFormItem> -->
      <ElFormItem label="分类名称">
        <ElInput v-model="searchForm.goodsCategoryName" placeholder="分类名称"/>
      </ElFormItem>
      <ElFormItem label="产品">
        <ElInput v-model="searchForm.goodsId" placeholder="产品"/>
      </ElFormItem>
      <ElFormItem label="产品名称">
        <ElInput v-model="searchForm.goodsName" placeholder="产品名称"/>
      </ElFormItem>
      <ElFormItem label="产品编码">
        <ElInput v-model="searchForm.goodSn" placeholder="产品编码"/>
      </ElFormItem>
      <ElFormItem label="数量">
        <ElInput v-model="searchForm.quantity" placeholder="数量"/>
      </ElFormItem>
      <!--<ElFormItem label="计量单位">
        <ElInput v-model="searchForm.unit" placeholder="计量单位" />
      </ElFormItem>
      <ElFormItem label="总金额">
        <ElInput v-model="searchForm.totalMoney" placeholder="总金额" />
      </ElFormItem>
     <ElFormItem label="备注">
        <ElInput v-model="searchForm.memo" placeholder="备注" />
      </ElFormItem>
      <ElFormItem label="创建人">
        <ElInput v-model="searchForm.creatorId" placeholder="创建人" />
      </ElFormItem>
      <ElFormItem label="修改人">
        <ElInput v-model="searchForm.modifierId" placeholder="修改人" />
      </ElFormItem> -->
      <ElFormItem label="创建时间">
        <ElInput v-model="searchForm.createTime" placeholder="创建时间"/>
      </ElFormItem>
      <ElFormItem label="修改时间">
        <ElInput v-model="searchForm.modifyTime" placeholder="修改时间"/>
      </ElFormItem>
    </template>
    <template #columns>
      <!-- <ElTableColumn label="Id" prop="id" /> -->
      <ElTableColumn label="编号" prop="sn"/>
      <ElTableColumn label="状态" prop="salesOrderStatusTxt"/>
      <!-- <ElTableColumn label="购买方客户" prop="customerId" /> -->
      <ElTableColumn label="下单日期" prop="orderDate" width="100"/>
      <ElTableColumn label="发货日期" prop="shipmentDate" width="100"/>
      <ElTableColumn label="产品分类" prop="goodsCategoryId"/>
      <ElTableColumn label="分类名称" prop="goodsCategoryName"/>
      <!-- <ElTableColumn label="产品" prop="goodsId" /> -->
      <ElTableColumn label="产品名称" prop="goodsName"/>
      <ElTableColumn label="产品编码" prop="goodSn" width="100"/>
      <ElTableColumn label="数量" prop="quantity"/>
      <!-- <ElTableColumn label="计量单位" prop="unit" /> -->
      <ElTableColumn label="总金额" prop="totalMoney"/>
      <ElTableColumn label="备注" prop="memo"/>
      <!-- <ElTableColumn label="创建人" prop="creatorId" />
      <ElTableColumn label="修改人" prop="modifierId" /> -->
      <ElTableColumn label="创建时间" prop="createTime" width="180"/>
      <ElTableColumn label="修改时间" prop="modifyTime" width="180"/>
    </template>
    <SalesOrderForm ref="salesOrderForm" @edit-succ="research"/>
  </FormPage>
</template>

<script lang="ts" setup>
import SalesOrderApi from '@/pages/wh/sales-order/sales-order-api.ts'
import SalesOrderForm from '@/pages/wh/sales-order/SalesOrderForm.vue'
import FormPage from '@/components/page/FormPage.vue'
import type {
  ActionColumnType,
  ToolType,
} from '@/components/page/a-page-type.ts'
import type { ComponentExposed } from 'vue-component-type-helpers'

const salesOrderFormIns = useTemplateRef<InstanceType<typeof SalesOrderForm>>('salesOrderForm')
const formPageIns = useTemplateRef<ComponentExposed<typeof FormPage>>('formPage')

const actionColumn = reactive<ActionColumnType<SalesOrderTypes.SearchSalesOrderResult>>({
  tableActions: [
    {
      tooltip: '编辑',
      icon: 'Edit',
      action({row}) {
        salesOrderFormIns.value?.open(row)
      },
    },
    {
      icon: 'Delete',
      loading: false,
      type: 'danger',
      tooltip: '删除',
      confirm: {
        title: '是否删除当前数据',
      },
      action({row}) {
        return SalesOrderApi.del([ row.id! ])
          .then(() => {
            ElMessage.success('删除成功')
            return true
          })
      },
    },
  ],
})
const leftTools: ToolType[] = [
  {
    icon: 'Plus',
    label: '新建',
    action() {
      salesOrderFormIns.value?.open()
    },
  },
]

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

function paging(param: SalesOrderTypes.SearchSalesOrderParam) {
  return SalesOrderApi.paging(param)
}

</script>
