<template>
  <el-dialog v-model="dialogVisible" title="奖惩操作" width="500px">
    <div v-if="order" style="padding: 0 10px">
      <div style="margin-bottom: 20px; font-size: 14px; color: #606266; line-height: 1.6; background: #fdf6ec; padding: 10px; border-radius: 4px">
        <div>
          奖惩履约者：<span style="font-weight: bold; color: #303133">{{ order.fulfillerName || '未指派' }}</span>
        </div>
        <div style="font-size: 13px; margin-top: 4px">订单号：{{ order.orderNo }}</div>
        <div style="font-size: 13px; margin-top: 4px; display: flex; align-items: center; gap: 6px">
          服务类型：
          <el-tag :type="getTypeTag(order.type)" size="small">{{ getTypeName(order.type) }}</el-tag>
          <el-tag v-if="order.type === 'transport' && order.transportType === 'round'" size="small" effect="plain" type="warning">往返</el-tag>
          <el-tag v-if="order.splitType === 'pick'" size="small" effect="dark" color="#409eff" style="border: none; color: white">接</el-tag>
          <el-tag v-if="order.splitType === 'drop'" size="small" effect="dark" color="#67c23a" style="border: none; color: white">送</el-tag>
          <el-tag v-if="order.type === 'transport' && order.transportType === 'pick' && !order.splitType" size="small" effect="plain">单程接</el-tag>
          <el-tag v-if="order.type === 'transport' && order.transportType === 'drop' && !order.splitType" size="small" effect="plain" type="success"
            >单程送</el-tag
          >
        </div>
      </div>

      <el-form :model="rewardForm" label-width="80px">
        <el-form-item label="操作类型">
          <el-radio-group v-model="rewardForm.type">
            <el-radio :label="fulfillerEnums.ActionType.ADD">增加</el-radio>
            <el-radio :label="fulfillerEnums.ActionType.REDUCE">减少</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="调整项目">
          <el-radio-group v-model="rewardForm.item">
            <el-radio label="points">积分</el-radio>
            <el-radio label="balance">金额 (元)</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="数额" required>
          <el-input-number v-model="rewardForm.value" :min="1" :step="10" />
        </el-form-item>
        <el-form-item label="原因备注" required>
          <el-input v-model="rewardForm.reason" type="textarea" :rows="3" placeholder="请输入奖惩原因..." />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确认执行</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, computed, watch } from 'vue';
import { ElMessage } from 'element-plus';
import fulfillerEnums from '@/json/fulfiller.json';

const props = defineProps({
  visible: Boolean,
  order: Object
});
const emit = defineEmits(['update:visible', 'submit']);

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

const rewardForm = reactive({
  type: fulfillerEnums.ActionType.ADD,
  item: 'points',
  value: 10,
  reason: ''
});

watch(
  () => props.visible,
  (val) => {
    if (val) {
      rewardForm.type = fulfillerEnums.ActionType.ADD;
      rewardForm.item = 'points';
      rewardForm.value = 10;
      rewardForm.reason = '';
    }
  }
);

const getTypeTag = (type) => {
  const map = { transport: '', feeding: 'warning', washing: 'success' };
  return map[type];
};
const getTypeName = (type) => {
  const map = { transport: '宠物接送', feeding: '上门喂遛', washing: '上门洗护' };
  return map[type];
};

const handleSubmit = () => {
  if (!rewardForm.reason) {
    ElMessage.warning('请输入奖惩原因');
    return;
  }
  emit('submit', rewardForm);
  dialogVisible.value = false;
};
</script>
