<template>
  <GiPageLayout>
    <GiTable
      row-key="id"
      title="软件管理"
      :data="dataList"
      :columns="tableColumns"
      :loading="loading"
      :scroll="{ x: '100%', y: '100%', minWidth: 1500 }"
      :pagination="pagination"
      @page-change="onPageChange"
      @page-size-change="onPageSizeChange"
      @refresh="search"
    >
      <template #top>
        <GiForm 
          v-model="searchForm" 
          search 
          :columns="queryFormColumns" 
          size="medium" 
          @search="search" 
          @reset="reset"
        />
      </template>
      
      <template #toolbar-left>
        <a-space>
          <a-button type="primary" @click="openAddModal">
            <template #icon><icon-plus /></template>
            <template #default>新增软件</template>
          </a-button>
          <a-button @click="softwareDiscovery">
            <template #icon><icon-search /></template>
            <template #default>软件发现</template>
          </a-button>
          <a-button @click="licenseManagement">
            <template #icon><icon-file /></template>
            <template #default>许可证管理</template>
          </a-button>
        </a-space>
      </template>
      
      <!-- 软件类型 -->
      <template #softwareType="{ record }">
        <a-tag :color="getSoftwareTypeColor(record.softwareType)">
          {{ record.softwareType }}
        </a-tag>
      </template>
      
      <!-- 软件状态 -->
      <template #status="{ record }">
        <a-tag :color="getStatusColor(record.status)">
          {{ getStatusText(record.status) }}
        </a-tag>
      </template>
      
      <!-- 许可证状态 -->
      <template #licenseStatus="{ record }">
        <a-tag :color="getLicenseStatusColor(record.licenseStatus)">
          {{ record.licenseStatus }}
        </a-tag>
      </template>
      
      <!-- 安装数量 -->
      <template #installCount="{ record }">
        <a-space>
          <span>{{ record.installedCount }}/{{ record.totalLicenses }}</span>
          <a-progress 
            :percent="Math.round((record.installedCount / record.totalLicenses) * 100)"
            size="small"
            :color="record.installedCount > record.totalLicenses ? '#ff4d4f' : '#52c41a'"
          />
        </a-space>
      </template>
      
      <!-- 操作列 -->
      <template #action="{ record }">
        <a-space>
          <a-link @click="viewDetail(record)">详情</a-link>
          <a-link @click="editRecord(record)">编辑</a-link>
          <a-link @click="installSoftware(record)">安装</a-link>
          <a-dropdown>
            <a-link>更多 <icon-down /></a-link>
            <template #content>
              <a-doption @click="updateSoftware(record)">更新</a-doption>
              <a-doption @click="uninstallSoftware(record)">卸载</a-doption>
              <a-doption @click="manageLicense(record)">许可证管理</a-doption>
              <a-doption @click="viewUsage(record)">使用统计</a-doption>
              <a-doption @click="deleteRecord(record)">删除软件</a-doption>
            </template>
          </a-dropdown>
        </a-space>
      </template>
    </GiTable>
  </GiPageLayout>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { Message } from '@arco-design/web-vue'
import type { TableColumnData } from '@arco-design/web-vue'

// 搜索表单
let searchForm = reactive({
  softwareName: '',
  softwareType: '',
  status: '',
  vendor: '',
  page: 1,
  size: 10
})

// 查询条件配置
const queryFormColumns = [
  {
    field: 'softwareName',
    label: '软件名称',
    type: 'input' as const,
    props: {
      placeholder: '请输入软件名称'
    }
  },
  {
    field: 'softwareType',
    label: '软件类型',
    type: 'select' as const,
    props: {
      placeholder: '请选择软件类型',
      options: [
        { label: '操作系统', value: '操作系统' },
        { label: '办公软件', value: '办公软件' },
        { label: '开发工具', value: '开发工具' },
        { label: '数据库', value: '数据库' },
        { label: '安全软件', value: '安全软件' },
        { label: '设计软件', value: '设计软件' }
      ]
    }
  },
  {
    field: 'status',
    label: '软件状态',
    type: 'select' as const,
    props: {
      placeholder: '请选择软件状态',
      options: [
        { label: '已安装', value: 'installed' },
        { label: '待安装', value: 'pending' },
        { label: '已过期', value: 'expired' },
        { label: '待更新', value: 'need_update' }
      ]
    }
  },
  {
    field: 'vendor',
    label: '厂商',
    type: 'input' as const,
    props: {
      placeholder: '请输入厂商名称'
    }
  }
]

// 表格列配置
const tableColumns: TableColumnData[] = [
  { title: '软件名称', dataIndex: 'softwareName', width: 200 },
  { title: '软件类型', dataIndex: 'softwareType', slotName: 'softwareType', width: 120 },
  { title: '版本号', dataIndex: 'version', width: 120 },
  { title: '厂商', dataIndex: 'vendor', width: 150 },
  { title: '状态', dataIndex: 'status', slotName: 'status', width: 100 },
  { title: '许可证状态', dataIndex: 'licenseStatus', slotName: 'licenseStatus', width: 120 },
  { title: '安装数量', dataIndex: 'installCount', slotName: 'installCount', width: 150 },
  { title: '购买日期', dataIndex: 'purchaseDate', width: 120 },
  { title: '到期日期', dataIndex: 'expiryDate', width: 120 },
  { title: '年费用', dataIndex: 'annualCost', width: 100 },
  { title: '负责人', dataIndex: 'manager', width: 100 },
  { title: '备注', dataIndex: 'remark', width: 200, ellipsis: true, tooltip: true },
  { title: '操作', slotName: 'action', width: 180, fixed: 'right' }
]

// 数据状态
const loading = ref(false)
const dataList = ref([
  {
    id: 1,
    softwareName: 'Microsoft Office 365',
    softwareType: '办公软件',
    version: '2024.1',
    vendor: 'Microsoft',
    status: 'installed',
    licenseStatus: '有效',
    installedCount: 125,
    totalLicenses: 150,
    purchaseDate: '2023-01-01',
    expiryDate: '2024-12-31',
    annualCost: 98000,
    manager: '张管理员',
    remark: '企业版订阅，包含全功能套件'
  },
  {
    id: 2,
    softwareName: 'Windows Server 2022',
    softwareType: '操作系统',
    version: '2022',
    vendor: 'Microsoft',
    status: 'installed',
    licenseStatus: '有效',
    installedCount: 8,
    totalLicenses: 10,
    purchaseDate: '2023-03-15',
    expiryDate: '2026-03-15',
    annualCost: 45000,
    manager: '李管理员',
    remark: '服务器操作系统标准版'
  },
  {
    id: 3,
    softwareName: 'Adobe Creative Suite',
    softwareType: '设计软件',
    version: '2024',
    vendor: 'Adobe',
    status: 'installed',
    licenseStatus: '即将过期',
    installedCount: 15,
    totalLicenses: 20,
    purchaseDate: '2023-06-01',
    expiryDate: '2024-05-31',
    annualCost: 156000,
    manager: '王管理员',
    remark: '创意设计套件，包含PS、AI等软件'
  },
  {
    id: 4,
    softwareName: 'Oracle Database 19c',
    softwareType: '数据库',
    version: '19.3.0',
    vendor: 'Oracle',
    status: 'installed',
    licenseStatus: '有效',
    installedCount: 2,
    totalLicenses: 4,
    purchaseDate: '2023-02-01',
    expiryDate: '2025-02-01',
    annualCost: 280000,
    manager: '赵管理员',
    remark: '企业级数据库，支持高并发'
  },
  {
    id: 5,
    softwareName: 'Kaspersky Endpoint Security',
    softwareType: '安全软件',
    version: '12.3',
    vendor: 'Kaspersky',
    status: 'need_update',
    licenseStatus: '有效',
    installedCount: 200,
    totalLicenses: 200,
    purchaseDate: '2023-09-01',
    expiryDate: '2024-09-01',
    annualCost: 32000,
    manager: '钱管理员',
    remark: '终端安全防护软件，需要更新版本'
  }
])

const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 5,
  showTotal: true,
  showPageSize: true
})

// 获取软件类型颜色
const getSoftwareTypeColor = (type: string) => {
  const colorMap: Record<string, string> = {
    '操作系统': 'blue',
    '办公软件': 'green',
    '开发工具': 'purple',
    '数据库': 'orange',
    '安全软件': 'red',
    '设计软件': 'cyan'
  }
  return colorMap[type] || 'gray'
}

// 获取状态颜色
const getStatusColor = (status: string) => {
  const colorMap: Record<string, string> = {
    'installed': 'green',
    'pending': 'gray',
    'expired': 'red',
    'need_update': 'orange'
  }
  return colorMap[status] || 'gray'
}

// 获取状态文本
const getStatusText = (status: string) => {
  const textMap: Record<string, string> = {
    'installed': '已安装',
    'pending': '待安装',
    'expired': '已过期',
    'need_update': '待更新'
  }
  return textMap[status] || status
}

// 获取许可证状态颜色
const getLicenseStatusColor = (status: string) => {
  const colorMap: Record<string, string> = {
    '有效': 'green',
    '即将过期': 'orange',
    '已过期': 'red',
    '待激活': 'gray'
  }
  return colorMap[status] || 'gray'
}

// 搜索和重置
const search = async () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 1000)
}

const reset = () => {
  Object.assign(searchForm, {
    softwareName: '',
    softwareType: '',
    status: '',
    vendor: '',
    page: 1,
    size: 10
  })
  pagination.current = 1
  search()
}

// 分页处理
const onPageChange = (page: number) => {
  searchForm.page = page
  pagination.current = page
  search()
}

const onPageSizeChange = (size: number) => {
  searchForm.size = size
  searchForm.page = 1
  pagination.pageSize = size
  pagination.current = 1
  search()
}

// 操作方法
const openAddModal = () => {
  Message.info('新增软件功能开发中...')
}

const softwareDiscovery = () => {
  Message.info('软件发现功能开发中...')
}

const licenseManagement = () => {
  Message.info('许可证管理功能开发中...')
}

const viewDetail = (record: any) => {
  Message.info(`查看软件详情: ${record.softwareName}`)
}

const editRecord = (record: any) => {
  Message.info(`编辑软件: ${record.softwareName}`)
}

const installSoftware = (record: any) => {
  Message.info(`安装软件: ${record.softwareName}`)
}

const updateSoftware = (record: any) => {
  Message.info(`更新软件: ${record.softwareName}`)
}

const uninstallSoftware = (record: any) => {
  Message.info(`卸载软件: ${record.softwareName}`)
}

const manageLicense = (record: any) => {
  Message.info(`许可证管理: ${record.softwareName}`)
}

const viewUsage = (record: any) => {
  Message.info(`使用统计: ${record.softwareName}`)
}

const deleteRecord = (record: any) => {
  Message.info(`删除软件: ${record.softwareName}`)
}

onMounted(() => {
  search()
})
</script>

<style scoped>
/* 这里可以添加自定义样式 */
</style> 