<script lang="ts" setup>
import DriverDropTable from '@/pages/cst/driver/DriverDropTable.vue'
import AFormPanel, {
  type AFormPanelInstance,
  buildFormPanelProps,
} from '@/components/a-form-panel/AFormPanel.tsx'
import OrderApi from '@/pages/order/order-api.ts'

const formPanelIns = useTemplateRef<AFormPanelInstance>('formPanel')

let orderId: string | undefined = undefined
let transIds: string[] | undefined = undefined
let transOrgId = ref<string | undefined>(undefined)
let sn = ref<string | undefined>(undefined)
let trainNum = ref<number | undefined>(undefined)

const emits = defineEmits([ 'succ' ])
const formPanelProps = buildFormPanelProps<OrderTypes.DispatchParam>({
  title: '派单',
  labelWidth: '0',
  detailsLoader() {
    return Promise.resolve({})
  },
  doSubmit(data) {
    return OrderApi.assignmentDriver({
      orderId: orderId,
      orderTransId: transIds,
      driverId: data.driverId,
    })
      .then(() => {
        emits('succ')
      })
  },
  rules: () => {
    return {
      driverId: [ {required: true, message: '选择司机', trigger: 'blur'} ],
    }
  },
})

defineExpose({
  open(data: OrderTypes.DispatchParam) {
    orderId = data.orderId
    transIds = data.transIds
    transOrgId.value = data.transOrgId
    sn.value = data.sn
    trainNum.value = data.trainNum
    formPanelIns.value?.open()
  },
})

</script>

<template>
  <AFormPanel
    ref="formPanel"
    v-bind="formPanelProps">
    <template #default="formData">
      <div class="form-items">
        <div v-if="trainNum != null" class="form-item">
          <span>单号：{{ sn }}</span>
          <span>车次：{{ trainNum }}</span>
        </div>
        <div v-else class="form-item">
          单号：{{ sn }}
        </div>
        <ElFormItem label=" " prop="driverId">
          <DriverDropTable v-model="formData.driverId" :org-id="transOrgId"/>
        </ElFormItem>
      </div>
    </template>
  </AFormPanel>
</template>

<style lang="stylus" scoped>
.form-items {
  grid-template-columns: 1fr;
  padding 0 !important

  :deep(.el-form-item__content) {
    margin unset !important
  }


  .form-item {
    margin: 0 0 16px 0;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    width 300px

    &:has(> span) {
      display flex
      justify-content space-between
    }

    & > span {
      display inline-block
    }
  }
}
</style>
