<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="EditPen" @click="handleEditItem('edit', scope.row)">编辑</el-button>
				<el-button type="primary" link :icon="Delete" @click="deleteAccount(scope.row)">删除</el-button>
			</template>
		</ProTable>

		<DialogForm
			:title="title"
			:formConfig="formConfig"
			:formData="formData"
			v-model:visible="visible"
			append-to-body
			width="700px"
			@confirm="saveItem"
		>
		</DialogForm>

		<el-dialog v-model="dialogTableVisible" title="Shipping address" ref="DialogTable" width="800px" height="800px">
			<el-button type="primary" style="margin-top: -24px" @click="DiaAddItem(diaTableData.dictType)">新增</el-button>
			<el-table :data="gridData">
				<el-table-column property="dictCode" label="序号" width="150" />
				<el-table-column property="dictValue" label="字典名称" width="200" />
				<el-table-column property="dictSort" label="字典排序" />
				<el-table-column property="isDefault" label="状态" />
				<el-table-column property="remark" label="备注" />
				<el-table-column property="createTime" label="创建时间" />
				<el-table-column label="操作" align="center">
					<template #default="scope">
						<el-button type="primary" text @click="DeleteBtn(scope.row)">
							<!-- <img src="@/assets/images/tableIcon/deleteIcon.png" alt="" class="configureIcon" /> -->
							<span class="redDelete">删除</span>
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>
		<!-- 点击名字的弹窗 -->
		<el-dialog v-model="DiaVisible" title="新增字典数据">
			<el-form :data="DiaformData">
				<el-form-item label="字典类型">
					<el-input v-model="form.dictType" disabled placeholder="请输入" />
				</el-form-item>
				<el-form-item label="字典标签">
					<el-input v-model="form.dictLabel" placeholder="请输入" />
				</el-form-item>
				<el-form-item label="显示排序">
					<el-input-number v-model="form.dictSort" :min="1" :max="10" />
				</el-form-item>
				<el-form-item label="状态">
					<el-radio-group v-model="form.status">
						<el-radio :label="1">正常</el-radio>
						<el-radio :label="0">停用</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="备注">
					<el-input v-model="form.remark" />
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="DiaVisible = false">取消</el-button>
					<el-button type="primary" @click="DiaSubmit(form)">保存</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<script setup lang="tsx" name="jxjDictionary">
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 { useHandleData } from "@/hooks/useHandleData";
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 {
	getDictionaryList,
	getDictionaryDetail,
	deleteDictionary,
	deleteDia,
	editDictionary,
	addDictionary,
	addDiaDictionary
} from "@/api/modules/jxjview";

const router = useRouter();
// 页面新增
const visible = ref(false);
// 表格点击
const dialogTableVisible = ref(false);
const DiaVisible = ref(false);
const title = ref("");
const formData = ref({});
const DiaformData = ref({});
const mode = ref("");
// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref();
const DialogTable = ref();
const gridData = ref([]);
const diaTableData = reactive({
	dictName: "",
	dictType: "",
	endTime: "",
	pageNo: 1,
	pageSize: 10,
	startTime: "",
	status: 0
});
const form = reactive({
	dictType: "",
	dictLabel: "",
	dictSort: 1,
	status: 1,
	remark: ""
});

// 添加数据按钮
const handleAddItem = () => {
	mode.value = "add";
	visible.value = true;
	title.value = "新增";
	formData.value = reactive({});
};

// 修改数据按钮
function handleEditItem(index: string, row: any) {
	mode.value = "edit";
	visible.value = true;
	title.value = "编辑";
	formData.value = reactive(row);
}

// 表格配置项
const columns: ColumnProps[] = [
	{
		prop: "dictId",
		label: "序号"
	},
	{
		prop: "dictName",
		label: "字典名称",
		// enum:dictType,
		search: { el: "input" }
		// fieldNames: { label: "genderLabel", value: "genderValue" }
	},
	// 多级 prop
	{
		prop: "dictType",
		label: "字典类型",
		// search: { el: "input" },
		render: scope => {
			return (
				<el-button type="primary" link onClick={() => typeVisable(scope.row.dictType)}>
					{scope.row.dictType}
				</el-button>
			);
		}
	},
	{
		prop: "status",
		label: "状态",
		enum: [
			{ label: "正常", value: "1" },
			{ label: "停用", value: "0" }
		]
		// search: { el: "select" }
	},
	{ prop: "remark", label: "备注" },
	{
		prop: "createTime",
		label: "创建时间"
		// search: {
		// 	el: "date-picker",
		// 	span: 2,
		// 	props: { type: "datetimerange", valueFormat: "YYYY-MM-DD HH:mm:ss" },
		// 	defaultValue: ["", ""]
		// }
	},
	{ prop: "operation", label: "操作", fixed: "right" }
];

// 弹窗中的配置
const formConfig = {
	formItemConfig: [
		{
			label: "字典名称",
			prop: "dictValue",
			type: "input"
		},
		{
			label: "字典类型",
			prop: "dictType",
			type: "input"
		},
		{
			label: "状态",
			prop: "status",
			type: "radio",
			data: [
				{ label: "正常", value: "1" },
				{ label: "停用", value: "0" }
			]
		},
		{
			label: "备注",
			prop: "remark",
			type: "input"
		}
	],
	rules: {
		configKey: [
			{
				required: true,
				message: "请输入类型名",
				trigger: "blur"
			}
		]
	}
};

// 如果表格需要初始化请求参数，直接定义传给 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)
	};
};

const typeVisable = async (dictType: string) => {
	// console.log(111);
	dialogTableVisible.value = true;
	form.dictType = dictType;
	diaTableData.dictType = dictType;
	const res = await getDiaTabList(diaTableData);
	// console.log(dictType);
	gridData.value = res.result.records;
};

const DiaAddItem = async (dictType: string) => {
	title.value = "新增字典数据";
	DiaVisible.value = true;
	// form = reactive({});
	// console.log(dictType);
};

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

const getDiaTabList = async (params: any) => {
	await getDictionaryDetail(params);
	return getDictionaryDetail(params);
};

// 新增，编辑数据
const saveItem = async (form: any) => {
	if (form.dictId) {
		// console.log(form.dictCode);
		const res = await editDictionary(form);
		proTable.value.getTableList();
		ElMessage.success("编辑成功");
	} else {
		const res = await addDictionary(form);
		ElMessage.success("新增成功");
		proTable.value.getTableList();
	}
	visible.value = false;
};

const DiaSubmit = async (form: any) => {
	const res = await addDiaDictionary(form);
	ElMessage.success("新增成功");
	DiaVisible.value = false;
	getDiaTabList(diaTableData);
};

// 删除用户信息
const deleteAccount = async (params: User.ResUserList) => {
	await useHandleData(deleteDictionary, { id: params.dictId }, `删除【${params.dictName}】用户`);
	proTable.value.getTableList();
};

// 删除弹窗用户信息
const DeleteBtn = async (params: User.ResUserList) => {
	await useHandleData(deleteDia, { id: params.dictCode }, `删除【${params.dictValue}】用户`);
	proTable.value.getTableList();
};
</script>
