<template>
  <!-- 移动端使用抽屉 -->
  <el-drawer
    v-if="isMobile"
    v-model="visibleProxy"
    title="开始工序"
    direction="btt"
    size="70%"
  >
    <el-form ref="startFormRef" :model="startForm" :rules="startRules" label-position="top">
      <el-form-item label="操作工人" prop="workerName">
        <el-input
          v-model="startForm.workerName"
          placeholder="请输入操作工人姓名"
        />
      </el-form-item>
      <el-form-item label="设备" prop="equipmentId">
        <el-select v-model="startForm.equipmentId" placeholder="请选择设备" style="width:100%">
          <el-option
            v-for="item in equipmentOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="生产数量" prop="inputQuantity">
        <el-input-number
          v-model="startForm.inputQuantity"
          :min="0.01"
          :precision="2"
          :step="0.1"
          style="width:100%"
          controls-position="right"
        />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="startForm.remark" type="textarea" :rows="3" placeholder="请输入备注" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="mobile-drawer-footer">
        <el-button @click="visibleProxy = false" style="flex:1">取消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="submitting" style="flex:1">确定</el-button>
      </div>
    </template>
  </el-drawer>

  <!-- PC端使用对话框 -->
  <el-dialog v-else v-model="visibleProxy" title="开始工序" width="500px" append-to-body>
    <el-form ref="startFormRef" :model="startForm" :rules="startRules" label-width="100px">
      <el-form-item label="操作工人" prop="workerName">
        <el-input
          v-model="startForm.workerName"
          placeholder="请输入操作工人姓名"
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="设备" prop="equipmentId">
        <el-select v-model="startForm.equipmentId" placeholder="请选择设备" class="!w-240px">
          <el-option
            v-for="item in equipmentOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="生产数量" prop="inputQuantity">
        <el-input-number
          v-model="startForm.inputQuantity"
          :min="0.01"
          :precision="2"
          :step="0.1"
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="startForm.remark" type="textarea" placeholder="请输入备注" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="visibleProxy = false">取消</el-button>
      <el-button type="primary" @click="handleSubmit" :loading="submitting">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed, reactive, ref, watch } from 'vue'
import { useUserStore } from '@/store/modules/user'
import { useWindowSize } from '@vueuse/core'

const { width } = useWindowSize()
const isMobile = computed(() => width.value < 768)

interface EquipmentOption {
  id: number
  name: string
}

const props = defineProps<{
  visible: boolean
  equipmentOptions: EquipmentOption[]
  maxQuantity?: number
  defaultInputQuantity?: number
  submitting?: boolean
}>()

const emit = defineEmits<{
  (e: 'update:visible', value: boolean): void
  (
    e: 'submit',
    payload: {
      workerName: string
      equipmentId?: number
      equipmentName?: string
      inputQuantity: number
      remark: string
    }
  ): void
}>()

const visibleProxy = computed({
  get: () => props.visible,
  set: (val: boolean) => emit('update:visible', val)
})

const startFormRef = ref()
const startForm = reactive({
  workerName: '',
  equipmentId: undefined as number | undefined,
  equipmentName: '',
  inputQuantity: 1,
  remark: ''
})

const startRules = {
  workerName: [{ required: true, message: '请输入操作工人姓名', trigger: 'blur' }],
  inputQuantity: [{ required: true, message: '请输入投入数量', trigger: 'blur' }]
}

// 当前登录用户，用于默认填充工人姓名
const userStore = useUserStore()
const currentNickname = computed(() => userStore.user?.nickname || '')

watch(
  () => props.visible,
  (val) => {
    if (val) {
      // reset form when open
      startForm.workerName = currentNickname.value || ''
      startForm.equipmentId = undefined
      startForm.equipmentName = ''
      startForm.inputQuantity = props.defaultInputQuantity ?? 1
      startForm.remark = ''
      // 清理校验
      startFormRef.value?.clearValidate?.()
    }
  }
)

const handleSubmit = () => {
  startFormRef.value?.validate((valid: boolean) => {
    if (!valid) return
    // derive equipmentName
    const eq = props.equipmentOptions?.find((e) => e.id === startForm.equipmentId)
    const equipmentName = eq ? eq.name : ''
    emit('submit', {
      workerName: startForm.workerName,
      equipmentId: startForm.equipmentId,
      equipmentName,
      inputQuantity: startForm.inputQuantity,
      remark: startForm.remark
    })
  })
}
</script>

<style lang="scss" scoped>
.mobile-drawer-footer {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid #f0f0f0;
}
</style>
