order_site/apps/frontend/src/components/admin/AdminPlatformAgisoSection.vue

<script setup lang="ts">
import type { AdminAgisoObservedShopItem } from '@/types/admin'
import { formatAdminDateTime } from '@/utils/admin-time'

import type { EditableDefaults, EditableShop } from '@/composables/admin/platform-shops/types'

type Props = {
  agisoFilePath: string
  defaults: EditableDefaults
  shops: EditableShop[]
  observedShops: AdminAgisoObservedShopItem[]
  saving: boolean
  isShopExpanded: (id: string) => boolean
  toggleShop: (id: string) => void
  expandAllShops: () => void
  collapseAllShops: () => void
  describeShop: (shop: EditableShop) => string
  removeShop: (id: string) => void
  importObservedShop: (item: AdminAgisoObservedShopItem) => void
  saveAgisoConfigs: () => void | Promise<void>
}

defineProps<Props>()
</script>

<template>
  <section class="meta-card">
    <div class="meta-line">
      <span class="meta-label">配置文件</span>
      <code>{{ agisoFilePath || '-' }}</code>
    </div>
    <div class="meta-line">
      <span class="meta-label">职责</span>
      <span>管理 Agiso 默认消息模板、店铺 AccessToken 以及店铺级模板覆盖。该区域不处理 khhao 登录与拉单。</span>
    </div>
  </section>

  <section class="table-card">
    <div class="section-title-row">
      <div>
        <h3>默认消息模板</h3>
        <p>Agiso 店铺未单独配置时，统一使用这里的领取消息与自动发货消息模板。</p>
      </div>
    </div>

    <div class="form-grid">
      <label class="field-block field-wide">
        <span>默认领取链接消息模板</span>
        <textarea
          v-model="defaults.messageTemplate"
          class="text-area"
          placeholder="例如：您的订单 {platformOrderId} 已创建领取链接，请尽快打开并完成领取：{claimUrl}"
        />
      </label>

      <label class="field-block field-wide">
        <span>默认自动发货消息模板</span>
        <textarea
          v-model="defaults.autoDeliveryMessageTemplate"
          class="text-area"
          placeholder="例如：您的订单 {platformOrderId} 已完成自动发货，请注意查收。"
        />
      </label>
    </div>
  </section>

  <section class="table-card">
    <div class="section-title-row">
      <div>
        <h3>Agiso 店铺列表</h3>
        <p>每家店铺可单独配置 AccessToken 和模板覆盖。建议先用“近期识别到的店铺”导入，再补 AccessToken。</p>
      </div>
      <div class="section-actions">
        <el-button :disabled="shops.length === 0" text @click="expandAllShops">全部展开</el-button>
        <el-button :disabled="shops.length === 0" text @click="collapseAllShops">全部折叠</el-button>
        <el-button :loading="saving" round type="primary" @click="saveAgisoConfigs">保存 Agiso 配置</el-button>
      </div>
    </div>

    <div v-if="shops.length === 0" class="empty-inline">当前还没有 Agiso 店铺配置，先新增一条。</div>

    <div v-for="shop in shops" :key="shop.id" class="shop-card">
      <button type="button" class="shop-summary" @click="toggleShop(shop.id)">
        <div class="shop-summary-main">
          <strong>{{ shop.shopName || shop.shopId || '未命名店铺' }}</strong>
          <span class="cell-subtle">ID: {{ shop.shopId || '未填写' }}</span>
        </div>
        <div class="shop-summary-side">
          <span class="shop-status" :class="{ 'is-disabled': !shop.enabled }">
            {{ shop.enabled ? '已启用' : '已停用' }}
          </span>
          <span class="shop-summary-copy">{{ describeShop(shop) }}</span>
          <span class="shop-toggle">{{ isShopExpanded(shop.id) ? '收起' : '展开' }}</span>
        </div>
      </button>

      <div v-if="isShopExpanded(shop.id)" class="shop-body">
        <div class="form-grid">
          <label class="field-block">
            <span>店铺 ID</span>
            <input v-model="shop.shopId" class="text-input" placeholder="例如 693760716" />
          </label>

          <label class="field-block">
            <span>店铺名称</span>
            <input v-model="shop.shopName" class="text-input" placeholder="例如 大锤商行" />
          </label>

          <label class="field-block field-wide">
            <span>AccessToken</span>
            <input v-model="shop.accessToken" class="text-input" placeholder="AldsIdle..." />
          </label>

          <label class="field-block field-wide">
            <span>领取链接消息模板</span>
            <textarea
              v-model="shop.messageTemplate"
              class="text-area"
              placeholder="留空则沿用默认领取链接模板"
            />
          </label>

          <label class="field-block field-wide">
            <span>自动发货消息模板</span>
            <textarea
              v-model="shop.autoDeliveryMessageTemplate"
              class="text-area"
              placeholder="留空则沿用默认自动发货模板"
            />
          </label>
        </div>

        <div class="shop-actions">
          <label class="checkbox-line">
            <input v-model="shop.enabled" type="checkbox" />
            <span>启用店铺级覆盖</span>
          </label>
          <el-button link type="danger" @click="removeShop(shop.id)">删除</el-button>
        </div>
      </div>
    </div>
  </section>

  <section class="table-card">
    <div class="section-title-row">
      <div>
        <h3>近期识别到的 Agiso 店铺</h3>
        <p>从 webhook 自动识别出的店铺，可一键导入到上方店铺列表。</p>
      </div>
    </div>

    <table class="data-table">
      <thead>
        <tr>
          <th>店铺</th>
          <th>Webhook 次数</th>
          <th>最近出现时间</th>
          <th>状态</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in observedShops" :key="item.shopId">
          <td>
            <div class="cell-stack">
              <strong>{{ item.displayShopName || item.shopId }}</strong>
              <span class="cell-subtle">ID: {{ item.shopId }}</span>
            </div>
          </td>
          <td>{{ item.webhookEventCount }}</td>
          <td>{{ formatAdminDateTime(item.latestSeenAt) }}</td>
          <td>{{ item.configured ? '已配置' : '未配置' }}</td>
          <td>
            <el-button v-if="!item.configured" link type="primary" @click="importObservedShop(item)">导入到店铺</el-button>
            <span v-else class="cell-subtle">已存在</span>
          </td>
        </tr>
        <tr v-if="observedShops.length === 0">
          <td colspan="5" class="empty-inline">最近还没有识别到可用店铺。</td>
        </tr>
      </tbody>
    </table>
  </section>
</template>