<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 { ElMessage } from 'element-plus'
import OrderApi from '@/pages/order/order-api.ts'

const orderData = Utils.resetAble(reactive<{
  id: string
  licensePlate: string,
}>({
  id: '',
  licensePlate: '',
}))
const title = computed(() => {
  return `${orderData.licensePlate} 勘料`
})

const emits = defineEmits([ 'succ' ])

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

const inOutData = Utils.resetAble(reactive({
  checkerMemo: '',
  checkPhoto: [],
}))
const showDialog = ref(false)
const submiting = ref(false)

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

function submitHandler() {
  submiting.value = true
  const data = {
    orderTransId: orderData.id,
    checkPhoto: inOutData.checkPhoto,
    checkerMemo: inOutData.checkerMemo,
  }
  OrderApi.check(data)
    .then(() => {
      ElMessage.success(`${title.value}成功`)
      showDialog.value = false
      emits('succ')
    })
    .finally(() => {
      submiting.value = false
    })
}

defineExpose({
  open(id: string, licensePlate: string) {
    orderData.$reset({
      id,
      licensePlate,
    })
    showDialog.value = true
  },
})

</script>

<template>
  <ADialog
    v-model:show="showDialog"
    :closed="dialogCloseHandler"
    :submit-handler="submitHandler"
    :title="title"
  >
    <ElForm ref="formRef"
      class="check-panel-form"
      @submit.prevent>
      <ElFormItem label="勘料照片" prop="headerPhoto">
        <Uploader v-model:files="inOutData.checkPhoto"/>
      </ElFormItem>
      <ElFormItem label="勘料备注" prop="headerPhoto">
        <ElInput v-model="inOutData.checkerMemo"/>
      </ElFormItem>
    </ElForm>
    <template #footer>
      <ElButton @click="showDialog = false">关闭</ElButton>
      <ElButton type="danger" @click="showDialog = false">拒收</ElButton>
      <ElButton :loading="submiting" type="primary" @click="submitHandler">确认勘料</ElButton>
    </template>
  </ADialog>
</template>

<style lang="stylus" scoped>
.check-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>
