<template>
  <v-container fluid>
    <div class="d-flex align-center mb-4">
      <div>
        <h2>用户与权限</h2>
        <div class="text--secondary">管理员创建账号并分配管理员、编辑者或查看者角色</div>
      </div>
      <v-spacer />
      <v-btn color="primary" @click="dialog = true">创建用户</v-btn>
    </div>

    <v-card outlined>
      <v-data-table :headers="headers" :items="users" :loading="loading">
        <template v-slot:[`item.roles`]="{ item }">
          <v-chip v-for="role in item.roles" :key="role" small class="mr-1">{{ role }}</v-chip>
        </template>
        <template v-slot:[`item.status`]="{ item }">
          <v-switch
            :input-value="item.status === 'active'"
            dense hide-details
            @change="setStatus(item, $event)"
          />
        </template>
      </v-data-table>
    </v-card>

    <v-dialog v-model="dialog" max-width="520">
      <v-card>
        <v-card-title>创建用户</v-card-title>
        <v-card-text>
          <v-text-field v-model="form.username" label="用户名" autocomplete="off" />
          <v-text-field v-model="form.display_name" label="显示名称" />
          <v-text-field v-model="form.password" label="初始密码" type="password" autocomplete="new-password" />
          <v-select v-model="form.roles" :items="roleOptions" label="角色" multiple />
        </v-card-text>
        <v-card-actions>
          <v-spacer />
          <v-btn text @click="dialog = false">取消</v-btn>
          <v-btn color="primary" :loading="saving" @click="submit">创建</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-container>
</template>

<script>
import { createUser, listUsers, updateUser } from '@/api/users'

export default {
  name: 'SystemUserManage',
  data () {
    return {
      loading: false,
      saving: false,
      dialog: false,
      users: [],
      roleOptions: ['admin', 'editor', 'viewer'],
      form: { username: '', display_name: '', password: '', roles: ['viewer'] },
      headers: [
        { text: '用户名', value: 'username' },
        { text: '显示名称', value: 'display_name' },
        { text: '角色', value: 'roles' },
        { text: '启用', value: 'status', sortable: false },
        { text: '最近登录', value: 'last_login_at' }
      ]
    }
  },
  created () { this.load() },
  methods: {
    async load () {
      this.loading = true
      try {
        const response = await listUsers()
        this.users = response.data
      } finally {
        this.loading = false
      }
    },
    async submit () {
      this.saving = true
      try {
        await createUser(this.form)
        this.dialog = false
        this.form = { username: '', display_name: '', password: '', roles: ['viewer'] }
        await this.load()
      } catch (error) {
        this.$snackbar.error(error)
      } finally {
        this.saving = false
      }
    },
    async setStatus (item, enabled) {
      try {
        await updateUser(item.id, { status: enabled ? 'active' : 'disabled' })
        await this.load()
      } catch (error) {
        this.$snackbar.error(error)
        await this.load()
      }
    }
  }
}
</script>
