<template>
  <el-dialog v-model="visible" title="维修派单" width="500px">
    <el-form label-width="80px">
      <el-form-item label="维修类型">
        <el-tag>{{ currentOrder?.typeLabel }}</el-tag>
      </el-form-item>
      <el-form-item label="指派人员">
        <el-select v-model="form.workerId" placeholder="请选择维修工" style="width: 100%">
          <el-option label="张师傅 (水电工) - 待单: 2" value="101" />
          <el-option label="李师傅 (木工) - 待单: 0" value="102" />
          <el-option label="王师傅 (综合) - 待单: 5" value="103" />
        </el-select>
      </el-form-item>
      <el-form-item label="优先级">
        <el-radio-group v-model="form.priority">
          <el-radio label="normal">普通</el-radio>
          <el-radio label="urgent" class="text-danger">紧急</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注">
        <el-input type="textarea" v-model="form.remark" rows="3" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="confirm">确认派单</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

const emit = defineEmits(['success'])

const visible = ref(false)
const currentOrder = ref(null)

const form = reactive({
  workerId: '',
  priority: 'normal',
  remark: ''
})

const open = (row) => {
  currentOrder.value = row
  form.workerId = ''
  form.priority = 'normal'
  form.remark = ''
  visible.value = true
}

const confirm = () => {
  if (!form.workerId) {
    ElMessage.warning('请选择维修工')
    return
  }
  visible.value = false
  ElMessage.success('派单成功！已通知维修师傅')
  emit('success', { ...currentOrder.value, workerId: form.workerId })
}

defineExpose({
  open
})
</script>

<style lang="scss" scoped>
.text-danger { color: var(--el-color-danger); }
</style>
