<template>
  <div>
    <h1>品种改良管理</h1>
    
    <!-- 搜索和操作栏 -->
    <a-card style="margin-bottom: 16px;">
      <div style="display: flex; flex-wrap: wrap; gap: 16px; align-items: center;">
        <a-input v-model:value="searchKeyword" placeholder="输入品种名称或编号" style="width: 250px;">
          <template #prefix>
            <span class="iconfont icon-sousuo"></span>
          </template>
        </a-input>
        
        <a-select v-model:value="breedTypeFilter" placeholder="品种类型" style="width: 120px;">
          <a-select-option value="">全部</a-select-option>
          <a-select-option value="local">地方品种</a-select-option>
          <a-select-option value="improved">培育品种</a-select-option>
          <a-select-option value="imported">引进品种</a-select-option>
        </a-select>
        
        <a-select v-model:value="statusFilter" placeholder="推广状态" style="width: 120px;">
          <a-select-option value="">全部</a-select-option>
          <a-select-option value="developing">开发中</a-select-option>
          <a-select-option value="promoting">推广中</a-select-option>
          <a-select-option value="promoted">已推广</a-select-option>
        </a-select>
        
        <a-button type="primary" @click="handleSearch" style="margin-left: auto;">
          <span class="iconfont icon-sousuo"></span> 搜索
        </a-button>
        
        <a-button type="default" @click="handleReset">重置</a-button>
        
        <a-button type="dashed" @click="handleImport">
          <span class="iconfont icon-daoru"></span> 导入
        </a-button>
        
        <a-button type="dashed" @click="handleExport">
          <span class="iconfont icon-daochu"></span> 导出
        </a-button>
        
        <a-button type="primary" danger @click="handleAddBreed">
          <span class="iconfont icon-tianjia"></span> 新增改良品种
        </a-button>
      </div>
    </a-card>
    
    <!-- 数据统计卡片 -->
    <a-row gutter={24} style="margin-bottom: 16px;">
      <a-col :span="6">
        <a-statistic title="改良品种总数" :value="totalBreeds" suffix="个" />
      </a-col>
      <a-col :span="6">
        <a-statistic title="推广中品种" :value="promotingBreeds" suffix="个" :valueStyle="{ color: '#1890ff' }" />
      </a-col>
      <a-col :span="6">
        <a-statistic title="已推广品种" :value="promotedBreeds" suffix="个" :valueStyle="{ color: '#52c41a' }" />
      </a-col>
      <a-col :span="6">
        <a-statistic title="开发中品种" :value="developingBreeds" suffix="个" :valueStyle="{ color: '#faad14' }" />
      </a-col>
    </a-row>
    
    <!-- 品种分布图表 -->
    <a-card title="品种类型分布" style="margin-bottom: 16px;">
      <div style="height: 300px;" ref="breedChartRef"></div>
    </a-card>
    
    <!-- 品种列表 -->
    <a-card>
      <a-table
        :columns="columns"
        :data-source="breedsData"
        :pagination="pagination"
        row-key="id"
        :row-selection="{ selectedRowKeys, onChange: onSelectChange }"
        :scroll="{ x: 'max-content' }"
      >
        <!-- 状态列 -->
        <template #bodyCell:status="{ record }">
          <a-tag :color="getStatusColor(record.status)">{{ getStatusText(record.status) }}</a-tag>
        </template>
        
        <!-- 操作列 -->
        <template #bodyCell:action="{ record }">
          <div style="display: flex; gap: 8px;">
            <a-button size="small" @click="handleView(record)">查看</a-button>
            <a-button size="small" type="primary" @click="handleEdit(record)">编辑</a-button>
            <a-button size="small" danger @click="handleDelete(record.id)">删除</a-button>
            <a-button size="small" @click="handleUpload(record.id)">上传资料</a-button>
          </div>
        </template>
      </a-table>
    </a-card>
    
    <!-- 新增/编辑品种模态框 -->
    <a-modal
      v-model:open="isAddEditModalOpen"
      title="新增/编辑改良品种"
      :footer="null"
      width={800}
    >
      <a-form
        :model="currentBreed"
        layout="vertical"
        style="max-width: 600px; margin: 0 auto;"
      >
        <a-row gutter={24}>
          <a-col :span="12">
            <a-form-item label="品种编号" name="code" :rules="[{ required: true, message: '请输入品种编号' }]">
              <a-input v-model:value="currentBreed.code" placeholder="请输入品种编号" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="品种名称" name="name" :rules="[{ required: true, message: '请输入品种名称' }]">
              <a-input v-model:value="currentBreed.name" placeholder="请输入品种名称" />
            </a-form-item>
          </a-col>
        </a-row>
        
        <a-row gutter={24}>
          <a-col :span="12">
            <a-form-item label="品种类型" name="breedType" :rules="[{ required: true, message: '请选择品种类型' }]">
              <a-select v-model:value="currentBreed.breedType" placeholder="请选择品种类型">
                <a-select-option value="local">地方品种</a-select-option>
                <a-select-option value="improved">培育品种</a-select-option>
                <a-select-option value="imported">引进品种</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="推广状态" name="status" :rules="[{ required: true, message: '请选择推广状态' }]">
              <a-select v-model:value="currentBreed.status" placeholder="请选择推广状态">
                <a-select-option value="developing">开发中</a-select-option>
                <a-select-option value="promoting">推广中</a-select-option>
                <a-select-option value="promoted">已推广</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        
        <a-row gutter={24}>
          <a-col :span="12">
            <a-form-item label="培育单位" name="breedingUnit" :rules="[{ required: true, message: '请输入培育单位' }]">
              <a-input v-model:value="currentBreed.breedingUnit" placeholder="请输入培育单位" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="培育负责人" name="breedingManager" :rules="[{ required: true, message: '请输入培育负责人' }]">
              <a-input v-model:value="currentBreed.breedingManager" placeholder="请输入培育负责人" />
            </a-form-item>
          </a-col>
        </a-row>
        
        <a-row gutter={24}>
          <a-col :span="12">
            <a-form-item label="培育开始时间" name="startTime" :rules="[{ required: true, message: '请选择培育开始时间' }]">
              <a-date-picker v-model:value="currentBreed.startTime" style="width: 100%;" placeholder="请选择培育开始时间" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="预期完成时间" name="expectedEndTime">
              <a-date-picker v-model:value="currentBreed.expectedEndTime" style="width: 100%;" placeholder="请选择预期完成时间" />
            </a-form-item>
          </a-col>
        </a-row>
        
        <a-form-item label="父本品种" name="maleParent">
          <a-input v-model:value="currentBreed.maleParent" placeholder="请输入父本品种" />
        </a-form-item>
        
        <a-form-item label="母本品种" name="femaleParent">
          <a-input v-model:value="currentBreed.femaleParent" placeholder="请输入母本品种" />
        </a-form-item>
        
        <a-form-item label="品种特性" name="characteristics">
          <a-input.TextArea v-model:value="currentBreed.characteristics" placeholder="请输入品种特性" :rows="3" />
        </a-form-item>
        
        <a-form-item label="推广情况" name="promotionStatus">
          <a-input.TextArea v-model:value="currentBreed.promotionStatus" placeholder="请输入推广情况" :rows="3" />
        </a-form-item>
        
        <a-form-item label="备注信息" name="remark">
          <a-input.TextArea v-model:value="currentBreed.remark" placeholder="请输入备注信息" :rows="2" />
        </a-form-item>
        
        <div style="display: flex; justify-content: flex-end; gap: 16px;">
          <a-button @click="isAddEditModalOpen = false">取消</a-button>
          <a-button type="primary" @click="handleSave">保存</a-button>
        </div>
      </a-form>
    </a-modal>
    
    <!-- 查看品种详情模态框 -->
    <a-modal
      v-model:open="isViewModalOpen"
      title="品种改良详情"
      :footer="null"
      width={900}
    >
      <div v-if="viewBreed" class="breed-detail">
        <div class="detail-row">
          <div class="detail-label">品种编号：</div>
          <div class="detail-value">{{ viewBreed.code }}</div>
        </div>
        <div class="detail-row">
          <div class="detail-label">品种名称：</div>
          <div class="detail-value">{{ viewBreed.name }}</div>
        </div>
        <div class="detail-row">
          <div class="detail-label">品种类型：</div>
          <div class="detail-value">{{ getBreedTypeText(viewBreed.breedType) }}</div>
        </div>
        <div class="detail-row">
          <div class="detail-label">推广状态：</div>
          <div class="detail-value">
            <a-tag :color="getStatusColor(viewBreed.status)">{{ getStatusText(viewBreed.status) }}</a-tag>
          </div>
        </div>
        <div class="detail-row">
          <div class="detail-label">培育单位：</div>
          <div class="detail-value">{{ viewBreed.breedingUnit }}</div>
        </div>
        <div class="detail-row">
          <div class="detail-label">培育负责人：</div>
          <div class="detail-value">{{ viewBreed.breedingManager }}</div>
        </div>
        <div class="detail-row">
          <div class="detail-label">培育开始时间：</div>
          <div class="detail-value">{{ viewBreed.startTime }}</div>
        </div>
        <div class="detail-row">
          <div class="detail-label">预期完成时间：</div>
          <div class="detail-value">{{ viewBreed.expectedEndTime || '无' }}</div>
        </div>
        <div class="detail-row">
          <div class="detail-label">父本品种：</div>
          <div class="detail-value">{{ viewBreed.maleParent || '无' }}</div>
        </div>
        <div class="detail-row">
          <div class="detail-label">母本品种：</div>
          <div class="detail-value">{{ viewBreed.femaleParent || '无' }}</div>
        </div>
        <div class="detail-row">
          <div class="detail-label">品种特性：</div>
          <div class="detail-value">{{ viewBreed.characteristics || '无' }}</div>
        </div>
        <div class="detail-row">
          <div class="detail-label">推广情况：</div>
          <div class="detail-value">{{ viewBreed.promotionStatus || '无' }}</div>
        </div>
        <div class="detail-row">
          <div class="detail-label">备注信息：</div>
          <div class="detail-value">{{ viewBreed.remark || '无' }}</div>
        </div>
        <div class="detail-row" v-if="viewBreed.relatedFiles && viewBreed.relatedFiles.length > 0">
          <div class="detail-label">相关资料：</div>
          <div class="detail-value">
            <div v-for="file in viewBreed.relatedFiles" :key="file.id" class="file-item">
              <a :href="file.url" target="_blank">{{ file.name }}</a>
              <span class="file-size">({{ file.size }})</span>
            </div>
          </div>
        </div>
      </div>
      <div style="text-align: center; margin-top: 24px;">
        <a-button @click="isViewModalOpen = false">关闭</a-button>
      </div>
    </a-modal>
    
    <!-- 上传资料模态框 -->
    <a-modal
      v-model:open="isUploadModalOpen"
      title="上传品种改良资料"
      :footer="null"
      width={600}
    >
      <div style="padding: 16px;">
        <div v-if="uploadingBreedName">
          <p style="margin-bottom: 16px;">正在为 <strong>{{ uploadingBreedName }}</strong> 上传资料</p>
        </div>
        <a-upload
          name="file"
          :multiple="true"
          :fileList="fileList"
          @change="handleFileChange"
          @drop="handleDrop"
        >
          <a-button>
            <span class="iconfont icon-upload"></span> 选择文件
          </a-button>
        </a-upload>
        <p style="margin-top: 16px; color: #8c8c8c; font-size: 12px;">支持上传 Word、PDF、Excel、图片等格式文件</p>
        <div style="display: flex; justify-content: flex-end; gap: 16px; margin-top: 24px;">
          <a-button @click="isUploadModalOpen = false">取消</a-button>
          <a-button type="primary" @click="handleConfirmUpload">确认上传</a-button>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import * as echarts from 'echarts'

// 搜索条件
const searchKeyword = ref('')
const breedTypeFilter = ref('')
const statusFilter = ref('')

// 统计数据
const totalBreeds = ref(28)
const promotingBreeds = ref(12)
const promotedBreeds = ref(10)
const developingBreeds = ref(6)

// 分页配置
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total) => `共 ${total} 条记录`
})

// 选中的行
const selectedRowKeys = ref([])
const onSelectChange = (newSelectedRowKeys) => {
  selectedRowKeys.value = newSelectedRowKeys
}

// 图表引用
const breedChartRef = ref(null)

// 模态框状态
const isAddEditModalOpen = ref(false)
const isViewModalOpen = ref(false)
const isUploadModalOpen = ref(false)
const currentUploadBreedId = ref('')
const uploadingBreedName = ref('')

// 当前编辑的品种
const currentBreed = reactive({
  id: '',
  code: '',
  name: '',
  breedType: '',
  status: 'developing',
  breedingUnit: '',
  breedingManager: '',
  startTime: '',
  expectedEndTime: '',
  maleParent: '',
  femaleParent: '',
  characteristics: '',
  promotionStatus: '',
  remark: '',
  relatedFiles: []
})

// 查看的品种
const viewBreed = ref(null)

// 上传文件列表
const fileList = ref([])

// 品种列表数据
const breedsData = ref([
  {
    id: '1',
    code: 'B001',
    name: '中国荷斯坦牛',
    breedType: 'improved',
    status: 'promoted',
    breedingUnit: '中国农业科学院畜牧研究所',
    breedingManager: '张明',
    startTime: '2010-01-01',
    expectedEndTime: '2015-12-31',
    maleParent: '荷斯坦牛',
    femaleParent: '本地黄牛',
    characteristics: '产奶量高，适应力强，抗病性好',
    promotionStatus: '已在全国28个省市推广，存栏量超过100万头',
    remark: '国家级重点推广品种',
    relatedFiles: [
      { id: 'f1', name: '品种标准.pdf', size: '2.5MB', url: '#' },
      { id: 'f2', name: '饲养管理指南.docx', size: '1.8MB', url: '#' }
    ]
  },
  {
    id: '2',
    code: 'B002',
    name: '秦川牛（改良型）',
    breedType: 'improved',
    status: 'promoting',
    breedingUnit: '陕西省农业科学院',
    breedingManager: '李华',
    startTime: '2012-03-15',
    expectedEndTime: '2018-03-15',
    maleParent: '日本和牛',
    femaleParent: '秦川牛',
    characteristics: '肉质优良，生长速度快，饲料转化率高',
    promotionStatus: '已在陕西、甘肃、河南等省推广，效果良好',
    remark: '优质肉牛品种',
    relatedFiles: [
      { id: 'f3', name: '秦川牛改良报告.pdf', size: '3.2MB', url: '#' }
    ]
  },
  {
    id: '3',
    code: 'B003',
    name: '西门塔尔牛',
    breedType: 'imported',
    status: 'promoted',
    breedingUnit: '中国农业大学',
    breedingManager: '王强',
    startTime: '2008-05-20',
    expectedEndTime: '2013-05-20',
    maleParent: '瑞士西门塔尔牛',
    femaleParent: '本地黄牛',
    characteristics: '肉乳兼用，适应性强，耐粗饲',
    promotionStatus: '已在全国广泛推广，是我国主要的肉牛品种之一',
    remark: '引进后本土化改良品种',
    relatedFiles: []
  },
  {
    id: '4',
    code: 'B004',
    name: '草原红牛',
    breedType: 'local',
    status: 'promoted',
    breedingUnit: '内蒙古农业大学',
    breedingManager: '赵芳',
    startTime: '2005-09-10',
    expectedEndTime: '2010-09-10',
    maleParent: '蒙古牛',
    femaleParent: '本地黄牛',
    characteristics: '抗寒能力强，适应草原环境，肉质鲜美',
    promotionStatus: '主要在内蒙古、黑龙江等地区推广',
    remark: '地方特色品种',
    relatedFiles: [
      { id: 'f4', name: '草原红牛品种志.pdf', size: '4.1MB', url: '#' }
    ]
  },
  {
    id: '5',
    code: 'B005',
    name: '南阳牛（新品系）',
    breedType: 'improved',
    status: 'promoting',
    breedingUnit: '河南省农业科学院',
    breedingManager: '孙建国',
    startTime: '2015-02-20',
    expectedEndTime: '2020-02-20',
    maleParent: '皮埃蒙特牛',
    femaleParent: '南阳牛',
    characteristics: '体型大，生长快，瘦肉率高',
    promotionStatus: '正在河南省及周边地区推广试验',
    remark: '传统品种改良项目',
    relatedFiles: []
  },
  {
    id: '6',
    code: 'B006',
    name: '鲁西黄牛（高产品系）',
    breedType: 'improved',
    status: 'developing',
    breedingUnit: '山东省农业科学院',
    breedingManager: '周小丽',
    startTime: '2018-07-01',
    expectedEndTime: '2023-07-01',
    maleParent: '夏洛莱牛',
    femaleParent: '鲁西黄牛',
    characteristics: '生长速度快，饲料转化率高，肉质好',
    promotionStatus: '处于培育阶段，已完成第一阶段选育',
    remark: '重点科研项目',
    relatedFiles: [
      { id: 'f5', name: '选育方案.docx', size: '1.5MB', url: '#' }
    ]
  },
  {
    id: '7',
    code: 'B007',
    name: '延边牛',
    breedType: 'local',
    status: 'promoted',
    breedingUnit: '吉林省农业科学院',
    breedingManager: '吴大山',
    startTime: '2006-04-15',
    expectedEndTime: '2011-04-15',
    maleParent: '朝鲜牛',
    femaleParent: '本地黄牛',
    characteristics: '抗寒、耐粗饲，肉质优良',
    promotionStatus: '主要在东北地区推广，存栏量稳定',
    remark: '东北地区特色品种',
    relatedFiles: []
  },
  {
    id: '8',
    code: 'B008',
    name: '安格斯牛（本土化）',
    breedType: 'imported',
    status: 'promoting',
    breedingUnit: '中国农业科学院',
    breedingManager: '郑小华',
    startTime: '2016-09-30',
    expectedEndTime: '2021-09-30',
    maleParent: '苏格兰安格斯牛',
    femaleParent: '本地黄牛',
    characteristics: '肉质大理石花纹明显，适应性逐渐增强',
    promotionStatus: '在多个省份进行适应性试验，效果良好',
    remark: '引进品种本土化改良',
    relatedFiles: [
      { id: 'f6', name: '安格斯牛适应性研究.pdf', size: '2.8MB', url: '#' }
    ]
  },
  {
    id: '9',
    code: 'B009',
    name: '三河牛',
    breedType: 'local',
    status: 'promoted',
    breedingUnit: '内蒙古呼伦贝尔市畜牧研究所',
    breedingManager: '钱小红',
    startTime: '2003-06-10',
    expectedEndTime: '2008-06-10',
    maleParent: '俄罗斯牛',
    femaleParent: '蒙古牛',
    characteristics: '乳肉兼用，适应草原环境',
    promotionStatus: '主要在内蒙古呼伦贝尔地区推广',
    remark: '草原特色品种',
    relatedFiles: []
  },
  {
    id: '10',
    code: 'B010',
    name: '蜀宣花牛',
    breedType: 'improved',
    status: 'developing',
    breedingUnit: '四川省畜牧科学研究院',
    breedingManager: '陈明亮',
    startTime: '2019-03-01',
    expectedEndTime: '2024-03-01',
    maleParent: '西门塔尔牛',
    femaleParent: '宣汉黄牛',
    characteristics: '适应南方气候，生长快，肉质好',
    promotionStatus: '处于培育阶段，已完成基础种群建立',
    remark: '南方地区特色品种培育',
    relatedFiles: []
  }
])

// 表格列定义
const columns = [
  {
    title: '品种编号',
    dataIndex: 'code',
    key: 'code',
    width: 100
  },
  {
    title: '品种名称',
    dataIndex: 'name',
    key: 'name',
    ellipsis: true
  },
  {
    title: '品种类型',
    dataIndex: 'breedType',
    key: 'breedType',
    width: 100,
    customRender: ({ text }) => getBreedTypeText(text)
  },
  {
    title: '培育单位',
    dataIndex: 'breedingUnit',
    key: 'breedingUnit',
    width: 150
  },
  {
    title: '推广状态',
    dataIndex: 'status',
    key: 'status',
    width: 100
  },
  {
    title: '培育开始时间',
    dataIndex: 'startTime',
    key: 'startTime',
    width: 120
  },
  {
    title: '资料数量',
    dataIndex: 'relatedFiles',
    key: 'fileCount',
    width: 100,
    customRender: ({ text }) => text && text.length ? text.length : 0
  },
  {
    title: '操作',
    key: 'action',
    width: 180,
    fixed: 'right'
  }
]

// 获取状态颜色
const getStatusColor = (status) => {
  switch (status) {
    case 'developing': return 'orange'
    case 'promoting': return 'blue'
    case 'promoted': return 'green'
    default: return 'default'
  }
}

// 获取状态文本
const getStatusText = (status) => {
  switch (status) {
    case 'developing': return '开发中'
    case 'promoting': return '推广中'
    case 'promoted': return '已推广'
    default: return status
  }
}

// 获取品种类型文本
const getBreedTypeText = (breedType) => {
  switch (breedType) {
    case 'local': return '地方品种'
    case 'improved': return '培育品种'
    case 'imported': return '引进品种'
    default: return breedType
  }
}

// 搜索处理
const handleSearch = () => {
  console.log('搜索条件:', {
    keyword: searchKeyword.value,
    breedType: breedTypeFilter.value,
    status: statusFilter.value
  })
  // 这里应该有实际的搜索逻辑
  // 模拟搜索后的总数
  pagination.total = breedsData.value.length
}

// 重置处理
const handleReset = () => {
  searchKeyword.value = ''
  breedTypeFilter.value = ''
  statusFilter.value = ''
  selectedRowKeys.value = []
}

// 导入处理
const handleImport = () => {
  console.log('导入品种数据')
  // 这里应该有实际的导入逻辑
}

// 导出处理
const handleExport = () => {
  console.log('导出品种数据')
  // 这里应该有实际的导出逻辑
}

// 新增品种
const handleAddBreed = () => {
  // 重置当前品种数据
  Object.assign(currentBreed, {
    id: '',
    code: '',
    name: '',
    breedType: '',
    status: 'developing',
    breedingUnit: '',
    breedingManager: '',
    startTime: '',
    expectedEndTime: '',
    maleParent: '',
    femaleParent: '',
    characteristics: '',
    promotionStatus: '',
    remark: '',
    relatedFiles: []
  })
  isAddEditModalOpen.value = true
}

// 编辑品种
const handleEdit = (record) => {
  // 复制记录数据到当前品种
  Object.assign(currentBreed, JSON.parse(JSON.stringify(record)))
  isAddEditModalOpen.value = true
}

// 查看品种
const handleView = (record) => {
  viewBreed.value = JSON.parse(JSON.stringify(record))
  isViewModalOpen.value = true
}

// 删除品种
const handleDelete = (id) => {
  console.log('删除品种:', id)
  // 这里应该有实际的删除逻辑和确认提示
  // 模拟删除成功
  alert(`成功删除品种ID: ${id}`)
}

// 保存品种
const handleSave = () => {
  console.log('保存品种:', currentBreed)
  // 这里应该有实际的保存逻辑
  // 模拟保存成功
  isAddEditModalOpen.value = false
  alert('保存成功')
}

// 上传资料
const handleUpload = (id) => {
  const breed = breedsData.value.find(item => item.id === id)
  if (breed) {
    currentUploadBreedId.value = id
    uploadingBreedName.value = breed.name
    fileList.value = []
    isUploadModalOpen.value = true
  }
}

// 文件变化处理
const handleFileChange = ({ fileList: newFileList }) => {
  fileList.value = newFileList
}

// 拖放处理
const handleDrop = (e) => {
  console.log('Dropped files', e.dataTransfer.files)
}

// 确认上传
const handleConfirmUpload = () => {
  console.log('上传文件:', fileList.value)
  console.log('品种ID:', currentUploadBreedId.value)
  // 这里应该有实际的文件上传逻辑
  // 模拟上传成功
  isUploadModalOpen.value = false
  alert('文件上传成功')
}

// 初始化品种分布图表
const initBreedChart = () => {
  if (!breedChartRef.value) return
  
  const chart = echarts.init(breedChartRef.value)
  
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      data: ['地方品种', '培育品种', '引进品种']
    },
    series: [
      {
        name: '品种类型分布',
        type: 'pie',
        radius: '60%',
        center: ['50%', '50%'],
        data: [
          { value: 8, name: '地方品种' },
          { value: 12, name: '培育品种' },
          { value: 8, name: '引进品种' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  
  chart.setOption(option)
  
  window.addEventListener('resize', () => {
    chart.resize()
  })
}

// 组件挂载时初始化图表
onMounted(() => {
  setTimeout(() => {
    initBreedChart()
  }, 100)
})

// 初始化数据
pagination.total = breedsData.value.length
</script>

<style scoped>
  .breed-detail {
    padding: 16px;
  }
  
  .detail-row {
    display: flex;
    margin-bottom: 16px;
    align-items: flex-start;
  }
  
  .detail-label {
    width: 120px;
    font-weight: bold;
    color: #666;
  }
  
  .detail-value {
    flex: 1;
    color: #333;
  }
  
  .file-item {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
  }
  
  .file-size {
    margin-left: 8px;
    color: #8c8c8c;
    font-size: 12px;
  }
</style>