<script setup>

import "@/lib/array.js"
import useUtils from "@/utils/utils.js"
import {ref} from "vue"
import TDivider from "@/components/ui/TDivider.vue";
import TInputText from "@/components/ui/TInputText.vue";
import TButton from "@/components/ui/TButton.vue";
import TLabel from "@/components/ui/TLabel.vue";

const utils = useUtils()

const props = defineProps(["v-users"])

const usernameRef = ref()
const passwordRef = ref()
const {users, isAdding, updatingIndex, username, password} = (function () {
	let users = props.vUsers
	if (users == null) {
		users = []
	}
	return {
		users: ref(users),
		isAdding: ref(false),
		updatingIndex: ref(-1),

		username: ref(""),
		password: ref("")
	}
})()

const add = function () {
	isAdding.value = true
	username.value = ""
	password.value = ""

	setTimeout(function () {
		usernameRef.value.focus()
	}, 100)
}

const cancel = function () {
	isAdding.value = false
	updatingIndex.value = -1
}

const confirm = function () {
	if (username.value.length == 0) {
		utils.warn("请输入用户名", function () {
			usernameRef.value.focus()
		})
		return
	}
	if (password.value.length == 0) {
		utils.warn("请输入密码", function () {
			passwordRef.value.focus()
		})
		return
	}
	if (updatingIndex.value < 0) {
		users.value.push({
			username: username.value,
			password: password.value
		})
	} else {
		users.value[updatingIndex.value].username = username.value
		users.value[updatingIndex.value].password = password.value
	}
	cancel()
}

const update = function (index, user) {
	updatingIndex.value = index

	isAdding.value = true
	username.value = user.username
	password.value = user.password

	setTimeout(function () {
		usernameRef.value.focus()
	}, 100)
}

const remove = function (index) {
	users.value.$remove(index)
}


</script>

<template>
	<div>
		<input type="hidden" name="httpAuthBasicAuthUsersJSON" :value="JSON.stringify(users)"/>
		<div v-if="users.length > 0" class="label-group">
			<TLabel outlined="" v-for="(user, index) in users">
				{{ user.username }}&nbsp;
				<a href="" title="修改" @click.prevent="update(index, user)"><i class="icon pencil tiny"></i></a>&nbsp;
				<a href="" title="删除" @click.prevent="remove(index)"><i class="icon remove small"></i></a>
			</TLabel>
			<TDivider></TDivider>
		</div>
		<div v-show="isAdding">
			<div class="ui fields inline">
				<div class="ui field">
					<TInputText type="text" placeholder="用户名" v-model="username" size="15" ref="usernameRef"/>
				</div>
				<div class="ui field">
					<TInputText type="password" placeholder="密码" v-model="password" size="15" ref="passwordRef"/>
				</div>
				<div class="ui field">
					<TButton secondary="" size="small" type="button" @click.prevent="confirm">确定</TButton>&nbsp;
					<a href="" title="取消" @click.prevent="cancel"><i class="icon remove small"></i></a>
				</div>
			</div>
		</div>
		<div v-if="!isAdding" style="margin-top: 1em">
			<TButton secondary="" size="small" type="button" @click.prevent="add">+</TButton>
		</div>
	</div>
</template>

<style scoped>
</style>
