<script setup lang="ts">
import AdminStatusTag from '@/components/admin/AdminStatusTag.vue'
import type { AdminTaskDetail } from '@/types/admin'
import { hasAdminRole } from '@/utils/admin-auth'
import { formatAdminDateTime } from '@/utils/admin-time'

interface Props {
  detail: AdminTaskDetail
  canViewSensitiveTaskData: boolean
  actionLoading: boolean
}

defineProps<Props>()

const emit = defineEmits<{
  releaseBinding: [bindingId: number]
}>()
</script>

<template>
  <section class="info-card">
    <h3>库存绑定</h3>
    <p class="section-copy">
      这里展示任务当前和历史绑定过的库存项，便于核对多库存任务的真实履约轨迹。
    </p>
    <table class="data-table">
      <thead>
        <tr>
          <th>绑定</th>
          <th>角色</th>
          <th>库存项</th>
          <th>状态</th>
          <th>凭据内容</th>
          <th>时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-if="detail.inventoryBindings.length === 0">
          <td colspan="7" class="table-empty">当前任务还没有库存绑定记录</td>
        </tr>
        <tr v-for="binding in detail.inventoryBindings" :key="binding.bindingId">
          <td>
            <div>#{{ binding.bindingId }}</div>
            <div v-if="binding.isPrimary" class="binding-primary">主库存项</div>
          </td>
          <td>
            <div>{{ binding.roleKey || '-' }}</div>
            <div class="binding-meta">数量 {{ binding.quantity }}</div>
          </td>
          <td>
            <div>ID {{ binding.inventoryItemId }}</div>
            <div>{{ binding.skuCode || '-' }}</div>
            <div class="binding-meta">
              {{ binding.credentialType || '-' }} ·
              {{ binding.batchNo || '无批次' }}
            </div>
          </td>
          <td>
            <div class="status-stack">
              <AdminStatusTag :status="binding.bindingStatus" />
              <AdminStatusTag :status="binding.inventoryStatus" />
            </div>
            <div v-if="binding.invalidReason" class="binding-meta">
              {{
                binding.inventoryStatus === 'invalid'
                  ? '作废原因'
                  : binding.inventoryStatus === 'consumed'
                    ? '消耗原因'
                    : '处理原因'
              }}：{{ binding.invalidReason }}
            </div>
          </td>
          <td>
            {{ canViewSensitiveTaskData ? binding.displayValue || '-' : '客服不可见' }}
          </td>
          <td>
            <div>绑定 {{ formatAdminDateTime(binding.createdAt) }}</div>
            <div class="binding-meta">消费 {{ formatAdminDateTime(binding.consumedAt) }}</div>
            <div class="binding-meta">释放 {{ formatAdminDateTime(binding.releasedAt) }}</div>
          </td>
          <td>
            <el-button
              v-if="hasAdminRole('admin') && binding.canRelease"
              :loading="actionLoading"
              link
              @click="emit('releaseBinding', binding.bindingId)"
            >
              释放绑定
            </el-button>
            <span v-else class="binding-meta">-</span>
          </td>
        </tr>
      </tbody>
    </table>
  </section>
</template>

<style scoped src="../AdminTaskDetail.css"></style>
