<template>
	<div class="index">
		<div class="form">
			<div class="form_button">
				<el-button size="mini" @click="addOpen">创建账号</el-button>
				<el-button type="primary" size="mini" @click="addImport">批量导入</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="getData" />
						</template>
					</el-input>
				</el-form-item>

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

				<el-button size="mini" @click="clearForm">清空条件</el-button>
			</el-form>
		</div>

		<tableComponents :tableData="tableData" :hadExpand="false">
			<el-table-column prop="name" label="姓名" align="center" />
			<el-table-column prop="mobile" label="手机号" align="center" />
			<el-table-column prop="department" 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">
				<template #default="scope">
					<div style="display: flex; align-items: center; justify-content: center">
						<div class="r_point" v-if="scope.row.status == 1">
							<div class="point" style="background-color: #2dc74c"></div>
							<text style="color: #2dc74c; white-space: nowrap">启用</text>
						</div>
						<div class="r_point" v-else>
							<div class="point" style="background-color: #eb1c5d"></div>
							<text style="color: #eb1c5d; white-space: nowrap">禁用</text>
						</div>
					</div>
				</template>
			</el-table-column>
			<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>
		<importDialog ref="importDialogRef" @close="getData"></importDialog>
	</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';
import importDialog from '/@/views/pages/jnh/import.vue';

const form = reactive({});

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

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

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

async function doDeleteAccount(row) {
	ElMessageBox.confirm('确定删除该账号吗？', '提示', {
		type: 'warning',
	}).then(async () => {
		let { code, data } = await deleteAccount({
			id: row.id,
		});
		if (code == 200) {
			ElMessage.success('删除成功');
			getData();
		}
	});
}

async function doUpdateStatus(row) {
	ElMessageBox.confirm('确定' + (row.status == 0 ? '启用' : '禁用') + '该账号吗？', '提示', {
		type: 'warning',
	}).then(async () => {
		let { code, data } = await updateStatus({
			id: row.id,
			status: row.status == 0 ? 1 : 0,
		});
		if (code == 200) {
			ElMessage.success('操作成功');
			getData();
		}
	});
}

function clearForm() {
	form.name = '';
	form.mobile = '';
	form.department = '';
	form.status = '';
	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 {
		width: 200px;
	}

	.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;
	}

	.form_button {
		display: flex;
	}
}

.r_point {
	display: flex;
	align-items: center;
	gap: 3px;
}

.point {
	width: 8px;
	height: 8px;
	border-radius: 100px;
	// color: #ffaa48;
}
</style>
