<template>
  <ElDialog
    v-model="visible"
    :title="dialogTitle"
    width="520px"
    :close-on-click-modal="false"
  >
    <ElForm :model="form">
      <ElFormItem
        v-if="showAutoSwitch"
        label="自动排版(烫画工艺推荐自动排版)"
        style="margin-bottom: 10px"
      >
        <el-switch
          v-model="isAuto"
          inline-prompt
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
          active-text="是"
          inactive-text="否"
          @change="handleAutoChange"
        />
      </ElFormItem>
      <template v-if="isAuto || !showAutoSwitch">
        <ElFormItem label="排版类型">
          <el-radio-group v-model="form.type">
            <el-radio label="tiff">tiff</el-radio>
            <el-radio label="png">png</el-radio>
          </el-radio-group>
        </ElFormItem>
        <ElFormItem label="排版宽度">
          <el-radio-group v-model="form.templateWidth">
            <el-radio :value="42">40+2cm</el-radio>
            <el-radio :value="60">60cm</el-radio>
          </el-radio-group>
        </ElFormItem>
      </template>
    </ElForm>

    <template #footer>
      <div style="text-align: center">
        <ElButton @click="visible = false">取消</ElButton>
        <ElButton type="primary" :loading="submitting" @click="handleSubmit">
          确定
        </ElButton>
      </div>
    </template>
  </ElDialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { arrangeFinishApi } from '@/api/podCnOrder'

type OpenPayload = {
  productIdList: number[]
  title?: string
  showAutoSwitch?: boolean
}

const emit = defineEmits<{
  success: []
}>()

const visible = ref(false)
const submitting = ref(false)
const payload = ref<OpenPayload | null>(null)

const isAuto = ref(true)
const form = ref<{ type?: string; templateWidth?: number }>({})
const showAutoSwitch = ref(true)
const dialogTitle = ref('排单')

const handleAutoChange = () => {
  form.value = {}
}

const open = (p: OpenPayload) => {
  payload.value = p
  showAutoSwitch.value = p.showAutoSwitch ?? true
  dialogTitle.value = p.title || '排单'
  isAuto.value = true
  form.value = {}
  visible.value = true
}

const handleSubmit = async () => {
  if (!payload.value?.productIdList?.length) {
    return ElMessage.warning('请选择订单')
  }

  const { templateWidth, type } = form.value
  const mustFill = isAuto.value || !showAutoSwitch.value
  if (mustFill && (!templateWidth || !type)) {
    return ElMessage.warning('排版类型和排版宽度为必选项')
  }
  if (!templateWidth && type) return ElMessage.warning('请选择排版宽度')
  if (templateWidth && !type) return ElMessage.warning('请选择排版类型')

  submitting.value = true
  try {
    await arrangeFinishApi({
      productIdList: payload.value.productIdList,
      templateWidth: isAuto.value ? templateWidth : undefined,
      type: isAuto.value ? type : undefined,
    })
    ElMessage.success('操作成功')
    visible.value = false
    emit('success')
  } catch (e: unknown) {
    ElMessage.error((e as Error)?.message || '排单失败')
  } finally {
    submitting.value = false
  }
}

defineExpose({ open })
</script>
