<template>
  <div>
    <h2 style="margin:0 0 20px;font-size:20px;">系统设置</h2>

    <el-tabs v-model="activeTab">
      <el-tab-pane label="管理员账号" name="admins">
        <div class="card-soft">
          <el-table :data="store.admins" stripe style="width:100%;">
            <el-table-column prop="username" label="用户名" width="150" />
            <el-table-column prop="role" label="角色" width="150" />
            <el-table-column prop="lastLogin" label="最后登录" width="200" />
          </el-table>
        </div>
      </el-tab-pane>

      <el-tab-pane label="操作日志" name="logs">
        <div class="card-soft">
          <el-table :data="store.logs" stripe style="width:100%;" max-height="500">
            <el-table-column prop="time" label="时间" width="170" />
            <el-table-column prop="action" label="操作类型" width="110">
              <template #default="{ row }">
                <el-tag v-if="row.action.includes('删除')" type="danger" size="small">{{ row.action }}</el-tag>
                <el-tag v-else-if="row.action.includes('新增')" type="success" size="small">{{ row.action }}</el-tag>
                <el-tag v-else type="warning" size="small">{{ row.action }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="target" label="操作对象" width="140" />
            <el-table-column prop="detail" label="详情" min-width="250" />
          </el-table>
        </div>
      </el-tab-pane>

      <el-tab-pane label="系统参数" name="params">
        <div class="card-soft">
          <el-descriptions :column="1" border>
            <el-descriptions-item label="系统版本">v1.0.0 原型</el-descriptions-item>
            <el-descriptions-item label="每日标准工时">10 小时</el-descriptions-item>
            <el-descriptions-item label="满分标准">10 分</el-descriptions-item>
            <el-descriptions-item label="日薪基准">100 元/天</el-descriptions-item>
            <el-descriptions-item label="打卡有效范围">项目位置 500 米内</el-descriptions-item>
            <el-descriptions-item label="上班打卡截止">08:00</el-descriptions-item>
            <el-descriptions-item label="下班打卡时间">18:00 左右</el-descriptions-item>
            <el-descriptions-item label="服务器">阿里云 ECS</el-descriptions-item>
          </el-descriptions>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { store } from '../../stores/index.js'

const activeTab = ref('admins')
</script>
