<template>
  <view class="claim-apply-page">
    <!-- 顶部导航 -->
    <view class="page-header">
      <text class="page-title">理赔申请</text>
      <text class="page-subtitle">请填写理赔申请信息</text>
    </view>
    
    <!-- 申请表单 -->
    <view class="form-container">
      <!-- 保单信息 -->
      <Card title="保单信息" class="form-card">
        <view class="form-section">
          <view class="form-item">
            <text class="form-label">保单号码 *</text>
            <input
              class="form-input"
              v-model="formData.policyNumber"
              placeholder="请输入保单号码"
              @blur="handlePolicyNumberBlur"
            />
            <text class="error-text" v-if="errors.policyNumber">{{ errors.policyNumber }}</text>
          </view>
          
          <view class="form-item" v-if="policyInfo.id">
            <text class="form-label">保险产品</text>
            <view class="policy-info">
              <text class="policy-name">{{ policyInfo.productName }}</text>
              <text class="policy-type">{{ policyInfo.typeName }}</text>
            </view>
          </view>
          
          <view class="form-item" v-if="policyInfo.id">
            <text class="form-label">保险金额</text>
            <text class="policy-amount">¥{{ policyInfo.amount | currency }}</text>
          </view>
          
          <view class="form-item" v-if="policyInfo.id">
            <text class="form-label">保险期间</text>
            <text class="policy-period">{{ policyInfo.startDate }} 至 {{ policyInfo.endDate }}</text>
          </view>
        </view>
      </Card>
      
      <!-- 理赔信息 -->
      <Card title="理赔信息" class="form-card">
        <view class="form-section">
          <view class="form-item">
            <text class="form-label">理赔类型 *</text>
            <Picker
              mode="selector"
              :range="claimTypes"
              range-key="name"
              v-model="selectedClaimType"
              @change="handleClaimTypeChange"
            >
              <view class="picker-input">
                <text class="picker-text">{{ selectedClaimType.name || '请选择理赔类型' }}</text>
                <text class="picker-arrow">▼</text>
              </view>
            </Picker>
            <text class="error-text" v-if="errors.claimType">{{ errors.claimType }}</text>
          </view>
          
          <view class="form-item">
            <text class="form-label">出险时间 *</text>
            <Picker
              mode="date"
              v-model="formData.incidentDate"
              @change="handleIncidentDateChange"
            >
              <view class="picker-input">
                <text class="picker-text">{{ formData.incidentDate || '请选择出险时间' }}</text>
                <text class="picker-arrow">▼</text>
              </view>
            </Picker>
            <text class="error-text" v-if="errors.incidentDate">{{ errors.incidentDate }}</text>
          </view>
          
          <view class="form-item">
            <text class="form-label">出险地点 *</text>
            <input
              class="form-input"
              v-model="formData.incidentLocation"
              placeholder="请输入出险地点"
            />
            <text class="error-text" v-if="errors.incidentLocation">{{ errors.incidentLocation }}</text>
          </view>
          
          <view class="form-item">
            <text class="form-label">申请金额 *</text>
            <input
              class="form-input"
              type="digit"
              v-model="formData.claimAmount"
              placeholder="请输入申请理赔金额"
            />
            <text class="error-text" v-if="errors.claimAmount">{{ errors.claimAmount }}</text>
          </view>
          
          <view class="form-item">
            <text class="form-label">事故描述 *</text>
            <textarea
              class="form-textarea"
              v-model="formData.incidentDescription"
              placeholder="请详细描述事故经过、损失情况等"
              maxlength="500"
            />
            <view class="textarea-counter">
              {{ formData.incidentDescription.length }}/500
            </view>
            <text class="error-text" v-if="errors.incidentDescription">{{ errors.incidentDescription }}</text>
          </view>
        </view>
      </Card>
      
      <!-- 损失信息 -->
      <Card title="损失信息" class="form-card">
        <view class="form-section">
          <view class="form-item">
            <text class="form-label">受损标的</text>
            <view class="livestock-list">
              <view
                class="livestock-item"
                v-for="(item, index) in formData.damagedLivestock"
                :key="index"
              >
                <view class="livestock-info">
                  <text class="livestock-id">{{ item.id }}</text>
                  <text class="livestock-type">{{ item.type }}</text>
                  <text class="livestock-age">{{ item.age }}岁</text>
                </view>
                <view class="livestock-damage">
                  <text class="damage-type">{{ item.damageType }}</text>
                  <text class="damage-amount">¥{{ item.damageAmount | currency }}</text>
                </view>
                <button
                  class="remove-btn"
                  @click="removeLivestock(index)"
                >
                  删除
                </button>
              </view>
              
              <button
                class="add-livestock-btn"
                @click="showLivestockPicker"
              >
                + 添加受损标的
              </button>
            </view>
          </view>
          
          <view class="form-item">
            <text class="form-label">损失汇总</text>
            <view class="loss-summary">
              <view class="summary-item">
                <text class="summary-label">受损数量</text>
                <text class="summary-value">{{ formData.damagedLivestock.length }}头</text>
              </view>
              <view class="summary-item">
                <text class="summary-label">预估损失</text>
                <text class="summary-value">¥{{ totalDamageAmount | currency }}</text>
              </view>
            </view>
          </view>
        </view>
      </Card>
      
      <!-- 证明材料 -->
      <Card title="证明材料" class="form-card">
        <view class="form-section">
          <view class="upload-section">
            <text class="upload-title">请上传相关证明材料</text>
            <text class="upload-tips">支持图片、PDF格式，单个文件不超过10MB</text>
            
            <view class="upload-categories">
              <view
                class="upload-category"
                v-for="category in uploadCategories"
                :key="category.key"
              >
                <view class="category-header">
                  <text class="category-name">{{ category.name }}</text>
                  <text class="category-required" v-if="category.required">*</text>
                </view>
                <text class="category-desc">{{ category.description }}</text>
                
                <view class="file-list">
                  <view
                    class="file-item"
                    v-for="(file, index) in formData.documents[category.key]"
                    :key="index"
                  >
                    <view class="file-info">
                      <text class="file-name">{{ file.name }}</text>
                      <text class="file-size">{{ formatFileSize(file.size) }}</text>
                    </view>
                    <view class="file-actions">
                      <button
                        class="preview-btn"
                        @click="previewFile(file)"
                      >
                        预览
                      </button>
                      <button
                        class="delete-btn"
                        @click="deleteFile(category.key, index)"
                      >
                        删除
                      </button>
                    </view>
                  </view>
                  
                  <button
                    class="upload-btn"
                    @click="chooseFile(category.key)"
                  >
                    + 上传文件
                  </button>
                </view>
                
                <text
                  class="error-text"
                  v-if="errors[`documents.${category.key}`]"
                >
                  {{ errors[`documents.${category.key}`] }}
                </text>
              </view>
            </view>
          </view>
        </view>
      </Card>
      
      <!-- 联系信息 -->
      <Card title="联系信息" class="form-card">
        <view class="form-section">
          <view class="form-item">
            <text class="form-label">联系人 *</text>
            <input
              class="form-input"
              v-model="formData.contactName"
              placeholder="请输入联系人姓名"
            />
            <text class="error-text" v-if="errors.contactName">{{ errors.contactName }}</text>
          </view>
          
          <view class="form-item">
            <text class="form-label">联系电话 *</text>
            <input
              class="form-input"
              type="number"
              v-model="formData.contactPhone"
              placeholder="请输入联系电话"
            />
            <text class="error-text" v-if="errors.contactPhone">{{ errors.contactPhone }}</text>
          </view>
          
          <view class="form-item">
            <text class="form-label">联系地址</text>
            <input
              class="form-input"
              v-model="formData.contactAddress"
              placeholder="请输入联系地址"
            />
          </view>
          
          <view class="form-item">
            <text class="form-label">银行账户 *</text>
            <input
              class="form-input"
              v-model="formData.bankAccount"
              placeholder="请输入理赔款接收账户"
            />
            <text class="error-text" v-if="errors.bankAccount">{{ errors.bankAccount }}</text>
          </view>
          
          <view class="form-item">
            <text class="form-label">开户银行 *</text>
            <input
              class="form-input"
              v-model="formData.bankName"
              placeholder="请输入开户银行名称"
            />
            <text class="error-text" v-if="errors.bankName">{{ errors.bankName }}</text>
          </view>
        </view>
      </Card>
    </view>
    
    <!-- 底部操作 -->
    <view class="bottom-actions">
      <button
        class="save-draft-btn"
        @click="saveDraft"
        :disabled="loading"
      >
        保存草稿
      </button>
      <button
        class="submit-btn"
        @click="submitApplication"
        :disabled="loading"
      >
        {{ loading ? '提交中...' : '提交申请' }}
      </button>
    </view>
    
    <!-- 牲畜选择弹窗 -->
    <view class="livestock-modal" v-if="showLivestockModal" @click="hideLivestockPicker">
      <view class="modal-content" @click.stop>
        <view class="modal-header">
          <text class="modal-title">选择受损标的</text>
          <button class="modal-close" @click="hideLivestockPicker">×</button>
        </view>
        
        <view class="modal-body">
          <view class="search-section">
            <input
              class="search-input"
              v-model="livestockSearchKeyword"
              placeholder="搜索牲畜编号或类型"
            />
          </view>
          
          <view class="livestock-options">
            <view
              class="livestock-option"
              v-for="livestock in filteredLivestock"
              :key="livestock.id"
              @click="selectLivestock(livestock)"
            >
              <view class="option-info">
                <text class="option-id">{{ livestock.id }}</text>
                <text class="option-type">{{ livestock.type }}</text>
                <text class="option-age">{{ livestock.age }}岁</text>
              </view>
              <text class="option-value">¥{{ livestock.value | currency }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 损失详情弹窗 -->
    <view class="damage-modal" v-if="showDamageModal" @click="hideDamageModal">
      <view class="modal-content" @click.stop>
        <view class="modal-header">
          <text class="modal-title">损失详情</text>
          <button class="modal-close" @click="hideDamageModal">×</button>
        </view>
        
        <view class="modal-body">
          <view class="form-item">
            <text class="form-label">损失类型 *</text>
            <Picker
              mode="selector"
              :range="damageTypes"
              range-key="name"
              v-model="selectedDamageType"
              @change="handleDamageTypeChange"
            >
              <view class="picker-input">
                <text class="picker-text">{{ selectedDamageType.name || '请选择损失类型' }}</text>
                <text class="picker-arrow">▼</text>
              </view>
            </Picker>
          </view>
          
          <view class="form-item">
            <text class="form-label">损失金额 *</text>
            <input
              class="form-input"
              type="digit"
              v-model="damageAmount"
              placeholder="请输入损失金额"
            />
          </view>
          
          <view class="form-item">
            <text class="form-label">损失描述</text>
            <textarea
              class="form-textarea"
              v-model="damageDescription"
              placeholder="请描述具体损失情况"
              maxlength="200"
            />
          </view>
        </view>
        
        <view class="modal-footer">
          <button class="cancel-btn" @click="hideDamageModal">取消</button>
          <button class="confirm-btn" @click="confirmDamage">确认</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { ref, reactive, computed, onMounted } from 'vue'
import Card from '@/common/components/card/card.vue'
import Picker from '@/common/components/picker/picker.vue'
import { insuranceApi, livestockApi } from '@/common/api'
import { validateForm } from '@/common/utils/validation.js'

export default {
  name: 'ClaimApplyPage',
  components: {
    Card,
    Picker
  },
  setup() {
    // 响应式数据
    const loading = ref(false)
    const showLivestockModal = ref(false)
    const showDamageModal = ref(false)
    const livestockSearchKeyword = ref('')
    const selectedLivestock = ref(null)
    const selectedClaimType = ref({})
    const selectedDamageType = ref({})
    const damageAmount = ref('')
    const damageDescription = ref('')
    
    const formData = reactive({
      policyNumber: '',
      claimType: '',
      incidentDate: '',
      incidentLocation: '',
      claimAmount: '',
      incidentDescription: '',
      damagedLivestock: [],
      documents: {
        incident: [],
        medical: [],
        death: [],
        other: []
      },
      contactName: '',
      contactPhone: '',
      contactAddress: '',
      bankAccount: '',
      bankName: ''
    })
    
    const errors = ref({})
    const policyInfo = ref({})
    const availableLivestock = ref([])
    
    // 配置数据
    const claimTypes = [
      { key: 'death', name: '死亡理赔' },
      { key: 'disease', name: '疾病理赔' },
      { key: 'accident', name: '意外理赔' },
      { key: 'natural_disaster', name: '自然灾害理赔' },
      { key: 'other', name: '其他理赔' }
    ]
    
    const damageTypes = [
      { key: 'total_loss', name: '全损' },
      { key: 'partial_loss', name: '部分损失' },
      { key: 'medical_expense', name: '医疗费用' },
      { key: 'other_expense', name: '其他费用' }
    ]
    
    const uploadCategories = [
      {
        key: 'incident',
        name: '事故证明',
        description: '事故现场照片、报案证明等',
        required: true
      },
      {
        key: 'medical',
        name: '医疗证明',
        description: '兽医诊断书、治疗记录等',
        required: false
      },
      {
        key: 'death',
        name: '死亡证明',
        description: '死亡证明书、无害化处理证明等',
        required: false
      },
      {
        key: 'other',
        name: '其他材料',
        description: '其他相关证明材料',
        required: false
      }
    ]
    
    // 计算属性
    const totalDamageAmount = computed(() => {
      return formData.damagedLivestock.reduce((total, item) => {
        return total + (parseFloat(item.damageAmount) || 0)
      }, 0)
    })
    
    const filteredLivestock = computed(() => {
      if (!livestockSearchKeyword.value) {
        return availableLivestock.value
      }
      
      const keyword = livestockSearchKeyword.value.toLowerCase()
      return availableLivestock.value.filter(item => {
        return item.id.toLowerCase().includes(keyword) ||
               item.type.toLowerCase().includes(keyword)
      })
    })
    
    // 表单验证规则
    const validationRules = {
      policyNumber: [
        { required: true, message: '请输入保单号码' }
      ],
      claimType: [
        { required: true, message: '请选择理赔类型' }
      ],
      incidentDate: [
        { required: true, message: '请选择出险时间' }
      ],
      incidentLocation: [
        { required: true, message: '请输入出险地点' }
      ],
      claimAmount: [
        { required: true, message: '请输入申请金额' },
        { pattern: /^\d+(\.\d{1,2})?$/, message: '请输入有效的金额' }
      ],
      incidentDescription: [
        { required: true, message: '请输入事故描述' },
        { minLength: 10, message: '事故描述至少10个字符' }
      ],
      contactName: [
        { required: true, message: '请输入联系人姓名' }
      ],
      contactPhone: [
        { required: true, message: '请输入联系电话' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号码' }
      ],
      bankAccount: [
        { required: true, message: '请输入银行账户' }
      ],
      bankName: [
        { required: true, message: '请输入开户银行' }
      ]
    }
    
    // 方法
    const loadAvailableLivestock = async () => {
      try {
        const response = await livestockApi.getList({
          status: 'active',
          limit: 1000
        })
        availableLivestock.value = response.data.list
      } catch (error) {
        console.error('加载牲畜列表失败:', error)
      }
    }
    
    const handlePolicyNumberBlur = async () => {
      if (!formData.policyNumber) return
      
      try {
        const response = await insuranceApi.getPolicyInfo(formData.policyNumber)
        policyInfo.value = response.data
      } catch (error) {
        console.error('获取保单信息失败:', error)
        uni.showToast({
          title: '保单号码无效',
          icon: 'none'
        })
      }
    }
    
    const handleClaimTypeChange = (e) => {
      selectedClaimType.value = e.value
      formData.claimType = e.value.key
    }
    
    const handleIncidentDateChange = (e) => {
      formData.incidentDate = e.value
    }
    
    const showLivestockPicker = () => {
      showLivestockModal.value = true
    }
    
    const hideLivestockPicker = () => {
      showLivestockModal.value = false
      livestockSearchKeyword.value = ''
    }
    
    const selectLivestock = (livestock) => {
      selectedLivestock.value = livestock
      hideLivestockPicker()
      showDamageModal.value = true
    }
    
    const hideDamageModal = () => {
      showDamageModal.value = false
      selectedLivestock.value = null
      selectedDamageType.value = {}
      damageAmount.value = ''
      damageDescription.value = ''
    }
    
    const handleDamageTypeChange = (e) => {
      selectedDamageType.value = e.value
    }
    
    const confirmDamage = () => {
      if (!selectedDamageType.value.key || !damageAmount.value) {
        uni.showToast({
          title: '请填写完整信息',
          icon: 'none'
        })
        return
      }
      
      const damageItem = {
        ...selectedLivestock.value,
        damageType: selectedDamageType.value.name,
        damageAmount: parseFloat(damageAmount.value),
        damageDescription: damageDescription.value
      }
      
      formData.damagedLivestock.push(damageItem)
      hideDamageModal()
    }
    
    const removeLivestock = (index) => {
      formData.damagedLivestock.splice(index, 1)
    }
    
    const chooseFile = (category) => {
      uni.chooseFile({
        count: 5,
        type: 'all',
        success: (res) => {
          res.tempFiles.forEach(file => {
            if (file.size > 10 * 1024 * 1024) {
              uni.showToast({
                title: '文件大小不能超过10MB',
                icon: 'none'
              })
              return
            }
            
            if (!formData.documents[category]) {
              formData.documents[category] = []
            }
            
            formData.documents[category].push({
              name: file.name,
              path: file.path,
              size: file.size
            })
          })
        }
      })
    }
    
    const deleteFile = (category, index) => {
      formData.documents[category].splice(index, 1)
    }
    
    const previewFile = (file) => {
      uni.previewImage({
        urls: [file.path]
      })
    }
    
    const formatFileSize = (size) => {
      if (size < 1024) return size + 'B'
      if (size < 1024 * 1024) return (size / 1024).toFixed(1) + 'KB'
      return (size / (1024 * 1024)).toFixed(1) + 'MB'
    }
    
    const validateFormData = () => {
      const result = validateForm(formData, validationRules)
      errors.value = result.errors
      
      // 验证必需的文档
      uploadCategories.forEach(category => {
        if (category.required && (!formData.documents[category.key] || formData.documents[category.key].length === 0)) {
          errors.value[`documents.${category.key}`] = `请上传${category.name}`
        }
      })
      
      return result.isValid && Object.keys(errors.value).length === 0
    }
    
    const saveDraft = async () => {
      try {
        loading.value = true
        
        await insuranceApi.saveClaimDraft(formData)
        
        uni.showToast({
          title: '草稿保存成功',
          icon: 'success'
        })
      } catch (error) {
        console.error('保存草稿失败:', error)
        uni.showToast({
          title: '保存失败',
          icon: 'none'
        })
      } finally {
        loading.value = false
      }
    }
    
    const submitApplication = async () => {
      if (!validateFormData()) {
        uni.showToast({
          title: '请填写完整信息',
          icon: 'none'
        })
        return
      }
      
      try {
        loading.value = true
        
        // 上传文档
        const uploadedDocuments = {}
        for (const [category, files] of Object.entries(formData.documents)) {
          if (files.length > 0) {
            uploadedDocuments[category] = []
            for (const file of files) {
              const uploadResult = await insuranceApi.uploadDocument(file.path)
              uploadedDocuments[category].push({
                name: file.name,
                url: uploadResult.data.url,
                size: file.size
              })
            }
          }
        }
        
        // 提交申请
        const applicationData = {
          ...formData,
          documents: uploadedDocuments,
          totalDamageAmount: totalDamageAmount.value
        }
        
        const response = await insuranceApi.submitClaimApplication(applicationData)
        
        uni.showToast({
          title: '申请提交成功',
          icon: 'success'
        })
        
        setTimeout(() => {
          uni.navigateTo({
            url: `/pages/claim/detail?id=${response.data.id}`
          })
        }, 1500)
      } catch (error) {
        console.error('提交申请失败:', error)
        uni.showToast({
          title: '提交失败',
          icon: 'none'
        })
      } finally {
        loading.value = false
      }
    }
    
    // 生命周期
    onMounted(() => {
      loadAvailableLivestock()
    })
    
    return {
      loading,
      showLivestockModal,
      showDamageModal,
      livestockSearchKeyword,
      selectedClaimType,
      selectedDamageType,
      damageAmount,
      damageDescription,
      formData,
      errors,
      policyInfo,
      claimTypes,
      damageTypes,
      uploadCategories,
      totalDamageAmount,
      filteredLivestock,
      handlePolicyNumberBlur,
      handleClaimTypeChange,
      handleIncidentDateChange,
      showLivestockPicker,
      hideLivestockPicker,
      selectLivestock,
      hideDamageModal,
      handleDamageTypeChange,
      confirmDamage,
      removeLivestock,
      chooseFile,
      deleteFile,
      previewFile,
      formatFileSize,
      saveDraft,
      submitApplication
    }
  },
  filters: {
    currency(value) {
      if (!value) return '0.00'
      return parseFloat(value).toLocaleString('zh-CN', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.claim-apply-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
}

.page-header {
  padding: 32rpx;
  background-color: #fff;
  border-bottom: 2rpx solid #f0f0f0;
  
  .page-title {
    display: block;
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 8rpx;
  }
  
  .page-subtitle {
    font-size: 26rpx;
    color: #666;
  }
}

.form-container {
  padding: 16rpx 32rpx;
}

.form-card {
  margin-bottom: 24rpx;
}

.form-section {
  display: flex;
  flex-direction: column;
  gap: 32rpx;
}

.form-item {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.form-label {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.form-input {
  padding: 24rpx;
  background-color: #f8f9fa;
  border-radius: 12rpx;
  font-size: 28rpx;
  color: #333;
  
  &::placeholder {
    color: #999;
  }
}

.form-textarea {
  padding: 24rpx;
  background-color: #f8f9fa;
  border-radius: 12rpx;
  font-size: 28rpx;
  color: #333;
  min-height: 200rpx;
  
  &::placeholder {
    color: #999;
  }
}

.textarea-counter {
  text-align: right;
  font-size: 24rpx;
  color: #999;
  margin-top: -8rpx;
}

.picker-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx;
  background-color: #f8f9fa;
  border-radius: 12rpx;
  
  .picker-text {
    font-size: 28rpx;
    color: #333;
    
    &:empty::before {
      content: attr(placeholder);
      color: #999;
    }
  }
  
  .picker-arrow {
    font-size: 24rpx;
    color: #666;
  }
}

.error-text {
  font-size: 24rpx;
  color: #ff4757;
  margin-top: -8rpx;
}

.policy-info {
  display: flex;
  align-items: center;
  gap: 16rpx;
  padding: 24rpx;
  background-color: #f8f9fa;
  border-radius: 12rpx;
  
  .policy-name {
    font-size: 28rpx;
    color: #333;
    font-weight: 500;
  }
  
  .policy-type {
    font-size: 24rpx;
    color: #666;
    padding: 4rpx 12rpx;
    background-color: #e9ecef;
    border-radius: 8rpx;
  }
}

.policy-amount {
  font-size: 32rpx;
  color: #2e8b57;
  font-weight: 600;
}

.policy-period {
  font-size: 26rpx;
  color: #666;
}

.livestock-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.livestock-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx;
  background-color: #f8f9fa;
  border-radius: 12rpx;
}

.livestock-info {
  display: flex;
  align-items: center;
  gap: 16rpx;
  
  .livestock-id {
    font-size: 28rpx;
    color: #333;
    font-weight: 500;
  }
  
  .livestock-type {
    font-size: 24rpx;
    color: #666;
    padding: 4rpx 12rpx;
    background-color: #e9ecef;
    border-radius: 8rpx;
  }
  
  .livestock-age {
    font-size: 24rpx;
    color: #666;
  }
}

.livestock-damage {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8rpx;
  
  .damage-type {
    font-size: 24rpx;
    color: #666;
  }
  
  .damage-amount {
    font-size: 28rpx;
    color: #ff4757;
    font-weight: 600;
  }
}

.remove-btn {
  padding: 8rpx 16rpx;
  background-color: #ff4757;
  color: #fff;
  border-radius: 6rpx;
  font-size: 24rpx;
}

.add-livestock-btn {
  padding: 24rpx;
  background-color: #f8f9fa;
  border: 2rpx dashed #ccc;
  border-radius: 12rpx;
  font-size: 28rpx;
  color: #666;
  text-align: center;
  
  &:active {
    background-color: #e9ecef;
  }
}

.loss-summary {
  display: flex;
  justify-content: space-between;
  padding: 24rpx;
  background-color: #f8f9fa;
  border-radius: 12rpx;
}

.summary-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
  
  .summary-label {
    font-size: 24rpx;
    color: #666;
  }
  
  .summary-value {
    font-size: 32rpx;
    color: #333;
    font-weight: 600;
  }
}

.upload-section {
  .upload-title {
    display: block;
    font-size: 28rpx;
    color: #333;
    font-weight: 500;
    margin-bottom: 8rpx;
  }
  
  .upload-tips {
    display: block;
    font-size: 24rpx;
    color: #666;
    margin-bottom: 32rpx;
  }
}

.upload-categories {
  display: flex;
  flex-direction: column;
  gap: 32rpx;
}

.upload-category {
  .category-header {
    display: flex;
    align-items: center;
    gap: 8rpx;
    margin-bottom: 8rpx;
    
    .category-name {
      font-size: 26rpx;
      color: #333;
      font-weight: 500;
    }
    
    .category-required {
      font-size: 24rpx;
      color: #ff4757;
    }
  }
  
  .category-desc {
    display: block;
    font-size: 24rpx;
    color: #666;
    margin-bottom: 16rpx;
  }
}

.file-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx;
  background-color: #f8f9fa;
  border-radius: 12rpx;
}

.file-info {
  flex: 1;
  
  .file-name {
    display: block;
    font-size: 26rpx;
    color: #333;
    margin-bottom: 4rpx;
  }
  
  .file-size {
    font-size: 22rpx;
    color: #666;
  }
}

.file-actions {
  display: flex;
  gap: 12rpx;
  
  .preview-btn {
    padding: 8rpx 16rpx;
    background-color: #1890ff;
    color: #fff;
    border-radius: 6rpx;
    font-size: 22rpx;
  }
  
  .delete-btn {
    padding: 8rpx 16rpx;
    background-color: #ff4757;
    color: #fff;
    border-radius: 6rpx;
    font-size: 22rpx;
  }
}

.upload-btn {
  padding: 24rpx;
  background-color: #f8f9fa;
  border: 2rpx dashed #ccc;
  border-radius: 12rpx;
  font-size: 26rpx;
  color: #666;
  text-align: center;
  
  &:active {
    background-color: #e9ecef;
  }
}

.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  gap: 16rpx;
  padding: 24rpx 32rpx;
  background-color: #fff;
  border-top: 2rpx solid #f0f0f0;
  
  .save-draft-btn {
    flex: 1;
    padding: 24rpx;
    background-color: #f8f9fa;
    color: #666;
    border-radius: 12rpx;
    font-size: 28rpx;
    
    &:disabled {
      opacity: 0.6;
    }
  }
  
  .submit-btn {
    flex: 2;
    padding: 24rpx;
    background-color: #2e8b57;
    color: #fff;
    border-radius: 12rpx;
    font-size: 28rpx;
    
    &:disabled {
      opacity: 0.6;
    }
  }
}

// 弹窗样式
.livestock-modal,
.damage-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  width: 90%;
  max-height: 80%;
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx;
  border-bottom: 2rpx solid #f0f0f0;
  
  .modal-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
  }
  
  .modal-close {
    width: 48rpx;
    height: 48rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
    border-radius: 50%;
    font-size: 32rpx;
    color: #666;
  }
}

.modal-body {
  padding: 32rpx;
  max-height: 600rpx;
  overflow-y: auto;
}

.modal-footer {
  display: flex;
  gap: 16rpx;
  padding: 32rpx;
  border-top: 2rpx solid #f0f0f0;
  
  .cancel-btn {
    flex: 1;
    padding: 24rpx;
    background-color: #f8f9fa;
    color: #666;
    border-radius: 12rpx;
    font-size: 28rpx;
  }
  
  .confirm-btn {
    flex: 1;
    padding: 24rpx;
    background-color: #2e8b57;
    color: #fff;
    border-radius: 12rpx;
    font-size: 28rpx;
  }
}

.search-section {
  margin-bottom: 24rpx;
}

.search-input {
  width: 100%;
  padding: 20rpx;
  background-color: #f8f9fa;
  border-radius: 12rpx;
  font-size: 26rpx;
  color: #333;
  
  &::placeholder {
    color: #999;
  }
}

.livestock-options {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.livestock-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx;
  background-color: #f8f9fa;
  border-radius: 12rpx;
  
  &:active {
    background-color: #e9ecef;
  }
}

.option-info {
  display: flex;
  align-items: center;
  gap: 16rpx;
  
  .option-id {
    font-size: 26rpx;
    color: #333;
    font-weight: 500;
  }
  
  .option-type {
    font-size: 22rpx;
    color: #666;
    padding: 4rpx 12rpx;
    background-color: #e9ecef;
    border-radius: 8rpx;
  }
  
  .option-age {
    font-size: 22rpx;
    color: #666;
  }
}

.option-value {
  font-size: 26rpx;
  color: #2e8b57;
  font-weight: 600;
}
</style>