<template>
  <div class="implement-page">
    <div class="implement-form">
      <!-- 步骤一：选择实施采购方式 -->
      <div class="step-section">
        <div class="step-header">
          <span class="step-number" :class="{ completed: step1Completed && !isEditingStep1 }">1</span>
          <span class="step-title">选择实施采购方式</span>
          <el-tag v-if="step1Completed && !isEditingStep1" type="success" size="small">已完成</el-tag>
        </div>
        <div class="step-content">
          <el-form-item label="实施采购方式" required>
            <el-radio-group v-model="implementType" :disabled="step1Completed && !isEditingStep1">
              <el-radio :label="IMPLEMENT_TYPE.SELF_ORGANIZED">自行组织采购</el-radio>
              <el-radio :label="IMPLEMENT_TYPE.ENTRUST_AGENT">委托代理采购</el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- 步骤一未完成：显示保存按钮 -->
          <el-form-item v-if="!step1Completed">
            <el-button type="primary" :loading="saveTypeSubmitting" :disabled="!implementType" @click="handleSaveImplementType">保存</el-button>
          </el-form-item>
          <!-- 步骤一已完成但正在编辑：显示修改确认按钮 -->
          <el-form-item v-else-if="isEditingStep1">
            <el-button type="primary" :loading="saveTypeSubmitting" :disabled="!implementType" @click="handleReSaveImplementType">确认修改</el-button>
            <el-button @click="cancelEditStep1">取消</el-button>
          </el-form-item>
          <!-- 步骤一已完成且未在编辑：显示修改按钮 -->
          <el-form-item v-else>
            <el-button type="default" @click="startEditStep1">修改</el-button>
          </el-form-item>
        </div>
      </div>

      <!-- 步骤二：分配代理（仅委托代理采购且步骤一完成时显示） -->
      <div v-if="showStep2" class="step-section">
        <div class="step-header">
          <span class="step-number" :class="{ completed: step2Completed }">2</span>
          <span class="step-title">分配代理机构</span>
          <el-tag v-if="step2Completed" type="success" size="small">已完成</el-tag>
        </div>
        <div class="step-content">
          <el-form-item label="分配方式">
            <el-radio-group v-model="agentMode">
              <el-radio label="designated">指定代理</el-radio>
              <el-radio label="random">随机分配</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="agentMode === 'designated'" label="选择代理">
            <el-select v-model="selectedAgentId" placeholder="请选择招标代理" filterable style="width: 100%" :loading="agentListLoading">
              <el-option v-for="item in agentList" :key="item.id" :label="item.agentName" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item v-if="agentMode === 'random'" label="随机结果">
            <div class="agent-roller">
              <span v-if="rollingAgentName" class="rolling">{{ rollingAgentName }}</span>
              <span v-else-if="assignedAgentName" class="assigned">已分配：{{ assignedAgentName }}</span>
              <span v-else class="placeholder">点击下方按钮进行随机分配</span>
            </div>
          </el-form-item>
          <el-form-item v-if="applyRow?.agentName" label="当前代理">
            <el-tag>{{ applyRow.agentName }}</el-tag>
            <!-- 发送状态 -->
            <el-tag v-if="applyRow?.agentSent === YES_NO.YES" type="success" style="margin-left: 8px;">已发送</el-tag>
            <el-tag v-else type="info" style="margin-left: 8px;">未发送</el-tag>
          </el-form-item>
          <!-- 指定代理按钮：未发送招标代理时可操作 -->
          <el-form-item v-if="agentMode === 'designated' && canReassignAgent">
            <el-button type="primary" :loading="assignAgentSubmitting" :disabled="!selectedAgentId" @click="handleAssignAgentDesignated">{{ step2Completed ? '重新指定' : '指定代理' }}</el-button>
          </el-form-item>
          <!-- 随机分配按钮：未发送招标代理时可操作 -->
          <el-form-item v-if="agentMode === 'random' && canReassignAgent">
            <el-button type="primary" :loading="assignAgentSubmitting" @click="handleAssignAgentRandom">随机分配</el-button>
          </el-form-item>
          <!-- 发送招标代理按钮 -->
          <el-form-item v-if="canSendToAgent">
            <el-button type="success" :loading="sendToAgentSubmitting" @click="handleSendToAgent">发送招标代理</el-button>
          </el-form-item>
          <!-- 撤回招标代理按钮 -->
          <el-form-item v-if="canRevokeAgent">
            <el-button type="warning" :loading="revokeAgentSubmitting" @click="handleRevokeAgent">撤回</el-button>
          </el-form-item>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="PurchasingImplement">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { getObj, assignAgent, sendToAgent, revokeAgent, saveImplementType } from '/@/api/purchase/purchasingrequisition'
import { getPage as getAgentPage } from '/@/api/purchase/purchaseagent'
import { useMessage } from '/@/hooks/message'
import { Session } from '/@/utils/storage'

// ==================== 常量定义（与后端枚举保持一致） ====================

/** 实施采购方式（与后端 ImplementTypeEnum 一致） */
const IMPLEMENT_TYPE = {
  /** 自行组织采购 */
  SELF_ORGANIZED: '1',
  /** 委托代理采购 */
  ENTRUST_AGENT: '2',
} as const

/** 采购形式（与后端 PurchaseModeEnum 一致） */
const PURCHASE_MODE = {
  /** 部门自行采购 */
  DEPT_SELF: '1',
  /** 学校统一采购 */
  SCHOOL_UNIFIED: '2',
} as const

/** 采购途径（与后端 PurchaseChannelEnum 一致） */
const PURCHASE_CHANNEL = {
  /** 自行采购 */
  SELF: '1',
  /** 委托采购中心采购 */
  ENTRUST_CENTER: '2',
} as const

/** 是否标识（与后端 CommonConstants.YES/NO 一致） */
const YES_NO = {
  NO: '0',
  YES: '1',
} as const

const emit = defineEmits<{
  (e: 'close'): void
  (e: 'saved'): void
}>()

/** 申请单 ID */
const applyId = ref<string | number | null>(null)

const applyRow = ref<any>(null)
const implementType = ref<string>(IMPLEMENT_TYPE.SELF_ORGANIZED)

/** 步骤控制 */
const step1Completed = ref(false)
const saveTypeSubmitting = ref(false)
const isEditingStep1 = ref(false)
const originalImplementType = ref<string>('')

/** 分配代理相关 */
const agentMode = ref<'designated' | 'random'>('designated')
const selectedAgentId = ref<string>('')
const agentList = ref<any[]>([])
const agentListLoading = ref(false)
const assignAgentSubmitting = ref(false)
const rollingAgentName = ref<string>('')
const assignedAgentName = ref<string>('')
const sendToAgentSubmitting = ref(false)
const revokeAgentSubmitting = ref(false)
let rollInterval: ReturnType<typeof setInterval> | null = null

/** 是否显示步骤二：委托代理采购 且 步骤一已完成 且 不在编辑步骤一 */
const showStep2 = computed(() => {
  return step1Completed.value && !isEditingStep1.value && implementType.value === IMPLEMENT_TYPE.ENTRUST_AGENT
})

/** 步骤二是否完成：已分配代理 */
const step2Completed = computed(() => {
  return !!applyRow.value?.agentId
})

/** 是否可以发送招标代理：委托代理采购 且 已分配代理 且 未发送 */
const canSendToAgent = computed(() => {
  if (implementType.value !== IMPLEMENT_TYPE.ENTRUST_AGENT) return false
  const row = applyRow.value
  if (!row) return false
  return !!row.agentId && row.agentSent !== YES_NO.YES
})

/** 是否可以重新分配代理：未发送招标代理时可操作 */
const canReassignAgent = computed(() => {
  const row = applyRow.value
  if (!row) return false
  return row.agentSent !== YES_NO.YES
})

/** 是否可以撤回招标代理：已发送招标代理时可撤回 */
const canRevokeAgent = computed(() => {
  const row = applyRow.value
  if (!row) return false
  return !!row.agentId && row.agentSent === YES_NO.YES
})

const loadAgentList = async () => {
  agentListLoading.value = true
  try {
    const res = await getAgentPage({ size: 500, current: 1 })
    const records = res?.data?.records ?? res?.records ?? []
    agentList.value = Array.isArray(records) ? records : []
  } catch (_) {
    agentList.value = []
  } finally {
    agentListLoading.value = false
  }
}

/** 随机分配代理 - 滚动动画 */
const startRollingAnimation = (finalAgentName: string) => {
  if (agentList.value.length === 0) return

  if (rollInterval) {
    clearInterval(rollInterval)
    rollInterval = null
  }

  rollingAgentName.value = ''
  assignedAgentName.value = ''

  let currentIndex = 0
  const totalDuration = 2000
  const intervalTime = 80

  rollInterval = setInterval(() => {
    rollingAgentName.value = agentList.value[currentIndex].agentName
    currentIndex = (currentIndex + 1) % agentList.value.length
  }, intervalTime)

  setTimeout(() => {
    if (rollInterval) {
      clearInterval(rollInterval)
      rollInterval = null
    }
    rollingAgentName.value = ''
    assignedAgentName.value = finalAgentName
  }, totalDuration)
}

const handleAssignAgentRandom = async () => {
  const id = applyRow.value?.id ?? applyId.value
  if (!id) {
    useMessage().warning('无法获取申请单ID')
    return
  }
  assignAgentSubmitting.value = true
  try {
    const res = await assignAgent(id, 'random')
    const finalAgentName = res?.data?.agentName || res?.agentName || ''
    if (finalAgentName) {
      startRollingAnimation(finalAgentName)
    } else {
      useMessage().success('随机分配代理成功')
      await loadData()
    }
  } catch (e: any) {
    useMessage().error(e?.msg || '随机分配代理失败')
  } finally {
    assignAgentSubmitting.value = false
  }
}

const handleAssignAgentDesignated = async () => {
  const id = applyRow.value?.id ?? applyId.value
  if (!id) {
    useMessage().warning('无法获取申请单ID')
    return
  }
  if (!selectedAgentId.value) {
    useMessage().warning('请选择招标代理')
    return
  }
  assignAgentSubmitting.value = true
  try {
    await assignAgent(id, 'designated', selectedAgentId.value)
    useMessage().success('指定代理成功')
    await loadData()
  } catch (e: any) {
    useMessage().error(e?.msg || '指定代理失败')
  } finally {
    assignAgentSubmitting.value = false
  }
}

/** 发送招标代理 */
const handleSendToAgent = async () => {
  const id = applyRow.value?.id ?? applyId.value
  if (!id) {
    useMessage().warning('无法获取申请单ID')
    return
  }
  sendToAgentSubmitting.value = true
  try {
    await sendToAgent(id)
    useMessage().success('已发送招标代理')
    await loadData()
  } catch (e: any) {
    useMessage().error(e?.msg || '发送招标代理失败')
  } finally {
    sendToAgentSubmitting.value = false
  }
}

/** 撤回招标代理 */
const handleRevokeAgent = async () => {
  const id = applyRow.value?.id ?? applyId.value
  if (!id) {
    useMessage().warning('无法获取申请单ID')
    return
  }
  revokeAgentSubmitting.value = true
  try {
    await revokeAgent(id)
    useMessage().success('已撤回招标代理')
    await loadData()
  } catch (e: any) {
    useMessage().error(e?.msg || '撤回招标代理失败')
  } finally {
    revokeAgentSubmitting.value = false
  }
}

/** 步骤一：保存实施采购方式 */
const handleSaveImplementType = async () => {

  const id = applyRow.value?.id ?? applyId.value

  if (!id) {
    useMessage().warning('无法获取申请单ID')
    return
  }
  if (!implementType.value) {
    useMessage().warning('请选择实施采购方式')
    return
  }
  saveTypeSubmitting.value = true
  try {

    await saveImplementType(id, implementType.value)
    useMessage().success('保存成功')
    step1Completed.value = true
    originalImplementType.value = implementType.value
    emit('saved')
    // 如果是委托代理采购，加载代理列表
    if (implementType.value === IMPLEMENT_TYPE.ENTRUST_AGENT) {
      await loadAgentList()
    }
  } catch (e: any) {
    useMessage().error(e?.msg || '保存失败')
  } finally {
    saveTypeSubmitting.value = false
  }
}

/** 开始编辑步骤一 */
const startEditStep1 = () => {
  originalImplementType.value = implementType.value
  isEditingStep1.value = true
}

/** 取消编辑步骤一 */
const cancelEditStep1 = () => {
  implementType.value = originalImplementType.value
  isEditingStep1.value = false
}

/** 重新保存实施采购方式（修改后确认） */
const handleReSaveImplementType = async () => {
  const id = applyRow.value?.id ?? applyId.value
  if (!id) {
    useMessage().warning('无法获取申请单ID')
    return
  }
  if (!implementType.value) {
    useMessage().warning('请选择实施采购方式')
    return
  }
  saveTypeSubmitting.value = true
  try {
    await saveImplementType(id, implementType.value)
    useMessage().success('修改成功')
    isEditingStep1.value = false
    originalImplementType.value = implementType.value
    emit('saved')
    // 如果从委托代理采购改为自行组织采购，清空代理相关状态
    if (implementType.value === IMPLEMENT_TYPE.SELF_ORGANIZED) {
      assignedAgentName.value = ''
      selectedAgentId.value = ''
    }
    // 如果改为委托代理采购，加载代理列表
    if (implementType.value === IMPLEMENT_TYPE.ENTRUST_AGENT) {
      await loadAgentList()
    }
  } catch (e: any) {
    useMessage().error(e?.msg || '修改失败')
  } finally {
    saveTypeSubmitting.value = false
  }
}

const loadData = async () => {
  const id = applyId.value
  if (!id) {
    useMessage().warning('缺少申请单ID')
    return
  }
  try {
    const detailRes = await getObj(id)

    applyRow.value = detailRes?.data ? { ...detailRes.data, id: detailRes.data.id ?? id } : { id }

    const row = applyRow.value
    if (row?.implementType) {
      implementType.value = row.implementType
      originalImplementType.value = row.implementType
      step1Completed.value = true
    }

    // 加载代理列表并回显已分配代理（委托代理采购时）
    if (step1Completed.value && implementType.value === IMPLEMENT_TYPE.ENTRUST_AGENT) {
      const canLoadAgent = row.purchaseMode === PURCHASE_MODE.SCHOOL_UNIFIED
        || (row.purchaseMode === PURCHASE_MODE.DEPT_SELF && row.purchaseChannel === PURCHASE_CHANNEL.ENTRUST_CENTER)
      if (canLoadAgent) {
        await loadAgentList()
        if (row?.agentId) {
          selectedAgentId.value = row.agentId
          assignedAgentName.value = row.agentName || ''
        }
      }
    }
  } catch (_) {
    console.log(_)
  }
}

/** 打开弹窗 */
const open = async (row: { id: string | number }) => {
  applyId.value = row?.id ?? null
  applyRow.value = null
  implementType.value = IMPLEMENT_TYPE.SELF_ORGANIZED
  step1Completed.value = false
  isEditingStep1.value = false
  agentMode.value = 'designated'
  selectedAgentId.value = ''
  agentList.value = []
  assignedAgentName.value = ''
  rollingAgentName.value = ''

  await loadData()
}

/** 确定 */
const handleConfirm = async () => {
  const row = applyRow.value
  if (!row?.id && !applyId.value) return
  const id = row?.id ?? applyId.value
  if (!id) return

  // 步骤一未完成时，先保存步骤一
  if (!step1Completed.value) {
    if (!implementType.value) {
      useMessage().warning('请选择实施采购方式')
      return
    }
    saveTypeSubmitting.value = true
    try {
      await saveImplementType(id, implementType.value)
      step1Completed.value = true
      emit('saved')
    } catch (e: any) {
      useMessage().error(e?.msg || '保存实施采购方式失败')
      return
    } finally {
      saveTypeSubmitting.value = false
    }
  }

  useMessage().success('实施采购已保存')
  emit('close')
}

onUnmounted(() => {
  if (rollInterval) {
    clearInterval(rollInterval)
    rollInterval = null
  }
})

defineExpose({
  open,
  handleConfirm,
})
</script>

<style scoped lang="scss">
.implement-page {
  padding: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.implement-form {
  flex: 1;
  .mb-2 {
    margin-bottom: 8px;
  }
}

.step-section {
  margin-bottom: 24px;
  padding: 16px;
  background: var(--el-fill-color-lighter);
  border-radius: 8px;
}

.step-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.step-number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--el-color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;

  &.completed {
    background: var(--el-color-success);
  }
}

.step-title {
  font-weight: 500;
  font-size: 16px;
  color: var(--el-text-color-primary);
}

.step-content {
  padding-left: 40px;
}

.agent-roller {
  padding: 12px 16px;
  background: var(--el-fill-color-light);
  border-radius: 4px;
  min-height: 40px;
  display: flex;
  align-items: center;

  .rolling {
    font-size: 16px;
    font-weight: 500;
    color: var(--el-color-primary);
    animation: blink 0.1s infinite;
  }

  .assigned {
    font-size: 16px;
    font-weight: 600;
    color: var(--el-color-success);
  }

  .placeholder {
    color: var(--el-text-color-placeholder);
  }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
</style>