<template>
  <ATablePage
    ref="tablePage"
    v-bind="tablePageProps">
    <template #highFormItem="formData">
      <ElFormItem label="站点">
        <ElInput v-model="formData.stationId" placeholder="站点"/>
      </ElFormItem>
      <ElFormItem label="订单编号">
        <ElInput v-model="formData.sn" placeholder="订单编号"/>
      </ElFormItem>
      <ElFormItem label="项目名称">
        <ElInput v-model="formData.projectName" placeholder="项目名称"/>
      </ElFormItem>
      <ElFormItem label="客户姓名">
        <ElInput v-model="formData.contacts" placeholder="客户姓名"/>
      </ElFormItem>
      <ElFormItem label="联系方式">
        <ElInput v-model="formData.phone" placeholder="联系方式"/>
      </ElFormItem>

      <ElFormItem label="订单类型">
        <ElInput v-model="formData.orderCategory" placeholder="订单类型"/>
      </ElFormItem>
      <!--    <ElFormItem label="订单状态">
           <ElInput v-model="formData.orderStatus" placeholder="订单状态"/>
         </ElFormItem> -->
      <ElFormItem label="运输企业">
        <ElInput v-model="formData.transOrgName" placeholder="运输企业"/>
      </ElFormItem>
      <ElFormItem label="下单时间">
        <ADtPicker v-model="formData.orderTimes" :change-handler="research"/>
      </ElFormItem>
      <ElFormItem label="完结时间">
        <ADtPicker v-model="formData.finishTimes" :change-handler="research"/>
      </ElFormItem>
    </template>
    <template #simpleFormItem="formData">
      <ElFormItem>
        <ElInput v-model="formData.sn" placeholder="订单编号"/>
      </ElFormItem>
      <ElFormItem>
        <ElInput v-model="formData.orderCategory" placeholder="订单类型"/>
      </ElFormItem>
    </template>
    <template #columns>
      <ElTableColumn fixed="left" label="订单编号" prop="sn" width="140"/>
      <!-- <ElTableColumn label="下单时间" prop="orderTime"/> -->
      <ElTableColumn label="客户姓名" prop="contacts" width="100"/>
      <!-- <ElTableColumn label="联系方式" prop="phone"/> -->
      <ElTableColumn label="货品名称" prop="goodsName" width="120"/>

      <ElTableColumn label="项目名称" show-overflow-tooltip width="100">
        <template #default="{row}">
          {{ row.projectName ?? '-' }}
        </template>
      </ElTableColumn>
      <ElTableColumn label="站点名称" prop="stationName" width="120"/>
      <ElTableColumn label="运输单位" prop="transOrgName" show-overflow-tooltip width="120"/>
      <!-- <ElTableColumn label="运距（米）" prop="transDistance"/> -->

      <ElTableColumn label="车次" prop="trainNum" width="70"/>
      <ElTableColumn label="车牌号" prop="truckLicensePlate" width="120"/>
      <!-- <ElTableColumn label="司机姓名" prop="driverName"/> -->
      <!-- <ElTableColumn label="司机电话" prop="driverPhone"/> -->

      <ElTableColumn label="净重（吨）" prop="settleWeight" width="100"/>
      <!-- <ElTableColumn label="毛重（吨）" prop="roughWeight"/> -->
      <!-- <ElTableColumn label="皮重（吨）" prop="tareWeight"/> -->
      <ElTableColumn label="进场时间" prop="inTime" width="130"/>
      <!-- <ElTableColumn label="开始运输时间" prop="transTime"/> -->
      <ElTableColumn label="出场时间" prop="outTime" width="130"/>
      <!-- <ElTableColumn label="完结时间" prop="finishTime"/> -->
      <ElTableColumn fixed="right" label="支付状态" prop="paymentStatusTxt" width="90"/>

      <ElTableColumn fixed="right" label="订单状态" prop="transStatusTxt" width="90"/>
      <ElTableColumn fixed="right" label="勘料状态" prop="checkStatusTxt" width="90"/>


      <!-- <ElTableColumn label="客户备注" prop="customerMemo"/> -->
    </template>
    <OrderForm ref="orderForm" :research="research"/>
    <BookDetail ref="bookDetail"/>
  </ATablePage>
</template>

<script lang="ts" setup>
import OrderForm from '@/pages/order/book/BookForm.vue'
import ADtPicker from '@/components/a-dt-picker/ADtPicker.vue'
import ATablePage, {
  type ATablePageInstance,
  buildTablePageProps,
} from '@/components/a-page/a-table-page/ATablePage.tsx'
import BookDetail from '@/pages/order/book/BookDetail.vue'
import { orderCategory } from '@/pages/order/constants.ts'
import type { R } from '@/common/utils/http-util.ts'

const props = defineProps<{
  defaultOrderCategory: typeof orderCategory[number]['val']
}>()
const tablePageIns = useTemplateRef<ATablePageInstance>('tablePage')
const bookDetailIns = useTemplateRef<InstanceType<typeof BookDetail>>('bookDetail')


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

const tablePageProps = buildTablePageProps<OrderTypes.SearchOrderParam, OrderTypes.TableData>({
  pageLayout: {
    dataListHeight: 3,
  },
  searchForm: {
    defaultData: {
      orderCategory: props.defaultOrderCategory,
    },
    highForm: {
      contentWidth: 342,
    },
    /* paging(param: OrderTypes.SearchOrderParam) {
     return OrderApi.paging(param)
     .then(res => {
     const records = res.data.records
     const dataList: OrderTypes.TableData[] = []
     res.data.records = dataList
     for (const record of records) {
     const transRecodes = record.transRecodes ?? []
     record.transRecodes = undefined
     for (let i = 0; i < transRecodes.length; i++) {
     const it = transRecodes[i]
     dataList.push({
     ...record,
     ...it,
     rowCount: i === 0 ? transRecodes.length : 0,
     } as OrderTypes.TableData)
     }
     }
     return res as R<G.PageResult<OrderTypes.TableData>>
     })
     }, */
    paging(param: OrderTypes.SearchOrderParam) {
      return Promise.resolve({
        code: 200,
        data: {
          current: param.current,
          size: param.size,
          total: 100,
          records: [
            {
              rowCount: 1,
              id: '123',
              sn: '202308240001',
              orderTime: '2023-08-24 10:00:00',
              contacts: '张三',
              phone: '13800000000',
              projectName: '项目A',
              stationName: '站点B',
              goodsName: '商品X',
              unit: '吨',
              customerMemo: '客户备注',
              estimatedQuantity: 100,
              estimatedTrainNum: 2,
              transDistance: 500,
              orderCategoryTxt: '订单类型A',
              transStatusTxt: '运输中',
              transStatus: 'DaiPaiDan',
              checkStatusTxt: '未勘料',
              paymentStatusTxt: '未支付',
            },
          ] as OrderTypes.TableData[],
        },
      } as R<G.PageResult<OrderTypes.TableData>>)
    },
  },
  table: {
    actionColumn: {
      tableActions: [
        {
          tooltip: '详情',
          icon: 'Postcard',
          type: 'primary',
          action({row}) {
            bookDetailIns.value?.open(row)
          },
        },
        {
          tooltip: '三联单',
          type: 'info',
          icon: 'liandan',
          action({row}) {
            bookDetailIns.value?.open(row)
          },
        },
        /* {
         tooltip: '历史轨迹',
         type: 'info',
         icon: 'liandan',
         action({row}) {
         bookDetailIns.value?.open(row)
         },
         }, */
      ],
    },
  },
})
</script>
