<script lang="ts" setup>
import Uploader from '@/components/uploader/Uploader.vue'
import Utils from '@/common/utils'
import ADialog from '@/components/a-dialog/ADialog.vue'
import FormUtil from '@/common/utils/formUtil.ts'
import {
  ElMessage,
  type FormInstance,
} from 'element-plus'
import OrderApi from '@/pages/order/order-api.ts'

const orderData = Utils.resetAble(reactive<{
  id: string
  licensePlate: string,
  state: '进场' | '出场',
}>({
  id: '',
  licensePlate: '',
  state: '进场',
}))
const title = computed(() => {
  return `${orderData.licensePlate} ${orderData.state}`
})

const emits = defineEmits([ 'succ' ])

const formIns = useTemplateRef<FormInstance>('formRef')

const inOutData = Utils.resetAble(reactive({
  weight: undefined,
  headerPhoto: undefined,
  bodyPhoto: undefined,
}))
const showDialog = ref(false)
const submiting = ref(false)
const rules = {
  weight: [ {required: true, message: '请填写磅重', trigger: 'blur'} ],
}

function dialogCloseHandler() {
  inOutData.$reset()
}

function submitHandler() {
  submiting.value = true
  const data = {
    orderTransId: orderData.id,
    weight: (inOutData.weight ?? 0) * 1000,
    frontPhoto: inOutData.headerPhoto,
    bodyPhoto: inOutData.bodyPhoto,
  }
  FormUtil.submit(formIns, () => {
    if (orderData.state === '进场') {
      return OrderApi.truckComing(data).then(() => true)
    } else {
      return OrderApi.truckLeaving(data).then(() => true)
    }
  })
    .then(res => {
      ElMessage.success(`${title.value}成功`)
      if ((res ?? true)) {
        showDialog.value = false
      }
      emits('succ')
    })
    .finally(() => {
      submiting.value = false
    })
}

defineExpose({
  open(id: string, licensePlate: string, state: '进场' | '出场') {
    orderData.$reset({
      id,
      licensePlate,
      state,
    })
    showDialog.value = true
  },
})

</script>

<template>
  <ADialog
    v-model:show="showDialog"
    :closed="dialogCloseHandler"
    :submit-handler="submitHandler"
    :title="title"
  >
    <ElForm ref="formRef"
      class="in-out-panel-form"
      :rules="rules"
      @submit.prevent>
      <ElFormItem label="磅重" prop="weight">
        <ElInputNumber v-model="inOutData.weight" :max="200" :min="1" controls-position="right">
          <template #suffix>吨</template>
        </ElInputNumber>
      </ElFormItem>
      <ElFormItem label="车头照" prop="headerPhoto">
        <Uploader v-model:file="inOutData.headerPhoto"/>
      </ElFormItem>
      <ElFormItem label="车斗照" prop="bodyPhoto">
        <Uploader v-model:file="inOutData.bodyPhoto"/>
      </ElFormItem>
    </ElForm>
    <template #footer>
      <ElButton @click="showDialog = false">关闭</ElButton>
      <ElButton :loading="submiting" type="primary" @click="submitHandler">确认{{ orderData.state }}</ElButton>
    </template>
  </ADialog>
</template>

<style lang="stylus" scoped>
.in-out-panel-form {
  display grid
  grid-template-areas "weight weight" \
  "headerPhoto bodyPhoto"
  gap: 0 20px;
  padding: 10px;

  :deep(.el-input-number) {
    .el-input__suffix-inner {
      padding-left 10px
    }
  }

  :deep(.el-form-item) {
    &:nth-child(1) {
      grid-area weight
    }

    &:nth-child(2) {
      grid-area headerPhoto
    }

    &:nth-child(3) {
      grid-area bodyPhoto
    }
  }
}
</style>
