<template>
  <div>
    <h1>服务管理</h1>
    <a-card style="margin-bottom: 16px;">
      <a-row gutter={24}>
        <a-col :span="8">
          <a-button type="primary" @click="handleAddService">添加服务</a-button>
          <a-button style="margin-left: 8px;" @click="handleImportServices">导入服务</a-button>
          <a-button style="margin-left: 8px;" @click="handleExportServices">导出服务</a-button>
        </a-col>
        <a-col :span="16" style="text-align: right;">
          <a-input-search
            placeholder="搜索服务名称或编号"
            allow-clear
            enter-button="搜索"
            size="large"
            style="width: 300px;"
            @search="handleSearch"
          />
        </a-col>
      </a-row>
    </a-card>
    
    <!-- 服务列表 -->
    <a-card title="服务列表">
      <a-row gutter={24} style="margin-bottom: 16px;">
        <a-col :span="6">
          <a-select v-model:value="filterCategory" placeholder="筛选服务类型" allow-clear>
            <a-select-option value="policy">政策咨询</a-select-option>
            <a-select-option value="technical">技术指导</a-select-option>
            <a-select-option value="training">培训服务</a-select-option>
            <a-select-option value="epidemic">疫情防控</a-select-option>
            <a-select-option value="other">其他服务</a-select-option>
          </a-select>
        </a-col>
        <a-col :span="6">
          <a-select v-model:value="filterStatus" placeholder="筛选服务状态" allow-clear>
            <a-select-option value="active">启用</a-select-option>
            <a-select-option value="inactive">禁用</a-select-option>
          </a-select>
        </a-col>
        <a-col :span="6">
          <a-select v-model:value="filterPriority" placeholder="筛选优先级" allow-clear>
            <a-select-option value="high">高</a-select-option>
            <a-select-option value="medium">中</a-select-option>
            <a-select-option value="low">低</a-select-option>
          </a-select>
        </a-col>
      </a-row>
      
      <a-table :columns="serviceColumns" :data-source="serviceList" :pagination="pagination" row-key="id">
        <template #bodyCell:status="{ record }">
          <a-switch :checked="record.status === 'active'" @change="handleStatusChange(record.id, $event)" />
        </template>
        <template #bodyCell:priority="{ record }">
          <a-tag :color="getPriorityColor(record.priority)">{{ getPriorityText(record.priority) }}</a-tag>
        </template>
        <template #bodyCell:action="{ record }">
          <a-space>
            <a-button type="link" @click="handleViewService(record)">查看</a-button>
            <a-button type="link" @click="handleEditService(record)">编辑</a-button>
            <a-button type="link" danger @click="handleDeleteService(record.id)">删除</a-button>
          </a-space>
        </template>
      </a-table>
    </a-card>
    
    <!-- 添加/编辑服务对话框 -->
    <a-modal
      v-model:open="serviceModalVisible"
      :title="serviceModalTitle"
      @ok="handleServiceModalOk"
      @cancel="handleServiceModalCancel"
    >
      <a-form :model="serviceForm" layout="vertical">
        <a-form-item label="服务名称" name="name" :rules="[{ required: true, message: '请输入服务名称' }]">
          <a-input v-model:value="serviceForm.name" placeholder="请输入服务名称" />
        </a-form-item>
        <a-form-item label="服务编号" name="code" :rules="[{ required: true, message: '请输入服务编号' }]">
          <a-input v-model:value="serviceForm.code" placeholder="请输入服务编号" />
        </a-form-item>
        <a-form-item label="服务类型" name="category" :rules="[{ required: true, message: '请选择服务类型' }]">
          <a-select v-model:value="serviceForm.category" placeholder="请选择服务类型">
            <a-select-option value="policy">政策咨询</a-select-option>
            <a-select-option value="technical">技术指导</a-select-option>
            <a-select-option value="training">培训服务</a-select-option>
            <a-select-option value="epidemic">疫情防控</a-select-option>
            <a-select-option value="other">其他服务</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="服务描述" name="description" :rules="[{ required: true, message: '请输入服务描述' }]">
          <a-textarea v-model:value="serviceForm.description" placeholder="请输入服务描述" rows="4" />
        </a-form-item>
        <a-form-item label="负责人" name="manager" :rules="[{ required: true, message: '请输入负责人' }]">
          <a-input v-model:value="serviceForm.manager" placeholder="请输入负责人" />
        </a-form-item>
        <a-form-item label="联系方式" name="contact" :rules="[{ required: true, message: '请输入联系方式' }]">
          <a-input v-model:value="serviceForm.contact" placeholder="请输入联系方式" />
        </a-form-item>
        <a-form-item label="优先级" name="priority" :rules="[{ required: true, message: '请选择优先级' }]">
          <a-select v-model:value="serviceForm.priority" placeholder="请选择优先级">
            <a-select-option value="high">高</a-select-option>
            <a-select-option value="medium">中</a-select-option>
            <a-select-option value="low">低</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="状态" name="status" :rules="[{ required: true, message: '请选择状态' }]">
          <a-select v-model:value="serviceForm.status" placeholder="请选择状态">
            <a-select-option value="active">启用</a-select-option>
            <a-select-option value="inactive">禁用</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import axios from 'axios'
import dayjs from 'dayjs'

// 分页配置
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0
})

// 筛选条件
const filterCategory = ref('')
const filterStatus = ref('')
const filterPriority = ref('')

// 服务列表数据
const serviceList = ref([
  {
    id: '1',
    name: '政策咨询服务',
    code: 'SVC001',
    category: 'policy',
    description: '提供养殖相关政策咨询和解读服务',
    manager: '张三',
    contact: '13800138001',
    priority: 'high',
    status: 'active',
    createTime: '2024-01-15T09:30:00Z',
    updateTime: '2024-04-10T14:20:00Z'
  },
  {
    id: '2',
    name: '养殖技术指导',
    code: 'SVC002',
    category: 'technical',
    description: '提供养殖场技术指导和问题解决服务',
    manager: '李四',
    contact: '13800138002',
    priority: 'medium',
    status: 'active',
    createTime: '2024-01-20T10:15:00Z',
    updateTime: '2024-04-09T16:45:00Z'
  },
  {
    id: '3',
    name: '防疫培训服务',
    code: 'SVC003',
    category: 'training',
    description: '提供动物防疫知识培训和技能提升服务',
    manager: '王五',
    contact: '13800138003',
    priority: 'high',
    status: 'active',
    createTime: '2024-02-01T14:30:00Z',
    updateTime: '2024-04-08T10:15:00Z'
  },
  {
    id: '4',
    name: '疫情监测服务',
    code: 'SVC004',
    category: 'epidemic',
    description: '提供动物疫情监测和预警服务',
    manager: '赵六',
    contact: '13800138004',
    priority: 'high',
    status: 'active',
    createTime: '2024-02-15T11:45:00Z',
    updateTime: '2024-04-07T13:30:00Z'
  },
  {
    id: '5',
    name: '资料查询服务',
    code: 'SVC005',
    category: 'other',
    description: '提供养殖相关资料查询和借阅服务',
    manager: '钱七',
    contact: '13800138005',
    priority: 'low',
    status: 'inactive',
    createTime: '2024-01-10T09:00:00Z',
    updateTime: '2024-03-01T16:20:00Z'
  }
])

// 服务表格列定义
const serviceColumns = [
  {
    title: '服务名称',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '服务编号',
    dataIndex: 'code',
    key: 'code'
  },
  {
    title: '服务类型',
    dataIndex: 'category',
    key: 'category',
    customRender: (text) => {
      const categoryMap = {
        policy: '政策咨询',
        technical: '技术指导',
        training: '培训服务',
        epidemic: '疫情防控',
        other: '其他服务'
      }
      return categoryMap[text] || text
    }
  },
  {
    title: '负责人',
    dataIndex: 'manager',
    key: 'manager'
  },
  {
    title: '联系方式',
    dataIndex: 'contact',
    key: 'contact'
  },
  {
    title: '优先级',
    dataIndex: 'priority',
    key: 'priority'
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status'
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
    customRender: (text) => dayjs(text).format('YYYY-MM-DD HH:mm')
  },
  {
    title: '更新时间',
    dataIndex: 'updateTime',
    key: 'updateTime',
    customRender: (text) => dayjs(text).format('YYYY-MM-DD HH:mm')
  },
  {
    title: '操作',
    key: 'action',
    width: 150,
    fixed: 'right'
  }
]

// 模态框配置
const serviceModalVisible = ref(false)
const serviceModalTitle = ref('添加服务')
const serviceForm = reactive({
  id: '',
  name: '',
  code: '',
  category: '',
  description: '',
  manager: '',
  contact: '',
  priority: 'medium',
  status: 'active'
})

// 获取优先级颜色
const getPriorityColor = (priority) => {
  const colorMap = {
    high: 'red',
    medium: 'orange',
    low: 'green'
  }
  return colorMap[priority] || 'default'
}

// 获取优先级文本
const getPriorityText = (priority) => {
  const textMap = {
    high: '高',
    medium: '中',
    low: '低'
  }
  return textMap[priority] || priority
}

// 搜索服务
const handleSearch = (keyword) => {
  // 这里应该有实际的搜索逻辑
  console.log('搜索服务:', keyword)
}

// 添加服务
const handleAddService = () => {
  serviceModalTitle.value = '添加服务'
  Object.keys(serviceForm).forEach(key => {
    serviceForm[key] = ''
  })
  serviceForm.priority = 'medium'
  serviceForm.status = 'active'
  serviceModalVisible.value = true
}

// 编辑服务
const handleEditService = (service) => {
  serviceModalTitle.value = '编辑服务'
  Object.keys(serviceForm).forEach(key => {
    serviceForm[key] = service[key] || ''
  })
  serviceModalVisible.value = true
}

// 查看服务
const handleViewService = (service) => {
  console.log('查看服务:', service)
}

// 删除服务
const handleDeleteService = (id) => {
  console.log('删除服务:', id)
}

// 切换服务状态
const handleStatusChange = (id, checked) => {
  console.log('切换服务状态:', id, checked ? 'active' : 'inactive')
}

// 导入服务
const handleImportServices = () => {
  console.log('导入服务')
}

// 导出服务
const handleExportServices = () => {
  console.log('导出服务')
}

// 模态框确认
const handleServiceModalOk = () => {
  console.log('提交表单:', serviceForm)
  serviceModalVisible.value = false
}

// 模态框取消
const handleServiceModalCancel = () => {
  serviceModalVisible.value = false
}
</script>

<style scoped>
  .stat-card {
    height: 100%;
  }
  
  .stat-content {
    text-align: center;
  }
  
  .stat-number {
    font-size: 24px;
    font-weight: bold;
    color: #1890ff;
  }
  
  .stat-label {
    font-size: 14px;
    color: #666;
    margin-top: 8px;
  }
</style>