<template>
  <GiPageLayout>
    <GiTable
      row-key="id"
      title="责献积分制度、与企业共同发展"
      :data="dataList"
      :columns="tableColumns"
      :loading="loading"
      :scroll="{ x: '100%', y: '100%', minWidth: 1400 }"
      :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="openRuleModal">
            <template #icon><icon-settings /></template>
            <template #default>积分规则</template>
          </a-button>
        </a-space>
      </template>
      
      <!-- 积分显示 -->
      <template #currentPoints="{ record }">
        <span class="font-medium text-blue-600">{{ record.currentPoints }}分</span>
      </template>
      
      <!-- 积分等级 -->
      <template #pointLevel="{ record }">
        <a-tag :color="getLevelColor(record.pointLevel)">
          {{ record.pointLevel }}
        </a-tag>
      </template>
      
      <!-- 操作列 -->
      <template #action="{ record }">
        <a-space>
          <a-link @click="viewDetail(record)">详情</a-link>
          <a-link @click="viewHistory(record)">积分记录</a-link>
        </a-space>
      </template>
    </GiTable>

    <!-- 积分规则说明 -->
    <a-card title="积分规则说明" class="mt-4" size="small">
      <a-row :gutter="24">
        <a-col :span="8">
          <a-card title="获得积分" size="small">
            <a-list size="small">
              <a-list-item>项目按期完成：+10分</a-list-item>
              <a-list-item>客户满意度优秀：+8分</a-list-item>
              <a-list-item>技术创新贡献：+15分</a-list-item>
              <a-list-item>团队协作优秀：+5分</a-list-item>
              <a-list-item>培训新人：+6分</a-list-item>
            </a-list>
          </a-card>
        </a-col>
        <a-col :span="8">
          <a-card title="扣除积分" size="small">
            <a-list size="small">
              <a-list-item>项目延期：-5分</a-list-item>
              <a-list-item>客户投诉：-10分</a-list-item>
              <a-list-item>违反规章制度：-8分</a-list-item>
              <a-list-item>迟到早退：-2分</a-list-item>
              <a-list-item>工作失误：-3分</a-list-item>
            </a-list>
          </a-card>
        </a-col>
        <a-col :span="8">
          <a-card title="积分等级" size="small">
            <a-list size="small">
              <a-list-item><a-tag color="red">新手</a-tag> 0-50分</a-list-item>
              <a-list-item><a-tag color="orange">熟练</a-tag> 51-100分</a-list-item>
              <a-list-item><a-tag color="blue">专家</a-tag> 101-200分</a-list-item>
              <a-list-item><a-tag color="green">大师</a-tag> 201-300分</a-list-item>
              <a-list-item><a-tag color="purple">传奇</a-tag> 300分以上</a-list-item>
            </a-list>
          </a-card>
        </a-col>
      </a-row>
    </a-card>
  </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({
  userName: '',
  deptName: '',
  pointLevel: '',
  page: 1,
  size: 10
})

// 查询条件配置
const queryFormColumns = [
  {
    field: 'userName',
    label: '员工姓名',
    type: 'input' as const,
    props: {
      placeholder: '请输入员工姓名'
    }
  },
  {
    field: 'deptName',
    label: '部门',
    type: 'input' as const,
    props: {
      placeholder: '请输入部门名称'
    }
  },
  {
    field: 'pointLevel',
    label: '积分等级',
    type: 'select' as const,
    props: {
      placeholder: '请选择积分等级',
      options: [
        { label: '新手', value: '新手' },
        { label: '熟练', value: '熟练' },
        { label: '专家', value: '专家' },
        { label: '大师', value: '大师' },
        { label: '传奇', value: '传奇' }
      ]
    }
  }
]

// 表格列配置
const tableColumns: TableColumnData[] = [
  { title: '员工姓名', dataIndex: 'userName', width: 120 },
  { title: '员工工号', dataIndex: 'userCode', width: 120 },
  { title: '部门', dataIndex: 'deptName', width: 120 },
  { title: '岗位', dataIndex: 'position', width: 120 },
  { title: '当前积分', dataIndex: 'currentPoints', slotName: 'currentPoints', width: 120 },
  { title: '积分等级', dataIndex: 'pointLevel', slotName: 'pointLevel', width: 100 },
  { title: '本月获得', dataIndex: 'monthGain', width: 100 },
  { title: '本月扣除', dataIndex: 'monthDeduct', width: 100 },
  { title: '累计获得', dataIndex: 'totalGain', width: 100 },
  { title: '累计扣除', dataIndex: 'totalDeduct', width: 100 },
  { title: '最后更新', dataIndex: 'lastUpdate', width: 160 },
  { title: '操作', slotName: 'action', width: 150, fixed: 'right' }
]

// 数据状态
const loading = ref(false)
const dataList = ref([
  {
    id: 1,
    userName: '张三',
    userCode: 'EMP001',
    deptName: '技术部',
    position: '前端工程师',
    currentPoints: 285,
    pointLevel: '大师',
    monthGain: 25,
    monthDeduct: 2,
    totalGain: 320,
    totalDeduct: 35,
    lastUpdate: '2024-01-15 16:30:00'
  },
  {
    id: 2,
    userName: '李四',
    userCode: 'EMP002',
    deptName: '技术部',
    position: '后端工程师',
    currentPoints: 156,
    pointLevel: '专家',
    monthGain: 18,
    monthDeduct: 0,
    totalGain: 156,
    totalDeduct: 0,
    lastUpdate: '2024-01-14 14:20:00'
  },
  {
    id: 3,
    userName: '王五',
    userCode: 'EMP003',
    deptName: '市场部',
    position: '市场专员',
    currentPoints: 78,
    pointLevel: '熟练',
    monthGain: 12,
    monthDeduct: 5,
    totalGain: 95,
    totalDeduct: 17,
    lastUpdate: '2024-01-13 10:15:00'
  },
  {
    id: 4,
    userName: '赵六',
    userCode: 'EMP004',
    deptName: '技术部',
    position: '架构师',
    currentPoints: 350,
    pointLevel: '传奇',
    monthGain: 30,
    monthDeduct: 0,
    totalGain: 350,
    totalDeduct: 0,
    lastUpdate: '2024-01-15 18:00:00'
  }
])

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

// 获取等级颜色
const getLevelColor = (level: string) => {
  const colorMap: Record<string, string> = {
    '新手': 'red',
    '熟练': 'orange',
    '专家': 'blue',
    '大师': 'green',
    '传奇': 'purple'
  }
  return colorMap[level] || 'gray'
}

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

const reset = () => {
  Object.assign(searchForm, {
    userName: '',
    deptName: '',
    pointLevel: '',
    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 openRuleModal = () => {
  Message.info('积分规则配置功能开发中...')
}

const viewDetail = (record: any) => {
  Message.info(`查看积分详情: ${record.userName}`)
}

const viewHistory = (record: any) => {
  Message.info(`查看积分记录: ${record.userName}`)
}

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

<style scoped>
.mt-4 {
  margin-top: 16px;
}
</style> 