<script setup lang="ts">
import type { AdminRole } from '@/types/admin'
import { adminUserRoleOptions, adminUserStatusOptions } from '@/utils/admin-options'

const username = defineModel<string>('username', { required: true })
const role = defineModel<string>('role', { required: true })
const status = defineModel<string>('status', { required: true })
const createUsername = defineModel<string>('createUsername', { required: true })
const createPassword = defineModel<string>('createPassword', { required: true })
const createRole = defineModel<AdminRole>('createRole', { required: true })

defineProps<{
  creating: boolean
  loadUsers: (page?: number) => Promise<void>
  submitCreate: () => Promise<void>
}>()
</script>

<template>
  <section class="users-tools">
    <div class="filter-row">
      <el-input
        v-model="username"
        class="filter-control filter-control--username"
        placeholder="账号筛选"
        clearable
        @keyup.enter="loadUsers(1)"
      />
      <el-select
        v-model="role"
        class="filter-control filter-control--role"
        placeholder="角色"
        clearable
      >
        <el-option
          v-for="opt in adminUserRoleOptions"
          :key="opt.value"
          :label="opt.label"
          :value="opt.value"
        />
      </el-select>
      <el-select
        v-model="status"
        class="filter-control filter-control--status"
        placeholder="状态"
        clearable
      >
        <el-option
          v-for="opt in adminUserStatusOptions"
          :key="opt.value"
          :label="opt.label"
          :value="opt.value"
        />
      </el-select>
      <el-button round type="primary" @click="loadUsers(1)">查询列表</el-button>
    </div>
    <div class="create-row">
      <el-input
        v-model="createUsername"
        class="filter-control filter-control--username"
        placeholder="新账号"
      />
      <el-input
        v-model="createPassword"
        class="filter-control filter-control--password"
        type="password"
        show-password
        placeholder="新密码，至少 8 位"
      />
      <el-select v-model="createRole" class="filter-control filter-control--role">
        <el-option value="operator" label="普通运营" />
        <el-option value="support" label="客服" />
        <el-option value="admin" label="管理员" />
      </el-select>
      <el-button round :loading="creating" type="primary" @click="submitCreate"
        >新增用户</el-button
      >
    </div>
  </section>
</template>

<style scoped>
.users-tools {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.filter-row,
.create-row {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
}
.create-row {
  padding-top: var(--space-3);
  border-top: 1px solid rgba(86, 108, 138, 0.12);
}
.filter-control {
  min-width: 0;
}
.filter-control--username {
  width: 150px;
}
.filter-control--role,
.filter-control--status {
  width: 128px;
}
.filter-control--password {
  width: 210px;
}

@media (max-width: 640px) {
  .filter-control,
  .filter-control--username,
  .filter-control--role,
  .filter-control--status,
  .filter-control--password {
    width: 100%;
  }

  .filter-row :deep(.el-button),
  .create-row :deep(.el-button) {
    width: 100%;
  }
}
</style>
