<script setup>

import {ref} from "vue";
import {addRoleInterface, getRolesInterface} from '@/api/login.js'
import {useAccountStore} from "@/stores/index.js";
import {useRolesStore} from "@/stores/modules/roles.js";
import {Delete} from "@element-plus/icons-vue";
import {ElMessage} from 'element-plus'

const accountStore = useAccountStore();
const rolesStore = useRolesStore()

const form = ref({
  username: '',
  password: '',
})

const rules = {
  username: [
    {required: true, message: '用户名不能为空', trigger: 'blur'}
  ],
  password: [
    {required: true, message: '密码不能为空', trigger: 'blur'}
  ],
}

const loginForm = ref(null)
const addRole = async () => {
  await loginForm.value.validate()
  const res = await addRoleInterface(form.value.username, form.value.password)
  accountStore.addAccount(form.value.username, form.value.password)
}

const getRoles = () => {
  rolesStore.getRoles()
}

const fillAccount = (username, password) => {
  form.value.username = username
  form.value.password = password
}

</script>

<template>
  <div class="login-page">
    <el-form
        :model="form"
        :rules="rules"
        ref="loginForm"
    >
      <el-form-item label="账号" prop="username">
        <el-input
            v-model="form.username"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
            v-model="form.password"
        ></el-input>
      </el-form-item>
      <el-form-item class="center-content">
<!--        <el-button type="warning" @click="gameLogin" disabled>开启本地监听</el-button>-->
        <el-button type="primary" @click="addRole">添加角色</el-button>
        <el-button type="primary" @click="getRoles">获取角色(测试)</el-button>
      </el-form-item>
    </el-form>
    <el-divider/>
    <div class="account-group">
      <el-button-group
          v-for="(item, index) in accountStore.accounts"
          :key="index"
      >
        <el-button type="primary" @click="fillAccount(item.username, item.password)">账号: {{
            item.username
          }}
        </el-button>
        <el-button :icon="Delete" type="danger" @click="accountStore.deleteAccount(item.username)"></el-button>
      </el-button-group>
    </div>

  </div>
</template>

<style scoped>

.el-form {
  max-width: 300px;
}

.center-content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.account-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

</style>
