<template>
  <el-drawer v-model="drawerVisible" title="宠物档案详情" size="60%" destroy-on-close>
    <div class="profile-header">
      <el-avatar :size="80" :src="currentPet.avatarUrl" />
      <div class="profile-basic">
        <div class="name-row">
          <span class="name">{{ currentPet.name }}</span>
          <dict-tag :options="sys_pet_gender" :value="currentPet.gender" />
          <el-tag size="small" effect="plain" type="info" style="margin-left: 5px">{{ currentPet.age }}岁</el-tag>
        </div>
        <div class="tags-row" style="margin-top: 8px">
          <el-tag v-for="tag in currentPet.tags" :key="tag.id" :type="tag.colorType || 'info'" effect="light" size="small" style="margin-right: 5px">
            {{ tag.name }}
          </el-tag>
        </div>
      </div>
    </div>

    <el-tabs v-model="detailActiveTab" class="profile-tabs">
      <el-tab-pane label="档案信息" name="info">
        <div class="section-title">基本信息</div>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="品种">{{ currentPet.breed }}</el-descriptions-item>
          <el-descriptions-item label="体型">
            <dict-tag :options="sys_pet_size" :value="currentPet.size" />
          </el-descriptions-item>
          <el-descriptions-item label="体重">{{ currentPet.weight }} kg</el-descriptions-item>
          <el-descriptions-item label="所属主人">{{ currentPet.ownerName }} ({{ currentPet.ownerPhone }})</el-descriptions-item>
          <el-descriptions-item label="性格关键词">{{ currentPet.personality || '-' }}</el-descriptions-item>
          <el-descriptions-item label="萌宠性格" :span="2">{{ currentPet.cutePersonality || '-' }}</el-descriptions-item>
        </el-descriptions>

        <div class="section-title" style="margin-top: 20px">家庭信息</div>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="到家时间">{{ currentPet.arrivalTime || '-' }}</el-descriptions-item>
          <el-descriptions-item label="房屋类型">
            <dict-tag :options="sys_house_type" :value="currentPet.houseType" />
          </el-descriptions-item>
          <el-descriptions-item label="入门方式">
            <dict-tag :options="sys_entry_method" :value="currentPet.entryMethod" />
          </el-descriptions-item>
          <el-descriptions-item label="开门详情">
            {{ currentPet.entryMethod === 'password' ? currentPet.entryPassword : currentPet.keyLocation }}
          </el-descriptions-item>
        </el-descriptions>

        <div class="section-title" style="margin-top: 20px">健康状况</div>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="健康状态">
            <el-tag :type="currentPet.healthStatus === '健康' ? 'success' : 'warning'" size="small">{{ currentPet.healthStatus }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="攻击倾向">
            <el-tag :type="currentPet.aggression ? 'danger' : 'success'" size="small">{{ currentPet.aggression ? '有' : '无' }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="疫苗情况" :span="2">
            <div>{{ currentPet.vaccineStatus || '-' }}</div>
            <div v-if="currentPet.vaccineCertUrl" style="margin-top: 10px">
              <el-image
                style="width: 100px; height: 100px; border-radius: 4px"
                :src="currentPet.vaccineCertUrl"
                :preview-src-list="[currentPet.vaccineCertUrl]"
                fit="cover"
              />
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="既往病史" :span="2">{{ currentPet.medicalHistory || '-' }}</el-descriptions-item>
          <el-descriptions-item label="过敏史" :span="2">{{ currentPet.allergies || '-' }}</el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>

      <el-tab-pane label="历史订单" name="orders">
        <el-table :data="mockOrders" border style="width: 100%">
          <el-table-column prop="orderNo" label="订单编号" width="180" />
          <el-table-column prop="service" label="服务项目" />
          <el-table-column prop="time" label="服务时间" width="180" />
          <el-table-column prop="amount" label="金额" width="100" />
          <el-table-column prop="status" label="状态" width="100">
            <template #default="scope">
              <el-tag type="success" size="small">完成</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="备注日志" name="logs">
        <el-timeline style="margin-top: 10px; padding-left: 5px">
          <el-timeline-item v-for="(log, index) in changeLogs" :key="index" :timestamp="log.createTime" type="primary">
            [{{ log.logType }}] {{ log.content }}
            <div style="font-size: 12px; color: #999; margin-top: 4px">操作人: {{ log.operatorName }}</div>
          </el-timeline-item>
        </el-timeline>
      </el-tab-pane>
    </el-tabs>
  </el-drawer>
</template>

<script setup>
import { ref, computed, watch, getCurrentInstance, toRefs } from 'vue'
import { getPet } from '@/api/archieves/pet'
import { listAllChangeLog } from '@/api/archieves/changeLog'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  petId: {
    type: [String, Number],
    default: null
  }
})

const emit = defineEmits(['update:visible'])

const drawerVisible = computed({
  get: () => props.visible,
  set: (val) => emit('update:visible', val)
})

const { proxy } = getCurrentInstance()
const { sys_pet_gender, sys_pet_size, sys_house_type, sys_entry_method } = toRefs(
  proxy?.useDict('sys_pet_gender', 'sys_pet_size', 'sys_house_type', 'sys_entry_method')
)

const currentPet = ref({})
const changeLogs = ref([])
const detailActiveTab = ref('info')

const mockOrders = ref([
  { orderNo: 'DD20231001001', service: '上门喂养 (标准版)', time: '2023-10-01 10:00', amount: '88.00', status: 'completed' },
  { orderNo: 'DD20230915002', service: '深度洗护套餐', time: '2023-09-15 14:00', amount: '158.00', status: 'completed' }
])

watch(() => props.visible, (val) => {
  if (val && props.petId) {
    detailActiveTab.value = 'info'
    currentPet.value = {}
    changeLogs.value = []

    getPet(props.petId).then((res) => {
      currentPet.value = res.data || {}
    })
    
    listAllChangeLog(props.petId, 'pet').then((res) => {
      changeLogs.value = res.data || []
    })
  }
})
</script>

<style scoped>
.profile-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
}
.profile-basic {
  margin-left: 20px;
}
.name-row {
  display: flex;
  align-items: center;
}
.name {
  font-size: 20px;
  font-weight: bold;
  color: #303133;
}
.section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  border-left: 4px solid #409eff;
  padding-left: 10px;
  line-height: 1.2;
}
</style>
