<template>
	<div class="index">
		<div class="form">
			<div class="form_button">
				<el-button type="primary" icon="Plus" @click="addOpen">创建</el-button>
			</div>

			<el-form class="form_content">
				<el-form-item label="手机号" prop="mobile">
					<el-input v-model="form.mobile" placeholder="输入手机号进行搜索" class="input">
						<template #append>
							<el-button icon="Search" @click="getData" />
						</template>
					</el-input>
				</el-form-item>

				<el-form-item label="部门" prop="department">
					<el-input v-model="form.department" placeholder="输入部门进行搜索" class="input">
						<template #append>
							<el-button icon="Search" @click="seagetDatarch" />
						</template>
					</el-input>
				</el-form-item>

				<el-form-item label="账号状态" prop="status">
					<el-select v-model="form.status" placeholder="请选择账号状态" class="input" @change="getData">
						<el-option label="禁用" :value="0" />
						<el-option label="启用" :value="1" />
					</el-select>
				</el-form-item>
			</el-form>
		</div>

		<tableComponents :tableData="tableData">
			<el-table-column prop="name" label="姓名" align="center" />
			<el-table-column prop="mobile" label="手机号" align="center" />
			<el-table-column prop="createTime" label="创建时间" align="center" />
			<el-table-column prop="updateTime" label="更新时间" align="center" />
			<el-table-column prop="status" label="账号状态" align="center" />
			<el-table-column label="操作" align="center">
				<template #default="scope">
					<el-button type="text" @click="addOpen(scope.row)">编辑</el-button>
					<el-button type="text" @click="doDeleteAccount(scope.row)">删除</el-button>
					<el-button type="text" v-if="scope.row.status == 0" @click="doUpdateStatus(scope.row)">启用</el-button>
					<el-button type="text" v-else @click="doUpdateStatus(scope.row)">禁用</el-button>
				</template>
			</el-table-column>
		</tableComponents>

		<addDialog ref="addDialogRef" @close="getData"></addDialog>
	</div>
</template>

<script setup lang="ts" name="loginIndex">
import { onMounted, ref, reactive } from 'vue';
import { NextLoading } from '/@/utils/loading';
import { getAccounts, deleteAccount, updateStatus } from '/@/api/jnh';
import tableComponents from '/@/components/tableComponents/index.vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import addDialog from '/@/views/pages/jnh/add.vue';

const form = reactive({
	keyword: '',
});

const tableData = reactive({
	data: [
		{
			name: 'string',
			mobile: 'string',
			createTime: 'string',
			updateTime: 'string',
			status: '0',
			department: 'sdfa',
		},
		{
			name: 'string',
			mobile: 'string',
			createTime: 'string',
			updateTime: 'string',
			status: '1',
			department: 'sdfa',
		},
	],
	total: 0,
	page: 1,
	size: 20,
});

const addDialogRef = ref(addDialog);
// 新增弹窗打开
function addOpen(data) {
	addDialogRef.value.open(data);
}

async function getData() {
	let { code, data } = await getAccounts({
		page: tableData.page,
		size: tableData.size,
		...form,
	});
	if (code == 200) {
		tableData.data = data.list;
		tableData.total = data.total;
	}
}

async function doDeleteAccount(row) {
	let { code, data } = await deleteAccount({
		id: row.id,
	});
	if (code == 200) {
		ElMessage.success('删除成功');
		getData();
	}
}

async function doUpdateStatus(row) {
	let { code, data } = await updateStatus({
		id: row.id,
		status: row.status == 0 ? 1 : 0,
	});
	if (code == 200) {
		ElMessage.success('操作成功');
		getData();
	}
}

// 页面加载时
onMounted(() => {
	NextLoading.done();

	getData();
});
</script>

<style scoped lang="scss">
.index {
	background-color: white;
	padding: 30px;
	border-radius: 10px;
}

.form {
	display: flex;
	justify-content: space-between;
	margin-bottom: 30px;

	.input {
		min-width: 150px;
	}

	.form_content {
		display: flex;
		gap: 20px;
		align-items: center;
	}

	:deep(.el-form-item--large) {
		display: flex;
		align-items: center;
		margin-bottom: 0;
	}

	:deep(.el-form-item--label-right .el-form-item__label) {
		font-weight: bold;
		color: #3e3e3e;
	}
}
</style>
