<template>
  <el-dialog :model-value="visible" @update:model-value="$emit('update:visible', $event)" title="宠物档案详情" width="800px" top="10vh" class="pet-profile-dialog">
    <el-tabs v-model="activePetTab" class="pet-tabs">
      <el-tab-pane label="基本信息" name="basic">
        <div class="pet-form-content">
          <!-- Avatar Upload -->
          <div class="avatar-col">
            <el-upload
              class="avatar-uploader"
              action="#"
              :show-file-list="false"
              :auto-upload="false"
              :on-change="handleAvatarChange"
            >
              <img v-if="petForm.avatar" :src="petForm.avatar" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon" :size="28" color="#8c939d"><Plus /></el-icon>
            </el-upload>
            <div style="font-size:12px; color:#999; margin-top:8px; text-align:center">点击上传头像</div>
          </div>

          <!-- Form Fields -->
          <el-form :model="petForm" label-width="80px" class="inner-form">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="宠物姓名" required>
                  <el-input v-model="petForm.name" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="所属主人" required>
                  <el-select :model-value="userId" disabled placeholder="选择主人" style="width:100%">
                    <el-option v-for="u in userOptions" :key="u.id" :label="u.name" :value="u.id" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="性别">
                  <el-radio-group v-model="petForm.gender">
                    <el-radio label="MM">公</el-radio>
                    <el-radio label="GG">母</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="品种">
                  <el-select v-model="petForm.breed" placeholder="请选择品种" style="width:100%">
                    <el-option label="金毛" value="金毛" />
                    <el-option label="布偶" value="布偶" />
                    <el-option label="边牧" value="边牧" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="体型">
                  <el-select v-model="petForm.bodyType" placeholder="选择体型" style="width:100%">
                    <el-option label="小型" value="small" />
                    <el-option label="中型" value="medium" />
                    <el-option label="大型" value="large" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="体重(kg)">
                  <el-row :gutter="10">
                    <el-col :span="12"><el-input-number v-model="petForm.weight" :min="0" :step="0.1" :controls="false" style="width:100%" /></el-col>
                    <el-col :span="12"></el-col>
                  </el-row>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="年龄(岁)">
                  <el-input-number v-model="petForm.age" :min="0" style="width:100%" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item label="性格关键词">
              <el-input v-model="petForm.keywords" placeholder="如：活泼、粘人" />
            </el-form-item>

            <el-form-item label="萌宠性格">
              <el-input v-model="petForm.desc" type="textarea" placeholder="详细描述" :rows="2" />
            </el-form-item>

            <el-form-item label="宠物标签">
              <el-select v-model="petForm.tags" multiple placeholder="选择标签" style="width:100%">
                <el-option label="绝育" value="1" />
                <el-option label="疫苗齐全" value="2" />
              </el-select>
            </el-form-item>

          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane label="家庭信息" name="family">
        <el-form :model="petForm" label-width="120px">
          <el-form-item label="新来家庭时间">
            <el-date-picker v-model="petForm.arrivalTime" type="date" placeholder="选择日期" style="width: 100%" />
          </el-form-item>
          <el-form-item label="家庭房屋类型">
            <el-radio-group v-model="petForm.houseType">
              <el-radio label="stairs">楼梯</el-radio>
              <el-radio label="elevator">电梯</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="入门方式">
            <el-radio-group v-model="petForm.entryMethod">
              <el-radio label="password">密码开门</el-radio>
              <el-radio label="key">钥匙开门</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="密码" v-if="petForm.entryMethod === 'password'">
            <el-input v-model="petForm.entryPassword" placeholder="请输入门锁密码" />
          </el-form-item>
          <el-form-item label="钥匙位置" v-if="petForm.entryMethod === 'key'">
            <el-input v-model="petForm.keyLocation" placeholder="请输入钥匙存放位置" />
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="健康状况" name="health">
        <el-form :model="petForm" label-width="120px">
          <el-form-item label="健康状态">
            <el-radio-group v-model="petForm.healthStatus">
              <el-radio label="健康">健康</el-radio>
              <el-radio label="亚健康">亚健康</el-radio>
              <el-radio label="疾病">疾病</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否有攻击倾向">
            <el-switch v-model="petForm.aggression" active-text="是" inactive-text="否" />
          </el-form-item>
          <el-form-item label="疫苗情况">
            <el-input v-model="petForm.vaccine" type="textarea" placeholder="记录疫苗接种情况" />
          </el-form-item>
          <el-form-item label="既往病史">
            <el-input v-model="petForm.medicalHistory" type="textarea" placeholder="如有病史请记录" />
          </el-form-item>
          <el-form-item label="过敏史">
            <el-input v-model="petForm.allergies" type="textarea" placeholder="如有过敏源请记录" />
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <template #footer>
      <el-button @click="$emit('update:visible', false)">取消</el-button>
      <el-button type="primary" @click="submit">保存</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
  visible: { type: Boolean, default: false },
  userId: { type: [String, Number], default: '' },
  userOptions: { type: Array, default: () => [] }
})

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

const activePetTab = ref('basic')

const petForm = reactive({
  name: '', breed: '', gender: 'MM', avatar: '',
  bodyType: 'small', weight: 0, age: 0, keywords: '', desc: '', tags: [],

  // Family
  arrivalTime: '', houseType: 'stairs', entryMethod: 'key', entryPassword: '', keyLocation: '',
  // Health
  healthStatus: '健康', aggression: false, vaccine: '', medicalHistory: '', allergies: ''
})

watch(() => props.visible, (newVal) => {
  if (newVal) {
    activePetTab.value = 'basic'
    Object.assign(petForm, {
      name: '', breed: '', gender: 'MM', avatar: '',
      bodyType: 'small', weight: 0, age: 0, keywords: '', desc: '', tags: [],
      arrivalTime: '', houseType: 'stairs', entryMethod: 'key', entryPassword: '', keyLocation: '',
      healthStatus: '健康', aggression: false, vaccine: '', medicalHistory: '', allergies: ''
    })
  }
})

const handleAvatarChange = (uploadFile) => {
  // Mock upload: create local URL
  petForm.avatar = URL.createObjectURL(uploadFile.raw)
}

const submit = () => {
  if (!petForm.name || !petForm.breed) {
    ElMessage.warning('请补全宠物必填信息')
    return
  }
  const newPet = {
    id: Date.now(),
    name: petForm.name,
    breed: petForm.breed,
    avatar: petForm.avatar
  }
  emit('success', newPet)
  emit('update:visible', false)
}
</script>

<style scoped>
.pet-form-content { display: flex; gap: 20px; }
.avatar-col { width: 120px; display: flex; flex-direction: column; align-items: center; padding-top: 10px; }
.avatar-uploader { display: inline-block; }
.avatar-uploader:deep(.el-upload) {
  border: 1px dashed #d9d9d9; border-radius: 6px; cursor: pointer; position: relative; overflow: hidden;
  transition: var(--el-transition-duration-fast);
}
.avatar-uploader:deep(.el-upload:hover) { border-color: var(--el-color-primary); }
.avatar-uploader-icon {
  font-size: 28px; color: #8c939d; width: 100px; height: 100px; text-align: center; border: 1px dashed #d9d9d9;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.avatar { width: 100px; height: 100px; display: block; border-radius: 50%; object-fit: cover; }
.inner-form { flex: 1; }
</style>
