<template>
	<div class="index">
		<div class="colHeader">
			<div class="headerTitle">用户管理</div>
			<el-button class="addUser" type="primary" size="mini" @click="dialogTableVisible = true">添加账号</el-button>
			<div class="headerControls">
				<el-input size="mini" style="width: 210px" v-model="input3" placeholder="用户名关键词" class="input-with-select"></el-input>
				<el-input size="mini" style="width: 210px" v-model="input3" placeholder="手机号" class="input-with-select"></el-input>
				<!-- <el-button type="primary" size="mini">搜索</el-button> -->
			</div>
		</div>

		<tableComponents :tableData="tableData">
			<el-table-column prop="title" label="用户名" align="center" />
			<el-table-column prop="explain" label="手机号" align="center" />
			<el-table-column prop="title" label="创建时间" align="center" />
			<el-table-column prop="explain" label="修改时间" align="center" />
			<el-table-column prop="title" label="状态" align="center" />
			<el-table-column prop="explain" label="操作" align="center">
				<el-link>禁用</el-link>
				<el-link>删除</el-link>
			</el-table-column>
		</tableComponents>

		<!-- 新增栏目弹框 -->
		<el-dialog v-model="dialogTableVisible" title="添加" width="600">
			<el-form :model="form" label-width="auto" :rules="rules">
				<el-form-item label="用户名" prop="name1">
					<el-input v-model="form.name1" />
				</el-form-item>
				<el-form-item label="手机号" prop="name2">
					<el-input v-model="form.name2" />
				</el-form-item>
			</el-form>

			<template #footer>
				<div class="dialog-footer">
					<el-button @click="dialogTableVisible = false">取消</el-button>
					<el-button type="primary" @click="dialogTableVisible = false"> 确认 </el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="loginIndex">
import { onMounted, reactive, ref } from 'vue';
import { NextLoading } from '/@/utils/loading';
import { ElMessage } from 'element-plus';
import tableComponents from '/@/components/tableComponents/index.vue';

const dialogTableVisible = ref(false); // 弹框是否显示
const form = ref({}); // form 表单数据

const rules = reactive<FormRules<RuleForm>>({
	name1: [{ required: true, message: '必须填写用户名', trigger: 'blur' }],
	name2: [{ required: true, message: '必须填写手机号', trigger: 'blur' }],
});

const tableData = reactive({
	data: [],
	total: 0,
	page: 1,
	size: 20,
});

// 页面加载时
onMounted(() => {
	console.log('🚀 ~ file: index.vue:13 ~ onMounted ~ onMounted:');
	NextLoading.done();
});
</script>

<style scoped lang="scss">
.index {
	box-sizing: border-box;
	padding: 30px;
	background-color: #fff;
	border-radius: 6px;

	.colHeader {
		// display: flex;
		// align-items: center;
		// justify-content: space-between;
		box-sizing: border-box;
		padding-bottom: 21px;

		.headerTitle {
			font-size: 16px;
			font-weight: bold;
			box-sizing: border-box;
		}

		.addUser {
			margin: 12px 0;
		}
		.headerControls {
			.input-with-select {
				// width: 300px;
				margin-right: 30px;
			}
		}
	}
}
</style>
