<template>
  <div>
    <div class="flex items-center justify-between mb-4">
      <h1 class="text-xl font-bold text-gray-800">预约管理</h1>
    </div>

    <el-card shadow="never" class="mb-3">
      <el-row :gutter="12" align="middle">
        <el-col :span="4">
          <el-select v-model="statusFilter" placeholder="审批状态" clearable class="w-full">
            <el-option label="全部" value="" />
            <el-option label="待审核" :value="0" />
            <el-option label="已通过" :value="1" />
            <el-option label="已拒绝" :value="2" />
            <el-option label="已取消" :value="3" />
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="page = 1; fetchData()">查询</el-button>
        </el-col>
      </el-row>
    </el-card>

    <div class="bg-white rounded-xl shadow-sm border overflow-hidden">
      <el-table :data="appointments" stripe class="w-full" v-loading="loading">
        <el-table-column prop="id" label="ID" width="60" />
        <el-table-column label="外部来访人员" min-width="180">
          <template #default="{ row }">
            <div class="flex flex-col text-sm leading-relaxed">
              <template v-if="parseVisitors(row.visitor_info)?.length">
                <span class="text-gray-800">
                  {{ parseVisitors(row.visitor_info)[0].name }}
                  <span v-if="parseVisitors(row.visitor_info).length > 1" class="text-gray-400 font-normal">
                    （等{{ parseVisitors(row.visitor_info).length }}人）
                  </span>
                </span>
                <span v-if="parseVisitors(row.visitor_info)[0]?.company" class="text-gray-400 text-xs">{{ parseVisitors(row.visitor_info)[0]?.company }}</span>
              </template>
              <span v-else class="text-gray-800">-</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="公司接待人员" min-width="100">
          <template #default="{ row }">
            <span>{{ parseEmployee(row.employee_info)?.name || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="来访事由" min-width="140">
          <template #default="{ row }">
            <span>{{ row.visit_purpose || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="来访时间" min-width="130">
          <template #default="{ row }">
            <span class="text-sm">{{ formatTime(row.visit_start_time) }} ~ {{ formatTime(row.visit_end_time) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="80">
          <template #default="{ row }">
            <el-tag :type="['warning','success','danger','info'][row.status]">
              {{ ['待审核','已通过','已拒绝','已取消'][row.status] }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button size="small" type="primary" link @click="openDetail(row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div v-if="total > 0" class="p-4 flex justify-center">
        <el-pagination
          v-model:current-page="page"
          :page-size="pageSize"
          :total="total"
          layout="total,prev,pager,next"
          @current-change="fetchData"
        />
      </div>
    </div>

    <!-- 详情弹窗 -->
    <el-dialog v-model="detailVisible" title="预约详情" width="600px" :close-on-click-modal="false">
      <template v-if="detailRow">
        <div class="space-y-5">
          <!-- 基本信息 -->
          <div>
            <div class="flex items-center gap-2 mb-3">
              <div class="w-1 h-4 bg-blue-500 rounded" />
              <span class="text-sm font-medium text-gray-700">基本信息</span>
            </div>
            <div class="grid grid-cols-2 gap-x-6 gap-y-2 text-sm bg-gray-50 rounded-lg p-4">
              <div><span class="text-gray-400">预约ID：</span><span class="text-gray-700">{{ detailRow.id }}</span></div>
              <div><span class="text-gray-400">来访事由：</span><span class="text-gray-700">{{ detailRow.visit_purpose || '-' }}</span></div>
              <div class="col-span-2">
                <span class="text-gray-400">来访时间：</span>
                <span class="text-gray-700">{{ formatTime(detailRow.visit_start_time) }} ~ {{ formatTime(detailRow.visit_end_time) }}</span>
              </div>
              <div>
                <span class="text-gray-400">状态：</span>
                <el-tag :type="['warning','success','danger','info'][detailRow.status]" size="small">
                  {{ ['待审核','已通过','已拒绝','已取消'][detailRow.status] }}
                </el-tag>
              </div>
              <div><span class="text-gray-400">创建时间：</span><span class="text-gray-700">{{ formatTime(detailRow.created_at) }}</span></div>
            </div>
          </div>

          <!-- 访客信息 -->
          <div v-if="parsedVisitors?.length">
            <div class="flex items-center gap-2 mb-3">
              <div class="w-1 h-4 bg-blue-500 rounded" />
              <span class="text-sm font-medium text-gray-700">外部来访人员</span>
            </div>
            <div class="bg-gray-50 rounded-lg p-4 space-y-2">
              <div v-for="(v, i) in parsedVisitors" :key="i" class="flex items-center gap-3 text-sm">
                <span class="text-gray-800 font-medium">{{ v.name }}</span>
                <span v-if="v.phone" class="text-gray-500">{{ v.phone }}</span>
                <span v-if="v.company" class="text-gray-400">{{ v.company }}</span>
              </div>
            </div>
          </div>

          <!-- 被访人 -->
          <div v-if="parsedEmployee">
            <div class="flex items-center gap-2 mb-3">
              <div class="w-1 h-4 bg-blue-500 rounded" />
              <span class="text-sm font-medium text-gray-700">公司接待人员</span>
            </div>
            <div class="bg-gray-50 rounded-lg p-4 text-sm">
              <span class="text-gray-800 font-medium">{{ parsedEmployee.name }}</span>
              <span v-if="parsedEmployee.phone" class="text-gray-500 ml-2">{{ parsedEmployee.phone }}</span>
              <span v-if="parsedEmployee.department" class="text-gray-400 ml-2">{{ parsedEmployee.department }}</span>
            </div>
          </div>

          <!-- 创建人 -->
          <div v-if="parsedCreator">
            <div class="flex items-center gap-2 mb-3">
              <div class="w-1 h-4 bg-blue-500 rounded" />
              <span class="text-sm font-medium text-gray-700">创建人</span>
            </div>
            <div class="bg-gray-50 rounded-lg p-4 text-sm">
              <span class="text-gray-800 font-medium">{{ parsedCreator.name }}</span>
              <span v-if="parsedCreator.phone" class="text-gray-500 ml-2">{{ parsedCreator.phone }}</span>
            </div>
          </div>

          <!-- 携带物品 -->
          <div v-if="parsedGoods?.length">
            <div class="flex items-center gap-2 mb-3">
              <div class="w-1 h-4 bg-blue-500 rounded" />
              <span class="text-sm font-medium text-gray-700">携带物品</span>
            </div>
            <div class="bg-gray-50 rounded-lg p-4 space-y-1.5">
              <div v-for="(g, i) in parsedGoods" :key="i" class="text-sm">
                <span class="text-gray-800">{{ g.name }}</span>
                <span v-if="g.quantity" class="text-gray-500 ml-1">x{{ g.quantity }}</span>
                <span v-if="g.remark" class="text-gray-400 ml-2">{{ g.remark }}</span>
              </div>
            </div>
          </div>

          <!-- 车辆信息 -->
          <div v-if="parsedVehicles?.length">
            <div class="flex items-center gap-2 mb-3">
              <div class="w-1 h-4 bg-blue-500 rounded" />
              <span class="text-sm font-medium text-gray-700">车辆信息</span>
            </div>
            <div class="bg-gray-50 rounded-lg p-4 space-y-1.5">
              <div v-for="(v, i) in parsedVehicles" :key="i" class="text-sm">
                <span class="text-gray-400">车辆{{ i + 1 }}：</span>
                <span class="text-gray-800">{{ [v.brand, v.plate, v.color].filter(Boolean).join(' ') }}</span>
              </div>
            </div>
          </div>

          <!-- 到访区域 -->
          <div v-if="parsedAreas?.length">
            <div class="flex items-center gap-2 mb-3">
              <div class="w-1 h-4 bg-blue-500 rounded" />
              <span class="text-sm font-medium text-gray-700">到访区域</span>
            </div>
            <div class="bg-gray-50 rounded-lg p-4 text-sm text-gray-700">{{ parsedAreas.join('、') }}</div>
          </div>

          <!-- 备注 -->
          <div v-if="detailRow.remark">
            <div class="flex items-center gap-2 mb-3">
              <div class="w-1 h-4 bg-blue-500 rounded" />
              <span class="text-sm font-medium text-gray-700">备注</span>
            </div>
            <div class="bg-gray-50 rounded-lg p-4 text-sm text-gray-600">{{ detailRow.remark }}</div>
          </div>

          <!-- 审核意见 -->
          <div v-if="detailRow.comment">
            <div class="flex items-center gap-2 mb-3">
              <div class="w-1 h-4 bg-blue-500 rounded" />
              <span class="text-sm font-medium text-gray-700">审核意见</span>
            </div>
            <div class="bg-gray-50 rounded-lg p-4 text-sm text-gray-600">{{ detailRow.comment }}</div>
          </div>

          <!-- 审批进度 -->
          <div>
            <div class="flex items-center gap-2 mb-3">
              <div class="w-1 h-4 bg-blue-500 rounded" />
              <span class="text-sm font-medium text-gray-700">审批进度</span>
            </div>
            <div v-if="workflowTasks.length === 0 && !workflowLoading" class="text-sm text-gray-400 bg-gray-50 rounded-lg p-4">暂无审批记录</div>
            <div v-else-if="workflowLoading" class="text-sm text-gray-400 bg-gray-50 rounded-lg p-4">加载中...</div>
            <div v-else class="space-y-0">
              <div
                v-for="(t, idx) in workflowTasks"
                :key="t.id"
                class="flex gap-3 pb-4"
                :class="{ 'pb-0': idx === workflowTasks.length - 1 }"
              >
                <div class="flex flex-col items-center">
                  <div
                    class="w-3 h-3 rounded-full border-2 shrink-0 mt-1"
                    :class="{
                      'bg-green-500 border-green-500': t.status === 1,
                      'bg-red-500 border-red-500': t.status === 2,
                      'bg-orange-400 border-orange-400': t.status === 0,
                      'bg-gray-200 border-gray-300': t.status === 3 || !t.status,
                    }"
                  />
                  <div v-if="idx < workflowTasks.length - 1" class="w-0.5 flex-1 mt-1"
                    :class="t.status === 1 ? 'bg-green-300' : 'bg-gray-200'" />
                </div>
                <div class="flex-1 min-w-0">
                  <div class="flex items-center gap-2">
                    <span class="text-sm font-medium text-gray-700">{{ t.node_name }}</span>
                    <el-tag v-if="t.status === 0" type="warning" size="small">待审批</el-tag>
                    <el-tag v-else-if="t.status === 1" type="success" size="small">已通过</el-tag>
                    <el-tag v-else-if="t.status === 2" type="danger" size="small">已拒绝</el-tag>
                    <el-tag v-else size="small" type="info">已取消</el-tag>
                  </div>
                  <div class="text-xs text-gray-400 mt-0.5">
                    <template v-if="t.assignee">{{ t.assignee.real_name || t.assignee.nickname }}</template>
                    <template v-if="t.handled_at"> · {{ formatTime(t.handled_at) }}</template>
                  </div>
                  <div v-if="t.comment" class="text-xs text-gray-500 mt-0.5 bg-white rounded px-2 py-1 border">
                    {{ t.comment }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import request from '@/utils/request'
import { onMounted } from 'vue'

const appointments = ref<any[]>([])
const loading = ref(false)
const page = ref(1)
const pageSize = ref(10)
const total = ref(0)
const statusFilter = ref('')


const detailVisible = ref(false)
const detailRow = ref<any>(null)
const workflowTasks = ref<any[]>([])
const workflowLoading = ref(false)
const parsedVisitors = computed(() => detailRow.value ? parseVisitors(detailRow.value.visitor_info) : null)
const parsedEmployee = computed(() => detailRow.value ? parseEmployee(detailRow.value.employee_info) : null)
const parsedCreator = computed(() => detailRow.value ? parseCreator(detailRow.value.creator_info) : null)
const parsedAreas = computed(() => detailRow.value ? parseAreas(detailRow.value.areas_info) : null)
const parsedGoods = computed(() => detailRow.value ? parseGoods(detailRow.value.goods_info) : null)
const parsedVehicles = computed(() => detailRow.value ? parseVehicles(detailRow.value.vehicle_info) : null)

function parseVisitors(info) {
  if (!info) return null
  try {
    const parsed = JSON.parse(info)
    // 对象格式：{ name, phone, company, visitors: [...] }
    if (!Array.isArray(parsed) && parsed?.visitors) {
      return parsed.visitors
    }
    // 已经是数组
    if (Array.isArray(parsed)) return parsed
    // 单个对象包装为数组
    return [parsed]
  } catch { return null }
}
function parseEmployee(info) { if (!info) return null; try { return JSON.parse(info) } catch { return null } }
function parseCreator(info) { if (!info) return null; try { const p = JSON.parse(info); return p.name ? p : null } catch { return null } }
function parseAreas(info) { if (!info) return null; try { return JSON.parse(info).map(a => a.area || a) } catch { return null } }
function parseGoods(info) { if (!info) return null; try { return JSON.parse(info) } catch { return null } }
function parseVehicles(info) { if (!info) return null; try { return JSON.parse(info) } catch { return null } }
function formatTime(t) {
  if (!t) return '-'
  const d = new Date(t)
  const pad = n => n.toString().padStart(2, '0')
  return `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`
}
async function fetchData() {
  loading.value = true
  try {
    const params = { page: page.value, page_size: pageSize.value }
    if (statusFilter.value !== '') params.status = statusFilter.value
    const res = await request.Get('/v1/admin/appointments', { params })
    appointments.value = res?.data?.list || []
    total.value = res?.data?.total || 0
  } catch { ElMessage.error('加载失败') }
  finally { loading.value = false }
}

// 加载工作流审批记录
async function openDetail(row) {
  detailRow.value = row
  detailVisible.value = true
  workflowTasks.value = []
  workflowLoading.value = true
  try {
    // 查询工作流实例
    const instances = await request.Get('/v1/workflow/instances', {
      params: { business_type: 'appointment', business_id: row.id },
    }) as any
    const list = instances?.data?.list || []
    if (list.length > 0) {
      const detail = await request.Get(`/v1/workflow/instances/${list[0].id}`) as any
      workflowTasks.value = detail?.data?.tasks || []
    }
  } catch { /* ignore */ }
  finally { workflowLoading.value = false }
}

onMounted(fetchData)
</script>



