<template>
	<el-dialog v-model="currentVisible" :title="currentMode === '1' ? '新增用户' : '编辑用户'" width="610" center align-center
		@close="handleClose" draggable>
		<div v-if="currentMode === '1'">
			<el-form :inline="true" >
			<el-form-item label="用户账号:">
				<el-input v-model="addNickName" />
			</el-form-item>
			<el-form-item label="用户名称:" >
				<el-input v-model="addUserName" />
			</el-form-item>
		</el-form>
		<div class="m-t-4" />
		<el-form :inline="true">
			<el-form-item label="用户状态:">
				<el-select v-model="userStatusValue" placeholder=" " style="width: 180px;">
					<el-option v-for="item in userStatusOptions" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item label="用户密码:">
				<el-input v-model="userPassword" />
			</el-form-item>
		</el-form>
		<div class="m-t-4" />
		<el-form :inline="true">
			<el-form-item label="用户角色:">
				<el-select v-model="userRoleValue" placeholder=" " style="width: 180px;">
					<el-option v-for="item in userRoleOptions" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>
		</el-form>
		</div>
		<div class="m-t-4">
		</div>
		<div v-if="currentMode === '2'">
			<el-form :inline="true" v-if="currentMode === '2'">
			<el-form-item label="用户名称:" >
				<el-input v-model="addNickName" />
			</el-form-item>
			<el-form-item label="用户角色:">
				<el-select v-model="userRoleValue" placeholder=" " style="width: 180px;">
					<el-option v-for="item in userRoleOptions" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>
		</el-form>
		<div class="m-t-4" />
		<el-form :inline="true" v-if="currentMode === '2'">
			<el-form-item label="用户状态:">
				<el-select v-model="userStatusValue" placeholder=" " style="width: 180px;">
					<el-option v-for="item in userStatusOptions" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item label="用户密码:">
				<el-input v-model="userPassword" />
			</el-form-item>
		</el-form>
		</div>
		<div class="m-t-4" />
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="handleClose">取消</el-button>
				<el-button type="primary" @click="handleConfirm">
					确定
				</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { defineProps } from 'vue';
import { watch } from 'vue'
import { getUserList, addUser, deleteUser, updateUser } from '@/api/user.ts'

const userStatusValue = ref(true)
const userRoleValue = ref(1)
const userStatusOptions = [
	{
		value: true,
		label: '启用'
	},
	{
		value: '0',
		label: '停用'
	}
]
const userRoleOptions = [
	{
		value: false,
		label: '管理员'
	},
	{
		value: '0',
		label: '普通用户'
	}
]
const props = defineProps({
	dialogVisible: {
		type: Boolean,
		default: false
	},
	mode: {
		type: String,
		default: 'add'
	},
	nickName: {
		type: String,
		default: ''
	},
	userName: {
		type: String,
		default: ''
	},
	id: {
		type: Number,
		default: false
	},
	userPassword: {
		type: String,
		default: ''
	},
	userStatus: {
		type: Boolean,
		default: ''
	},
	userRole: {
		type: Number,
		default: ''
	}
})
// 向父组件传递dialog值
const emit = defineEmits(['update:dialogVisible', 'confirm','getUserList'])
// 组件的状态
const currentVisible = ref(props.dialogVisible)
const currentMode = ref(props.mode)
const addNickName = ref('')
const addUserName = ref('')
const userRemark = ref('')
const userPassword = ref('')


// 关闭的方法
const handleClose = () => {
	currentVisible.value = false
}
// 确定的方法
const handleConfirm = async () => {
	if (currentMode.value === '1') {
		await addUser({
			nickname: addNickName.value,
			username: addUserName.value,
			password: userPassword.value,
			role: userRoleValue.value,
			status: userStatusValue.value
		})
		console.log(addUserName.value);
		emit('getUserList')
	} else if (currentMode.value === '2') {

	}
	currentVisible.value = false
}

// 监听props变化，同步给组件内部
watch(() => props.dialogVisible,
	(newVal) => {
		currentVisible.value = newVal
	}
)

// 监听组件内部状态变化，同步给父组件，这样才能做到控制对话框组件的显隐
watch(() => currentVisible.value,
	(newVal) => {
		emit('update:dialogVisible', newVal)
	}
)
watch(() => props.mode,
	(newVal) => {
		currentMode.value = newVal
	}
)

watch(
  // 监听需要同步的 props 集合
  [() => props.dialogVisible, () => props.mode, () => props.nickName, () => props.userPassword, () => props.userStatus, () => props.userRole],
  // 任一值变化时执行
  ([newVisible, newMode, newNickName, newPwd, newStatus, newRole]) => {
    if (newVisible && newMode === '2') {
      addNickName.value = newNickName; 
      userPassword.value = newPwd;    
      userStatusValue.value = newStatus; 
      userRoleValue.value = newRole;   
    }
    // 弹窗关闭时，清空表单
    if (!newVisible) {
      addNickName.value = '';
      addUserName.value = '';
      userPassword.value = '';
    }
  },
  { immediate: true }
);
</script>

<style>
/* 修改弹窗样式 */
.el-dialog {
	background: transparent;
	background-image: url("@/assets/picture/dialog1.png");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	color: #ffffff;

	.el-dialog__title {
		color: #ffffff;
	}
	.el-input__inner{
		color: #ffffff;
	}
	.el-select__wrapper{
		background-color:#1d5484 ;
		box-shadow: 0,0,0,0;
		border: none;
		.el-select__placeholder{
			color: #ffffff;
		}
	}
}

/* 修改表单样式 */
.el-form {
	.el-form-item__label {
		color: #ffffff;
	}
}
</style>

<style>

</style>