<template>
  <div class="page">
    <h2 class="page-title">就诊记录</h2>
    <div class="panel">
      <div class="inline-form">
        <t-button theme="primary" @click="load">
          <template #icon><t-icon name="refresh" /></template>
          刷新
        </t-button>
        <t-button variant="outline" @click="openCreate">
          <template #icon><t-icon name="add" /></template>
          新增就诊
        </t-button>
      </div>
      <t-table :data="list" :columns="columns" row-key="id" bordered stripe hover>
        <template #status="{ row }">
          <span class="status-badge" :class="getStatusClass(row.status)">
            {{ getStatusText(row.status) }}
          </span>
        </template>
        <template #paymentStatus="{ row }">
          <span class="status-badge" :class="getPaymentStatusClass(row.paymentStatus)">
            {{ getPaymentStatusText(row.paymentStatus) }}
          </span>
        </template>
        <template #op="{ row }">
          <div class="table-actions">
            <t-button size="small" variant="outline" @click="openEdit(row)">
              <template #icon><t-icon name="edit" /></template>
              编辑
            </t-button>
          </div>
        </template>
      </t-table>
    </div>

    <t-dialog v-model:visible="dialogVisible" :header="dialogTitle" :on-confirm="submit" width="600">
      <t-form :data="form" layout="vertical">
        <div class="form-section-title">基本信息</div>
        <t-form-item label="顾客" required>
          <t-select v-model="form.customerId" :options="customerOptions" placeholder="请选择顾客" clearable />
        </t-form-item>
        <t-form-item label="宠物" required>
          <t-select v-model="form.petId" :options="petOptions" placeholder="请选择宠物" clearable />
        </t-form-item>
        <t-form-item label="医生" required>
          <t-select v-model="form.doctorId" :options="doctorOptions" placeholder="请选择医生" clearable />
        </t-form-item>
        
        <div class="form-section-title">就诊信息</div>
        <t-form-item label="症状描述">
          <t-textarea v-model="form.symptoms" placeholder="请输入症状描述" :maxlength="500" />
        </t-form-item>
        <t-form-item label="诊断结果">
          <t-textarea v-model="form.diagnosis" placeholder="请输入诊断结果" :maxlength="500" />
        </t-form-item>
        <t-form-item label="治疗方案">
          <t-textarea v-model="form.treatmentPlan" placeholder="请输入治疗方案" :maxlength="500" />
        </t-form-item>
        
        <div class="form-section-title">状态信息</div>
        <t-row :gutter="[16, 16]">
          <t-col :span="6">
            <t-form-item label="就诊状态">
              <t-select v-model="form.status" :options="statusOptions" />
            </t-form-item>
          </t-col>
          <t-col :span="6">
            <t-form-item label="支付状态">
              <t-select v-model="form.paymentStatus" :options="payStatusOptions" />
            </t-form-item>
          </t-col>
          <t-col :span="6">
            <t-form-item label="支付方式">
              <t-select v-model="form.paymentMethod" :options="payMethodOptions" />
            </t-form-item>
          </t-col>
          <t-col :span="6">
            <t-form-item label="总金额">
              <t-input-number v-model="form.totalAmount" placeholder="0.00" suffix="元" />
            </t-form-item>
          </t-col>
        </t-row>
      </t-form>
    </t-dialog>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, computed } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';
import { api } from '../api';

const list = ref([] as any[]);
const customers = ref([] as any[]);
const pets = ref([] as any[]);
const doctors = ref([] as any[]);
const dialogVisible = ref(false);
const dialogTitle = ref('新增就诊');
const editingId = ref<number | null>(null);
const form = reactive({
  customerId: '',
  petId: '',
  doctorId: '',
  status: 'IN_PROGRESS',
  paymentStatus: 'UNPAID',
  paymentMethod: 'OFFLINE',
});

const customerOptions = computed(() => {
  return customers.value.map((customer: any) => ({
    label: customer.username || `顾客${customer.id}`,
    value: customer.id
  }));
});

const petOptions = computed(() => {
  return pets.value.map((pet: any) => ({
    label: `${pet.name} (${pet.breed})`,
    value: pet.id
  }));
});

const doctorOptions = computed(() => {
  return doctors.value.map((doctor: any) => ({
    label: doctor.name,
    value: doctor.id
  }));
});

const getStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    'IN_PROGRESS': '就诊中',
    'COMPLETED': '已完成',
    'CANCELLED': '已取消'
  };
  return statusMap[status] || status;
};

const getStatusClass = (status: string) => {
  const classMap: Record<string, string> = {
    'IN_PROGRESS': 'status-pending',
    'COMPLETED': 'status-active',
    'CANCELLED': 'status-cancelled'
  };
  return classMap[status] || 'status-pending';
};

const getPaymentStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    'UNPAID': '未支付',
    'PAID': '已支付',
    'REFUNDING': '退款中',
    'REFUNDED': '已退款',
    'CANCELLED': '已取消'
  };
  return statusMap[status] || status;
};

const getPaymentStatusClass = (status: string) => {
  const classMap: Record<string, string> = {
    'UNPAID': 'status-pending',
    'PAID': 'status-active',
    'REFUNDING': 'status-warning',
    'REFUNDED': 'status-cancelled',
    'CANCELLED': 'status-cancelled'
  };
  return classMap[status] || 'status-pending';
};

const statusOptions = [
  { label: '就诊中', value: 'IN_PROGRESS' },
  { label: '已完成', value: 'COMPLETED' },
];

const payStatusOptions = [
  { label: '未支付', value: 'UNPAID' },
  { label: '已支付', value: 'PAID' },
  { label: '退款中', value: 'REFUNDING' },
  { label: '已退款', value: 'REFUNDED' },
];

const payMethodOptions = [
  { label: '线下', value: 'OFFLINE' },
  { label: '支付宝', value: 'ALIPAY' },
  { label: '微信', value: 'WECHAT' },
];

const columns = [
  { colKey: 'id', title: 'ID', width: 80 },
  { colKey: 'customerId', title: '顾客ID' },
  { colKey: 'petId', title: '宠物ID' },
  { colKey: 'doctorId', title: '医生ID' },
  { colKey: 'status', title: '就诊状态' },
  { colKey: 'paymentStatus', title: '支付状态' },
  { colKey: 'totalAmount', title: '总金额', width: 100 },
  { colKey: 'op', title: '操作', width: 120 },
];

const load = async () => {
  const res = await api.visits({ page: 1, size: 20 });
  if (res.code === 0) list.value = res.data.records || [];
};

const openCreate = () => {
  dialogTitle.value = '新增就诊';
  editingId.value = null;
  form.customerId = '';
  form.petId = '';
  form.doctorId = '';
  form.status = 'IN_PROGRESS';
  form.paymentStatus = 'UNPAID';
  form.paymentMethod = 'OFFLINE';
  dialogVisible.value = true;
};

const openEdit = (row: any) => {
  dialogTitle.value = '编辑就诊';
  editingId.value = row.id;
  form.customerId = row.customerId || '';
  form.petId = row.petId || '';
  form.doctorId = row.doctorId || '';
  form.status = row.status || 'IN_PROGRESS';
  form.paymentStatus = row.paymentStatus || 'UNPAID';
  form.paymentMethod = row.paymentMethod || 'OFFLINE';
  dialogVisible.value = true;
};

const loadCustomers = async () => {
  try {
    const res = await api.users({ page: 1, size: 100, role: 'CUSTOMER' }); // 获取所有顾客
    if (res.code === 0) {
      customers.value = res.data?.records || [];
    } else {
      MessagePlugin.error(res.message || '获取顾客列表失败');
    }
  } catch (error) {
    console.error('获取顾客列表失败:', error);
    MessagePlugin.error('获取顾客列表失败');
  }
};

const loadPets = async () => {
  try {
    const res = await api.pets({ page: 1, size: 100 }); // 获取所有宠物
    if (res.code === 0) {
      pets.value = res.data?.records || [];
    } else {
      MessagePlugin.error(res.message || '获取宠物列表失败');
    }
  } catch (error) {
    console.error('获取宠物列表失败:', error);
    MessagePlugin.error('获取宠物列表失败');
  }
};

const loadDoctors = async () => {
  try {
    const res = await api.users({ page: 1, size: 100, role: 'DOCTOR' }); // 获取所有医生
    if (res.code === 0) {
      doctors.value = res.data?.records || [];
    } else {
      MessagePlugin.error(res.message || '获取医生列表失败');
    }
  } catch (error) {
    console.error('获取医生列表失败:', error);
    MessagePlugin.error('获取医生列表失败');
  }
};

const submit = async () => {
  const payload = { ...form };
  const res = editingId.value
    ? await api.updateVisit(editingId.value, payload)
    : await api.createVisit(payload);
  if (res.code === 0) {
    MessagePlugin.success('保存成功');
    dialogVisible.value = false;
    load();
  } else {
    MessagePlugin.error(res.message || '保存失败');
  }
};

onMounted(() => {
  load();
  loadCustomers();
  loadPets();
  loadDoctors();
});
</script>
