<template>
  <!-- 巡检路径管理组件模板 -->
  <div class="p-4">
    <h2 class="text-xl font-bold text-blue-400 mb-4">巡检路径管理</h2>
    
    <!-- 工具栏 -->
    <div class="flex justify-between items-center mb-4">
      <div class="flex gap-4">
        <el-button type="primary" @click="handleAddPath" icon="Plus">新增路径</el-button>
        <el-button @click="handleRefresh" icon="Refresh">刷新</el-button>
      </div>
      
      <!-- 搜索框 -->
      <el-input
        v-model="searchKeyword"
        placeholder="搜索路径名称"
        prefix-icon="Search"
        style="width: 240px"
        @input="handleSearch"
      />
    </div>
    
    <!-- 路径列表表格 -->
    <el-table
      v-loading="loading"
      :data="pathList"
      style="width: 100%"
      @row-click="handleRowClick"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column prop="id" label="路径ID" width="100" align="center" />
      <el-table-column prop="name" label="路径名称" min-width="180" align="center" />
      <el-table-column prop="description" label="路径说明" min-width="250" align="center">
        <template #default="scope">
          <el-tooltip :content="scope.row.description" placement="top">
            <span>{{ scope.row.description.length > 20 ? scope.row.description.substring(0, 20) + '...' : scope.row.description }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="pointCount" label="路径点数量" width="120" align="center" />
      <el-table-column prop="createTime" label="创建时间" width="180" align="center" />
      <el-table-column prop="updateTime" label="更新时间" width="180" align="center" />
      <el-table-column label="操作" width="180" align="center" fixed="right">
        <template #default="scope">
          <el-button size="small" @click="handleEditPath(scope.row)" icon="Edit">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDeletePath(scope.row)" icon="Delete">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <!-- 分页组件 -->
    <div class="mt-4 flex justify-end">
      <el-pagination
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    
    <!-- 路径编辑对话框 -->
    <PathEditor
      v-model:visible="editorVisible"
      :path-data="currentPath"
      @save="handleSavePath"
    />
  </div>
</template>

<script lang="ts" setup>
/**
 * 巡检路径管理组件
 * 用于管理和维护巡检路径信息
 */
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import PathEditor from './PathEditor.vue'

// 路由相关
const router = useRouter()

// 状态管理
const loading = ref(false)
const searchKeyword = ref('')
const editorVisible = ref(false)
const selectedPaths = ref([])
const currentPath = ref(null)

// 分页数据
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

// 路径列表数据
const pathList = ref([])

/**
 * 初始化数据
 */
onMounted(() => {
  fetchPathList()
})

/**
 * 获取路径列表数据
 */
const fetchPathList = async () => {
  loading.value = true
  try {
    // 模拟API请求
    // 实际应用中应替换为真实的API调用
    const mockData = generateMockPaths()
    
    // 应用搜索过滤
    let filteredData = mockData
    if (searchKeyword.value) {
      filteredData = mockData.filter(item => 
        item.name.toLowerCase().includes(searchKeyword.value.toLowerCase())
      )
    }
    
    // 更新分页数据
    pagination.total = filteredData.length
    
    // 应用分页
    const start = (pagination.currentPage - 1) * pagination.pageSize
    const end = start + pagination.pageSize
    pathList.value = filteredData.slice(start, end)
    
  } catch (error) {
    console.error('获取路径列表失败:', error)
    ElMessage.error('获取路径列表失败，请重试')
    pathList.value = []
  } finally {
    loading.value = false
  }
}

/**
 * 生成模拟数据
 * 实际应用中应通过API获取
 */
const generateMockPaths = () => {
  return [
    {
      id: '1',
      name: '新库区巡检路径',
      description: '覆盖新库区所有仓库区域的标准巡检路径',
      pointCount: 12,
      points: [
        { id: '1-1', index: 1, deviceName: '摄像头1', modelId: 'mgt1aol3kro' },
        { id: '1-2', index: 2, deviceName: '摄像头2', modelId: 'mgt1gz9s54s' },
        { id: '1-3', index: 3, deviceName: '摄像头3', modelId: 'mgt1ho9dzhn' },
        { id: '1-4', index: 4, deviceName: '摄像头4', modelId: 'mgt1n0wylmd' },
        { id: '1-5', index: 5, deviceName: '摄像头5', modelId: 'mgt1nboirj' },
        { id: '1-6', index: 6, deviceName: '摄像头6', modelId: 'mguoz4gy4x' },
        { id: '1-7', index: 7, deviceName: '摄像头7', modelId: 'mgt2cbv7k2d' },
        { id: '1-8', index: 8, deviceName: '摄像头8', modelId: 'mgt1njgpgpt' },
        { id: '1-9', index: 9, deviceName: '摄像头9', modelId: 'mgt1nuwisti' },
        { id: '1-10', index: 10, deviceName: '摄像头10', modelId: 'mgt1o6aqek' },
        { id: '1-11', index: 11, deviceName: '摄像头11', modelId: 'mgulf1e5mi' },
        { id: '1-12', index: 12, deviceName: '摄像头14', modelId: 'mgt1oylmwuf' }
      ],
      createTime: '2024-04-01 10:30:00',
      updateTime: '2024-04-10 14:20:00'
    },
    {
      id: '2',
      name: '新库区入口巡检路径',
      description: '新库区入口安全检查专用路线',
      pointCount: 5,
      points: [
        { id: '2-1', index: 1, deviceName: '摄像头18', modelId: 'mgt24lo3m4e' },
        { id: '2-2', index: 2, deviceName: '摄像头17', modelId: 'mgt24kocdw' },
        { id: '2-3', index: 3, deviceName: '摄像头16', modelId: 'mgt24gkj4on' },
        { id: '2-4', index: 4, deviceName: '摄像头12', modelId: 'mgt1oi96hsf' },
        { id: '2-5', index: 5, deviceName: '摄像头13', modelId: 'mgt1op9e61d' }
      ],
      createTime: '2024-04-05 09:15:00',
      updateTime: '2024-04-05 09:15:00'
    }
  ]
}

/**
 * 处理添加路径
 */
const handleAddPath = () => {
  currentPath.value = null
  editorVisible.value = true
}

/**
 * 处理编辑路径
 */
const handleEditPath = (path) => {
  currentPath.value = JSON.parse(JSON.stringify(path)) // 深拷贝
  editorVisible.value = true
}

/**
 * 处理删除路径
 */
const handleDeletePath = async (path) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除路径「${path.name}」吗？`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    // 模拟删除操作
    // 实际应用中应调用API删除
    ElMessage.success('路径删除成功')
    fetchPathList() // 重新获取列表
  } catch (error) {
    // 用户取消删除
  }
}

/**
 * 处理保存路径
 */
const handleSavePath = (pathData) => {
  // 模拟保存操作
  // 实际应用中应调用API保存
  ElMessage.success('路径保存成功')
  editorVisible.value = false
  fetchPathList() // 重新获取列表
}

/**
 * 处理表格行点击
 */
const handleRowClick = (row) => {
  // 可以在这里处理点击行的逻辑，比如查看详情
}

/**
 * 处理选择变化
 */
const handleSelectionChange = (selection) => {
  selectedPaths.value = selection
}

/**
 * 处理搜索
 */
const handleSearch = () => {
  pagination.currentPage = 1 // 重置到第一页
  fetchPathList()
}

/**
 * 处理刷新
 */
const handleRefresh = () => {
  searchKeyword.value = ''
  pagination.currentPage = 1
  fetchPathList()
}

/**
 * 处理分页大小变化
 */
const handleSizeChange = (size) => {
  pagination.pageSize = size
  fetchPathList()
}

/**
 * 处理页码变化
 */
const handleCurrentChange = (current) => {
  pagination.currentPage = current
  fetchPathList()
}
</script>

<style scoped>
/**
 * 巡检路径管理组件样式
 * 保持与系统整体风格一致，使用空军蓝配色和透明背景
 */
/* 设置页面背景为透明 */
.p-4 {
  background-color: transparent !important;
}

/* 标题样式 */
.text-xl {
  font-size: 20px;
}

.font-bold {
  font-weight: 600;
}

.text-blue-400 {
  color: #68c9ff;
}

.mb-4 {
  margin-bottom: 16px;
}

/* 表格样式 */
:deep(.el-table) {
  background: rgba(12, 43, 77, 0.7) !important;
  border: 1px solid #68c9ff;
  backdrop-filter: blur(5px);
}

:deep(.el-table__header-wrapper th) {
  background: rgba(20, 60, 110, 0.8) !important;
  color: #68c9ff !important;
  border-bottom: 1px solid #68c9ff !important;
}

:deep(.el-table__body-wrapper tr) {
  background: transparent !important;
}

:deep(.el-table__body-wrapper tr:nth-child(even)) {
  background: rgba(20, 60, 110, 0.3) !important;
}

:deep(.el-table__body-wrapper tr:hover) {
  background: rgba(104, 201, 255, 0.2) !important;
}

:deep(.el-table__body-wrapper td) {
  color: #b6dfff !important;
  border-bottom: 1px solid rgba(104, 201, 255, 0.3) !important;
}

/* 分页组件样式 */
:deep(.el-pagination) {
  color: #68c9ff !important;
}

:deep(.el-pagination button) {
  background: transparent !important;
  border-color: #68c9ff !important;
  color: #68c9ff !important;
}

:deep(.el-pagination__sizes .el-input .el-input__wrapper) {
  background: transparent !important;
  border-color: #68c9ff !important;
}

:deep(.el-pagination__sizes .el-input .el-input__inner) {
  background: transparent !important;
  color: #68c9ff !important;
}

:deep(.el-pagination__jump .el-input .el-input__wrapper) {
  background: transparent !important;
  border-color: #68c9ff !important;
}

:deep(.el-pagination__jump .el-input .el-input__inner) {
  background: transparent !important;
  color: #68c9ff !important;
}

:deep(.el-pager li.active) {
  color: #68c9ff !important;
}
</style>