<template>
	<div class="table-box">
		<ProTable
			ref="proTable"
			title="用户列表"
			:columns="columns"
			:requestApi="getTableList"
			:initParam="initParam"
			:dataCallback="dataCallback"
			:tool-button="false"
			:pagination="true"
			background
		>
			<template #formButton="scope">
				<el-button type="primary" @click="handleAddItem()">新增</el-button>
			</template>
			<!-- 表格操作 -->
			<template #operation="scope">
				<el-button type="primary" link :icon="Delete" @click="onConfiguration(scope.row)">授权配置</el-button>
			</template>
		</ProTable>
		<el-dialog v-model="configureDialogVisible" title="授权配置" show-close>
			<div>
				<div>
					<el-form :model="form" label-width="155px">
						<el-row>
							<el-col :span="12">
								<el-form-item label="名称：">
									<el-input v-model="form.governmentName" placeholder="请输入" />
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="手机号码：">
									<el-input v-model="form.governmentTel" placeholder="请输入" />
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="12">
								<el-form-item label="账号：">
									<el-input v-model="form.account" placeholder="请输入" />
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="密码：">
									<el-input v-model="form.password" placeholder="请输入" />
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="12">
								<el-form-item label="授权状态：">
									<el-radio-group v-model="form.state">
										<el-radio :label="1">启用</el-radio>
										<el-radio :label="0">禁用</el-radio>
									</el-radio-group>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="到期日期：">
									<el-date-picker type="date" v-model="form.expireTime" format="YYYY/MM/DD" placeholder="请选择" />
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="12">
								<el-form-item label="是否显示未解锁模块：">
									<el-radio-group v-model="form.isShowLockModule">
										<el-radio :label="0">是</el-radio>
										<el-radio :label="1">否</el-radio>
									</el-radio-group>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="授权项目数：">
									<el-input-number v-model="form.authProject" :min="1" :max="10" />
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="24">
								<el-form-item label="选择系统版本：">
									<el-radio-group @change="onRadio" v-model="form.moduleStyle">
										<el-radio :label="1">标准版</el-radio>
										<el-radio :label="2">星璇版</el-radio>
										<el-radio :label="3">衢州版</el-radio>
									</el-radio-group>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</div>
				<div>
					<div class="littleTitle">请勾选功能权限</div>
					<div class="allModular">
						<el-checkbox v-model="checkAll" @change="checkedState" label="全选" size="large" />
					</div>
					<div class="littleTitle">政务模块</div>
					<div class="allModular">
						<div v-for="(item, index) in governmentSelectList" :key="index" class="modularItem">
							<el-checkbox v-model="item.select" :label="item.labelName" size="large" />
						</div>
					</div>
					<div class="littleTitle">项目模块</div>
					<div class="allModular">
						<div v-for="(item, index) in projectSelectList" :key="index" class="modularItem">
							<el-checkbox v-model="item.select" :label="item.labelName" size="large" />
						</div>
					</div>
					<div class="littleTitle">企业模块</div>
					<div class="allModular">
						<div v-for="(item, index) in companySelectList" :key="index" class="modularItem">
							<el-checkbox v-model="item.select" :label="item.labelName" size="large" />
						</div>
					</div>
				</div>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="configureDialogVisible = false">取消</el-button>
					<el-button type="primary" @click="onSubmitConfig">保存</el-button>
				</span>
			</template>
		</el-dialog>
		<DialogForm
			:title="title"
			:formConfig="formConfig"
			:formData="formData"
			v-model:visible="visible"
			append-to-body
			width="36%"
			@confirm="saveItem"
		>
		</DialogForm>
	</div>
</template>

<script setup lang="tsx" name="jxjSystem">
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import { User } from "@/api/interface";
import { ColumnProps } from "@/components/ProTable/interface";
import ProTable from "@/components/ProTable/index.vue";
import DialogForm from "@/components/DialogForm/index.vue";
import { CirclePlus, Delete, EditPen, Download, Upload, View, Refresh, CircleCloseFilled } from "@element-plus/icons-vue";
import {
	getGovermentList,
	addGovernment,
	editGovernment,
	getGoverDetail,
	getGoverType,
	getGoverForm,
	editGoverCheck
} from "@/api/modules/jxjview";

const router = useRouter();
// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref();
const title = ref("");
// const ridioValue = ref(1);
const visible = ref(false);
const configureDialogVisible = ref(false);
const checkAll = ref(false);
// const isIndeterminate = ref(true);
const formData = ref({});

const governmentSelectList = ref([]);
const projectSelectList = ref([]);
const companySelectList = ref([]);

// const government = ref([]);
// 添加数据按钮
const handleAddItem = () => {
	visible.value = true;
	title.value = "新增政务";
};

// 修改数据按钮
function handleEditItem(index: string, row: any) {}

// 表格配置项
const columns: ColumnProps[] = [
	{
		prop: "governmentId",
		label: "序号"
	},
	{
		prop: "governmentName",
		label: "政务名称",
		search: { el: "input" }
	},
	// 多级 prop
	{ prop: "createTime", label: "注册时间" },
	{ prop: "governmentTel", label: "手机号码" },
	{ prop: "state", label: "使用状态" },
	{ prop: "diffDay", label: "剩余天数" },
	{ prop: "authProject", label: "项目数量" },
	{ prop: "operation", label: "操作", fixed: "right" }
];

// 弹窗中的配置
const formConfig = {
	formItemConfig: [
		{
			label: "政务名称",
			prop: "governmentName",
			type: "input"
		},
		{
			label: "手机号码",
			prop: "governmentTel",
			type: "input"
		},
		{
			label: "账户",
			prop: "account",
			type: "input"
		},
		{
			label: "密码",
			prop: "password",
			type: "input"
		}
	],
	rules: {
		governmentName: [
			{
				required: true,
				message: "请输入",
				trigger: "blur"
			}
		]
	}
};

const form = ref({
	authProject: 1,
	expireTime: "",
	governmentName: "",
	governmentTel: "",
	account: "",
	password: "",
	state: "",
	moduleStyle: "",
	isShowLockModule: "",
	governmentSn: ""
});

const AuthIdData = ref([]);

// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({
	type: 1
});

// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total && pageNum && pageSize 这些字段，那么你可以在这里进行处理成这些字段
// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
const dataCallback = (data: any) => {
	// console.log(data);
	return {
		list: data.records,
		total: Number(data.total),
		pageNo: Number(data.current),
		pageSize: Number(data.size)
	};
};

// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
// 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getUserList"
const getTableList = (params: any) => {
	let newParams = JSON.parse(JSON.stringify(params));
	return getGovermentList(newParams);
};

// 新增，编辑数据
const saveItem = async (form: any) => {
	const res = await addGovernment(form);
	ElMessage.success("新增成功");
	visible.value = false;
	proTable.value.getTableList();
};

const onRadio = async (val: number) => {
	// console.log(val);
	const res1 = await getGoverType({ styleType: val });
	governmentSelectList.value = res1.result.government;
	projectSelectList.value = res1.result.project;
	companySelectList.value = res1.result.enterprise;
};

const checkedState = () => {
	// console.log("执行方法啦");
	if (checkAll.value) {
		governmentSelectList.value.concat(projectSelectList.value, companySelectList.value).forEach((item, index, array) => {
			item.select = true;
			// isIndeterminate.value = false;
		});
	} else if (checkAll.value == false) {
		governmentSelectList.value.concat(projectSelectList.value, companySelectList.value).forEach((item, index, array) => {
			item.select = false;
		});
	}
};

const onSubmitConfig = async () => {
	let checkItem = ref([]);
	governmentSelectList.value.concat(projectSelectList.value, companySelectList.value).forEach(item => {
		if (item.select == true) {
			checkItem.value.push({
				moduleId: item.moduleId,
				moduleType: item.moduleType,
				governmentSn: form.value.governmentSn
			});
		}
	});
	await editGovernment(form.value).then(res => {
		editGoverCheck(checkItem.value);
		ElMessage.success("保存成功");
		configureDialogVisible.value = false;
	});
};
// 授权配置btn
const onConfiguration = async (row: any) => {
	configureDialogVisible.value = true;
	form.value = reactive({ ...row });
	// console.log(row.moduleStyle);

	const res = await getGoverDetail({ governmentId: row.governmentId });
	form.value.account = res.result.account;
	form.value.password = res.result.password;
	form.value.governmentSn = res.result.governmentSn;
	const res1 = await getGoverType({ styleType: row.moduleStyle });
	governmentSelectList.value = res1.result.government;
	projectSelectList.value = res1.result.project;
	companySelectList.value = res1.result.enterprise;
	const res2 = await getGoverForm({ governmentSn: row.governmentSn });
	governmentSelectList.value.concat(projectSelectList.value, companySelectList.value).forEach((itemA, indexA) => {
		res2.result.forEach((itemB, indexB) => {
			if (itemA.moduleId == itemB) {
				// governmentSelectList.value[indexA].select = true;
				itemA.select = true;
			}
		});
	});
};
</script>
<style scoped lang="scss">
.littleTitle {
	border-left: 3px solid #008bff;
	padding-left: 6px;
}
.allModular {
	width: 100%;
	margin: 10px;
	display: flex;
	flex-wrap: wrap;
	.modularItem {
		padding-right: 50px;
	}
}
</style>
