<template>
  <div class="devinfo-page">
    <!-- 搜索栏 -->
    <el-card class="search-card" shadow="never">
      <div class="search-bar">
        <el-form :inline="true" :model="queryForm" label-width="100px">
          <el-form-item label="设备名称">
            <el-input
              v-model="queryForm.devName"
              placeholder="输入设备名称"
              clearable
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item label="设备状态">
            <el-select
              v-model="queryForm.status"
              placeholder="请选择设备状态"
              clearable
              style="width: 200px"
            >
              <el-option label="空闲" :value="0" />
              <el-option label="运行" :value="1" />
              <el-option label="故障" :value="4" />
            </el-select>
          </el-form-item>
          <el-form-item label="所属功能岛">
            <el-select
              v-model="queryForm.islandId"
              placeholder="请选择功能岛"
              clearable
              style="width: 200px"
            >
              <el-option
                v-for="island in islandList"
                :key="island.id"
                :label="island.islandName || island.name"
                :value="island.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button @click="resetSearch">重置</el-button>
          </el-form-item>
        </el-form>
        <div class="toolbar">
          <el-button type="primary" @click="handleAdd">
            <el-icon><Plus /></el-icon>
            新增设备
          </el-button>
        </div>
      </div>
    </el-card>

    <!-- 设备列表 -->
    <el-card shadow="never">
      <el-table
        v-loading="loading"
        :data="deviceList"
        border
        stripe
        style="width: 100%"
      >
        <el-table-column type="index" label="序号" width="60" :index="getIndex" />
        <el-table-column prop="devName" label="设备名称" min-width="120" show-overflow-tooltip>
          <template #default="{ row }">
            {{ row.devName || '暂无' }}
          </template>
        </el-table-column>
        <el-table-column prop="devModel" label="设备型号" min-width="120" show-overflow-tooltip>
          <template #default="{ row }">
            {{ row.devModel || '暂无' }}
          </template>
        </el-table-column>
        <el-table-column prop="ipAddr" label="IP地址" min-width="120" show-overflow-tooltip>
          <template #default="{ row }">
            {{ row.ipAddr || '暂无' }}
          </template>
        </el-table-column>
        <el-table-column prop="port" label="端口" width="80">
          <template #default="{ row }">
            {{ row.port !== null && row.port !== undefined ? row.port : '暂无' }}
          </template>
        </el-table-column>
        <el-table-column prop="protocolType" label="协议" min-width="100" show-overflow-tooltip>
          <template #default="{ row }">
            {{ row.protocolType || '暂无' }}
          </template>
        </el-table-column>
        <el-table-column prop="company" label="公司名" min-width="120" show-overflow-tooltip>
          <template #default="{ row }">
            {{ row.company || '暂无' }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100" align="center">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)" size="small">
              {{ getStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="islandId" label="所属功能岛" width="150">
          <template #default="{ row }">
            {{ getIslandName(row.islandId) }}
          </template>
        </el-table-column>
        <el-table-column prop="devDesc" label="描述" min-width="150" show-overflow-tooltip>
          <template #default="{ row }">
            {{ row.devDesc || '暂无' }}
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" min-width="150" show-overflow-tooltip>
          <template #default="{ row }">
            {{ row.remark || '暂无' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150" fixed="right">
          <template #default="{ row }">
            <el-button
              type="primary"
              size="small"
              link
              @click="handleEdit(row)"
            >
              <el-icon><Edit /></el-icon>
              编辑
            </el-button>
            <el-button
              type="danger"
              size="small"
              link
              @click="handleDelete(row)"
            >
              <el-icon><Delete /></el-icon>
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="pagination.pageNum"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          background
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </el-card>

    <!-- 新增/编辑抽屉 -->
    <el-drawer
      v-model="drawerVisible"
      :title="drawerTitle"
      direction="rtl"
      size="500px"
      :before-close="handleDrawerClose"
    >
      <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-width="100px"
        label-position="left"
      >
        <el-form-item label="设备名称" prop="devName">
          <el-input
            v-model="formData.devName"
            placeholder="请输入设备名称"
            clearable
          />
        </el-form-item>
        <el-form-item label="设备型号" prop="devModel">
          <el-input
            v-model="formData.devModel"
            placeholder="请输入设备型号"
            clearable
          />
        </el-form-item>
        <el-form-item label="IP地址" prop="ipAddr">
          <el-input
            v-model="formData.ipAddr"
            placeholder="请输入IP地址"
            clearable
          />
        </el-form-item>
        <el-form-item label="端口" prop="port">
          <el-input-number
            v-model="formData.port"
            placeholder="请输入端口"
            :min="0"
            :max="65535"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="协议" prop="protocolType">
          <el-input
            v-model="formData.protocolType"
            placeholder="请输入协议类型"
            clearable
          />
        </el-form-item>
        <el-form-item label="公司名" prop="company">
          <el-input
            v-model="formData.company"
            placeholder="请输入公司名"
            clearable
          />
        </el-form-item>
        <el-form-item label="描述" prop="devDesc">
          <el-input
            v-model="formData.devDesc"
            type="textarea"
            :rows="3"
            placeholder="请输入描述"
            clearable
          />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="formData.remark"
            type="textarea"
            :rows="3"
            placeholder="请输入备注"
            clearable
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="drawer-footer">
          <el-button @click="handleDrawerClose">取消</el-button>
          <el-button type="primary" @click="handleSubmit" :loading="submitting">
            确定
          </el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Edit, Delete } from '@element-plus/icons-vue'
import {
  devInfoadd,
  devInfodel,
  devInfoupd,
  devInfolist,
  devInfobyid,
} from '@/api/tb/devinfo'
import { islandInfobyid, islandInfolist } from '@/api/tb/islandinfo'

// 加载状态
const loading = ref(false)
const submitting = ref(false)

// 设备列表
const deviceList = ref<any[]>([])
const total = ref(0)

// 功能岛列表和映射
const islandList = ref<any[]>([])
const islandMap = ref<Record<number, string>>({})

// 查询表单
const queryForm = reactive({
  devName: '',
  status: undefined as number | undefined,
  islandId: undefined as number | undefined,
})

// 分页
const pagination = reactive({
  pageNum: 1,
  pageSize: 10,
})

// 抽屉相关
const drawerVisible = ref(false)
const drawerTitle = ref('新增设备')
const isEdit = ref(false)
const formRef = ref()

// 表单数据
const formData = reactive({
  id: undefined,
  devName: '',
  devModel: '',
  ipAddr: '',
  port: undefined,
  protocolType: '',
  company: '',
  devDesc: '',
  remark: '',
  status: 0, // 状态自动设置为0
})

// 表单验证规则
const formRules = {
  devName: [
    { required: true, message: '请输入设备名称', trigger: 'blur' },
  ],
}

// 获取序号
const getIndex = (index: number) => {
  return (pagination.pageNum - 1) * pagination.pageSize + index + 1
}

// 获取状态类型
const getStatusType = (status: number | null | undefined) => {
  if (status === 0) return 'success' // 空闲 - 绿色
  if (status === 1) return 'warning' // 运行 - 黄色
  if (status === 4) return 'danger' // 故障 - 红色
  return 'info'
}

// 获取状态文本
const getStatusText = (status: number | null | undefined) => {
  if (status === 0) return '空闲'
  if (status === 1) return '运行'
  if (status === 4) return '故障'
  return '未知'
}

// 获取功能岛列表
const getIslandList = async () => {
  try {
    const res: any = await islandInfolist({
      pageNum: 1,
      pageSize: 1000, // 获取所有功能岛
    })
    
    const data = res?.data ?? res ?? {}
    const recordsFromData =
      data.records ||
      data.list ||
      data.rows ||
      data.items ||
      (Array.isArray(data.data) ? data.data : undefined)

    const records = Array.isArray(recordsFromData)
      ? recordsFromData
      : Array.isArray(data)
        ? data
        : []

    islandList.value = records
    
    // 建立ID到名称的映射
    const map: Record<number, string> = {}
    records.forEach((island: any) => {
      if (island.id !== null && island.id !== undefined) {
        map[island.id] = island.islandName || island.name || '未命名功能岛'
      }
    })
    islandMap.value = map
  } catch (error) {
    console.error('获取功能岛列表失败:', error)
  }
}

// 获取功能岛名称
const getIslandName = (islandId: number | null | undefined) => {
  if (islandId === null || islandId === undefined || islandId === 0) {
    return '暂未绑定功能岛'
  }
  return islandMap.value[islandId] || `功能岛${islandId}`
}

// 获取设备列表
const getDeviceList = async () => {
  try {
    loading.value = true
    const params: any = {
      pageNum: pagination.pageNum,
      pageSize: pagination.pageSize,
    }
    
    // 设备名称模糊查询
    if (queryForm.devName) {
      params.devName = queryForm.devName
    }
    // 设备状态精确查询
    if (queryForm.status !== undefined && queryForm.status !== null) {
      params.status = queryForm.status
    }
    // 所属功能岛精确查询
    if (queryForm.islandId !== undefined && queryForm.islandId !== null) {
      params.islandId = queryForm.islandId
    }
    
    const res: any = await devInfolist(params)
    
    const data = res?.data ?? res ?? {}
    
    // 兼容多种返回格式
    const recordsFromData =
      data.records ||
      data.list ||
      data.rows ||
      data.items ||
      (Array.isArray(data.data) ? data.data : undefined)

    const records = Array.isArray(recordsFromData)
      ? recordsFromData
      : Array.isArray(data)
        ? data
        : []

    const totalValue =
      data.total ?? data.count ?? data.totalCount ?? records.length ?? 0

    deviceList.value = records
    total.value = Number(totalValue) || 0
  } catch (error) {
    console.error('获取设备列表失败:', error)
    ElMessage.error('获取设备列表失败')
  } finally {
    loading.value = false
  }
}

// 查询
const handleSearch = () => {
  pagination.pageNum = 1
  getDeviceList()
}

// 重置查询
const resetSearch = () => {
  queryForm.devName = ''
  queryForm.status = undefined
  queryForm.islandId = undefined
  handleSearch()
}

// 分页大小改变
const handleSizeChange = (size: number) => {
  pagination.pageSize = size
  getDeviceList()
}

// 当前页改变
const handleCurrentChange = (page: number) => {
  pagination.pageNum = page
  getDeviceList()
}

// 打开新增抽屉
const handleAdd = () => {
  isEdit.value = false
  drawerTitle.value = '新增设备'
  resetForm()
  drawerVisible.value = true
}

// 重置表单
const resetForm = () => {
  formData.id = undefined
  formData.devName = ''
  formData.devModel = ''
  formData.ipAddr = ''
  formData.port = undefined
  formData.protocolType = ''
  formData.company = ''
  formData.devDesc = ''
  formData.remark = ''
  formData.status = 0
  formRef.value?.clearValidate()
}

// 编辑设备
const handleEdit = async (item: any) => {
  try {
    loading.value = true
    const res: any = await devInfobyid(item.id)
    
    const data = res?.data ?? res ?? {}
    
    formData.id = data.id ?? item.id
    formData.devName = data.devName ?? ''
    formData.devModel = data.devModel ?? ''
    formData.ipAddr = data.ipAddr ?? ''
    formData.port = data.port ?? undefined
    formData.protocolType = data.protocolType ?? ''
    formData.company = data.company ?? ''
    formData.devDesc = data.devDesc ?? ''
    formData.remark = data.remark ?? ''
    formData.status = data.status ?? 0
    
    isEdit.value = true
    drawerTitle.value = '编辑设备'
    drawerVisible.value = true
  } catch (error) {
    console.error('获取设备信息失败:', error)
    ElMessage.error('获取设备信息失败')
  } finally {
    loading.value = false
  }
}

// 删除设备
const handleDelete = async (item: any) => {
  try {
    // 检查设备是否绑定了功能岛
    if (item.islandId && item.islandId !== 0 && item.islandId !== '0') {
      // 查询功能岛名称
      let islandName = '功能岛'
      try {
        const islandRes: any = await islandInfobyid(item.islandId)
        if (islandRes?.code === '0' || islandRes?.code === 0) {
          const islandData = islandRes.data || islandRes || {}
          islandName = islandData.islandName || islandData.name || '功能岛'
        }
      } catch (error) {
        console.error('获取功能岛信息失败:', error)
      }
      
      await ElMessageBox.alert(
        `该设备已绑定${islandName}，请先完成解绑`,
        '提示',
        {
          confirmButtonText: '确定',
          type: 'warning',
        }
      )
      return
    }
    
    await ElMessageBox.confirm(
      `确定要删除设备"${item.devName || '未命名'}"吗？`,
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    
    loading.value = true
    const res: any = await devInfodel(item.id)
    
    if (res?.code === '0' || res?.code === 0 || res?.success) {
      ElMessage.success('删除成功')
      getDeviceList()
    } else {
      ElMessage.error(res?.message || res?.msg || '删除失败')
    }
  } catch (error: any) {
    if (error !== 'cancel') {
      console.error('删除设备失败:', error)
      ElMessage.error('删除设备失败')
    }
  } finally {
    loading.value = false
  }
}

// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    submitting.value = true
    
    // 构建提交数据，只包含非空字段（根据后端要求：非空则入库/更新）
    const submitData: any = {
      devName: formData.devName,
    }
    
    // 添加其他字段（如果非空）
    if (formData.devModel) {
      submitData.devModel = formData.devModel
    }
    if (formData.ipAddr) {
      submitData.ipAddr = formData.ipAddr
    }
    if (formData.port !== undefined && formData.port !== null) {
      submitData.port = formData.port
    }
    if (formData.protocolType) {
      submitData.protocolType = formData.protocolType
    }
    if (formData.company) {
      submitData.company = formData.company
    }
    if (formData.devDesc) {
      submitData.devDesc = formData.devDesc
    }
    if (formData.remark) {
      submitData.remark = formData.remark
    }
    
    let res: any
    if (isEdit.value && formData.id) {
      // 编辑 - 需要传入ID，其他字段可选(非空则更新)
      res = await devInfoupd({
        id: formData.id,
        ...submitData,
      })
    } else {
      // 新增 - 状态自动设置为0
      res = await devInfoadd({
        ...submitData,
        status: 0,
      })
    }
    
    if (res?.code === '0' || res?.code === 0 || res?.success) {
      ElMessage.success(isEdit.value ? '编辑成功' : '新增成功')
      drawerVisible.value = false
      getDeviceList()
    } else {
      ElMessage.error(res?.message || res?.msg || (isEdit.value ? '编辑失败' : '新增失败'))
    }
  } catch (error: any) {
    if (error !== false) {
      console.error('提交失败:', error)
      ElMessage.error('提交失败，请检查表单')
    }
  } finally {
    submitting.value = false
  }
}

// 关闭抽屉
const handleDrawerClose = () => {
  drawerVisible.value = false
  resetForm()
}

// 初始化
onMounted(() => {
  getIslandList().then(() => {
    getDeviceList()
  })
})
</script>

<style lang="scss" scoped>
.devinfo-page {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.search-card {
  padding-bottom: 4px;
}

.search-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pagination {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}

.drawer-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>

