<template>
  <ADetailPanel
    ref="detailPanel"
    class="book-detail-panel"
    v-bind="detailPanelProps">
    <template #default="detailData">
      <ElDescriptions :column="4" :title="Strings.isBlank(detailData.orderCategoryTxt)?'订单信息':'订单信息（' + detailData.orderCategoryTxt+'）'" border class="description">
        <ElDescriptionsItem label="订单编号">
          {{ detailData.sn }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="产品名称">
          {{ detailData.goodsName }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="下单时间">
          {{ detailData.orderTime }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="项目名称">
          {{ detailData.projectInfo?.projectName || '-' }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="站点名称">
          {{ detailData.stationName }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="预估量">
          {{ detailData.estimatedQuantity == null ? '' : detailData.estimatedQuantity + ' ' + (detailData.unitTxt ?? '') }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="预估车数">
          {{ detailData.estimatedTrainNum }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="运距">
          {{ `${detailData.transDistance == null ? '' : (detailData.transDistance / 1000) + ' 公里'}` }}
        </ElDescriptionsItem>

        <ElDescriptionsItem label="客户姓名">
          {{ detailData.contacts }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="客户电话">
          {{ detailData.phone }}
        </ElDescriptionsItem>
        <ElDescriptionsItem :span="2" label="客户备注">
          {{ detailData.customerMemo }}
        </ElDescriptionsItem>
      </ElDescriptions>
      <ElDescriptions :column="1" class="description" direction="vertical" title="运输信息">
        <ElDescriptionsItem :span="1">
          <TransRecode :trans-recodes="detailData.transRecodes" v-bind="transRecodeProps">
            <ElTableColumn label="车次" prop="trainNum"/>
            <ElTableColumn label="司机姓名" prop="driverName" width="120">
              <template #default="{row}">
                <span> {{ row.driverName ?? '-' }}</span>
              </template>
            </ElTableColumn>
            <ElTableColumn label="司机电话" prop="driverPhone">
              <template #default="{row}">
                <span> {{ row.driverName ?? '-' }}</span>
              </template>
            </ElTableColumn>
            <ElTableColumn label="车牌号" prop="truckLicensePlate">
              <template #default="{row}">
                <span> {{ row.truckLicensePlate ?? '-' }}</span>
              </template>
            </ElTableColumn>
            <ElTableColumn fixed="right" label="运输状态" prop="transStatusTxt" width="100">
              <template #default="{row}">
                <ElTag :data-cs="transStatusColor.cs(row.transStatus)"> {{ row.transStatusTxt }}</ElTag>
              </template>
            </ElTableColumn>
            <ElTableColumn fixed="right" label="操作" prop="tableAction" width="60">
              <template #default="{row}">
                <div class="action-btn">
                  <ElTooltip :enterable="false" content="派单" placement="top">
                    <ElButton :disabled="row.transStatus !== transStatus.DaiPaiDan" :icon="elIcons.Position" class="icon-btn" plain type="primary" @click="dispatch(detailData, row.id, row.trainNum)"/>
                  </ElTooltip>
                </div>
              </template>
            </ElTableColumn>
          </TransRecode>
        </ElDescriptionsItem>
      </ElDescriptions>
    </template>
    <template #footer="detailData">
      <ElButton :disabled="transRecodeProps.moduleValue.length < 1 " type="primary" @click="dispatch(detailData)">批量派单</ElButton>
      <DispatchForm ref="dispatchForm" @succ="succ"/>
    </template>
  </ADetailPanel>
</template>

<script lang="ts" setup>
import ADetailPanel, {
  type ADetailPanelInstance,
  buildDetailPanelProps,
} from '@/components/a-detail-panel/ADetailPanel.tsx'
import TransRecode, { buildTransRecodeProps } from '@/pages/order/trans-recode/TransRecode.tsx'
import DispatchForm from '@/pages/order/book/DispatchForm.vue'
import {
  transStatus,
  transStatusColor,
} from '@/pages/order/constants.ts'
import { elIcons } from '@/common/element/element.ts'
import Strings from '@/common/utils/strings.ts'
import OrderApi from '@/pages/order/order-api.ts'

const detailPanelIns = useTemplateRef<ADetailPanelInstance>('detailPanel')
const dispatchFormIns = useTemplateRef<InstanceType<typeof DispatchForm>>('dispatchForm')
let orderId = ''
const transRecodeProps = buildTransRecodeProps({
  moduleValue: [],
  selectable: true,
  disabledRowsMethod(rows) {
    return rows?.filter(it => !Strings.isBlank(it.driverName)).map(it => it.id!)
  },
})

function dispatch(data: OrderTypes.SearchOrderResult, transId?: string, trainNum?: number) {
  dispatchFormIns.value?.open({
    // orderId: data.id,
    sn: data.sn,
    transIds: transId == null ? transRecodeProps.moduleValue : [ transId ],
    transOrgId: data.transOrgId,
    trainNum,
  })
}

function succ() {
  detailPanelIns.value?.open(orderId)
}

const detailPanelProps = buildDetailPanelProps<OrderTypes.SearchOrderResult>({
  title: '订单详情',
  width: '80vw',
  detailsLoader(id) {
    return OrderApi.detail(id, 'YuYue')
  },
})
defineExpose({
  open(data: OrderTypes.TableData) {
    orderId = data.orderId!
    detailPanelIns.value?.open(data.orderId!)
  },
})
</script>

<style lang="stylus" scoped>
.description {
  .data-table {
    height 250px !important
  }
}
</style>
