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

interface Props {
  detail: AdminTaskDetail
  canViewSensitiveTaskData: boolean
  claimUrl: string
  claimLinkInvalid: boolean
}

defineProps<Props>()
</script>

<template>
  <section class="info-card">
    <h3>任务信息</h3>
    <table class="data-table">
      <tbody>
        <tr>
          <th>商品</th>
          <td>{{ detail.orderItem?.skuName || '-' }}</td>
        </tr>
        <tr>
          <th>SKU</th>
          <td>{{ detail.orderItem?.skuCode || '-' }}</td>
        </tr>
        <tr>
          <th>任务执行器</th>
          <td>{{ detail.task.executorKey || '-' }}</td>
        </tr>
        <tr>
          <th>履约状态</th>
          <td>
            <AdminStatusTag :status="detail.task.deliveryStatus || ''" />
          </td>
        </tr>
        <tr>
          <th>结果代码</th>
          <td>{{ detail.task.resultCode || '-' }}</td>
        </tr>
        <tr>
          <th>结果说明</th>
          <td>{{ detail.task.resultMessage || '-' }}</td>
        </tr>
        <tr v-if="canViewSensitiveTaskData">
          <th>库存凭据</th>
          <td>{{ detail.inventory?.displayValue || '-' }}</td>
        </tr>
        <tr v-if="canViewSensitiveTaskData">
          <th>凭据类型</th>
          <td>{{ detail.inventory?.credentialType || '-' }}</td>
        </tr>
        <tr v-if="canViewSensitiveTaskData">
          <th>库存状态</th>
          <td>
            <AdminStatusTag :status="detail.inventory?.status || ''" />
          </td>
        </tr>
        <tr v-if="canViewSensitiveTaskData">
          <th>Claim Token</th>
          <td>{{ detail.claimToken?.token || '-' }}</td>
        </tr>
        <tr v-else>
          <th>库存 / Token</th>
          <td>客服账号不可查看库存凭据与原始领取 Token</td>
        </tr>
        <tr>
          <th>Token 状态</th>
          <td>
            <AdminStatusTag :status="detail.claimToken?.status || ''" />
          </td>
        </tr>
        <tr>
          <th>Token 过期</th>
          <td>{{ formatAdminDateTime(detail.claimToken?.expiredAt) }}</td>
        </tr>
        <tr>
          <th>领取链接</th>
          <td>
            <a
              v-if="claimUrl"
              class="claim-link"
              :href="claimUrl"
              target="_blank"
              rel="noreferrer"
              >{{ claimUrl }}</a
            >
            <span v-else-if="claimLinkInvalid">已失效</span>
            <span v-else>-</span>
          </td>
        </tr>
        <tr>
          <th>浏览器会话</th>
          <td>{{ detail.task.browserSessionId || '-' }}</td>
        </tr>
        <tr>
          <th>用户打开链接</th>
          <td>{{ formatAdminDateTime(detail.task.claimedAt) }}</td>
        </tr>
        <tr>
          <th>用户提交绑定</th>
          <td>{{ formatAdminDateTime(detail.task.roleConfirmedAt) }}</td>
        </tr>
        <tr>
          <th>完整绑定成功</th>
          <td>{{ formatAdminDateTime(detail.task.redeemedAt) }}</td>
        </tr>
        <tr>
          <th>截图路径</th>
          <td>{{ detail.task.screenshotPath || '-' }}</td>
        </tr>
      </tbody>
    </table>
  </section>
</template>

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