<template>
	<div ref='search' class='bg-white pt-4 pl-5 pr-5 border app-container'>
		<!--条件组-->
		<div class='searchAlign'>
			<el-form :inline='true' :model='searchForm'>
				<GdInput :label='$t("roleName")' prop='i_sch_field_role' placeholder="" style='width: 250px' :maxlength="50" />
				<GdInput :label='$t("roleMaster")' prop='i_sch_field_head' placeholder="" style='width: 250px' />
				<GdSelect :label='$t("status")' prop='i_enable' :options="enableList" placeholder="" style='width: 250px' />
			</el-form>
			<el-button icon='Search' @click='search'>{{ $t("search_btn") }}</el-button>
		</div>

		<!--功能按钮-->
		<SearchBtnBar class="pb-4" style="display: inline-block" :permission='permission' @OnClickDelete='deleteListMethod'
			@OnClickExport='onClickExport' @OnClickImport='' @onClickAdd='increase'></SearchBtnBar>
	</div>

	<div class='mt-2 flex-grow app-container'>
		<el-table :data='tableData' :height="tableHeight" border @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="50" v-if="i_show_checkbox === 'Y'" />
			<el-table-column label='No' prop="no" width="60" align='center' />
			<!--				<el-table-column :label='$t("roleId")' prop='i_role_id' width='180' align='center'>-->
			<!--					<template #default="scope">-->
			<!--						<el-link type='primary' @click="edit(scope.row)">{{ scope.row.i_role_id }}</el-link>-->
			<!--					</template>-->
			<!--				</el-table-column>-->
			<el-table-column :label='$t("roleName")' prop='i_role_name' align='center'>
				<template #default="scope">
					<el-link type='primary' @click="edit(scope.row)">{{ scope.row.i_role_name }}</el-link>
				</template>
			</el-table-column>
			<el-table-column :label='$t("roleMaster")' prop='i_role_master_name' align='center' />
			<el-table-column :label='$t("roleDescription")' prop='i_role_comment' align='center' show-overflow-tooltip />
			<el-table-column :label='$t("status")' prop='i_role_flg_name' align='center' />
		</el-table>
	</div>

	<!--分页-->
	<!-- <div ref='pagination' class='mt-2 flex flex-row-reverse'> -->
	<div ref='pagination' class='mt-2 flex flex-row-reverse app-container pagination-container'>
		<el-pagination v-model:current-page="searchForm.i_pageindex" v-model:page-size="searchForm.i_perpage"
			:page-sizes="pageSizeList" layout="total, sizes, prev, pager, next, jumper" :total="dataCount"
			@size-change="getData" @current-change="getData" />
	</div>

	<!--新增/编辑弹窗-->
	<el-dialog :title='title' v-model="openDialog" width='40%' append-to-body @close='closeDialog' draggable
		destroy-on-close>
		<el-form :model='tableForm' ref='form' label-width='150px'>
			<GdInput :label='$t("roleName")' prop='i_role_name' :maxlength='50' required />
			<GdInput :label='$t("roleDescription")' prop='i_role_comment' type='textarea' :rows='5' />
			<GdTableSelect :label='$t("roleMaster")' prop='i_role_master' type='user' style='width: 100%' required />
			<GdSelect :label='$t("status")' prop='i_role_flg' :options="enableList.filter(({ value }) => value)" flat
				required />
			<GdTableSelect :label='$t("roleMember")' prop='i_member' type='user' style='width: 100%' filterable multiple
				:multiple-limit='16' required />
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button v-if="tableForm.i_operate === '新增' || permission.i_btn_save" type="primary" @click="handleSubmit">{{
					$t("save") }}</el-button>
				<el-button @click="closeDialog">{{ $t("dialogClose") }}</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script>
import { delGroup, getGroupDetail, getGroupList, getGroupListInit, saveGroupConfig, exportGroupList } from '@/api/workflowManagement'
// import { getUserList } from '@/api/systemOptions/user'
import { replace } from '@/utils'
import { ref, computed } from 'vue'
import { useGlobalPinia } from '@/pinia/global'
import { useWindowSize, useElementBounding } from '@vueuse/core'
import SearchBtnBar from '@/components/GdElement/BtnBar.vue';
import { createDownloadFile } from '@/utils/exportExcel';
import { ElMessage } from 'element-plus'

export default {
	name: 'Group',
	components: { SearchBtnBar },
	data() {
		return {
			dataCount: 0,
			searchForm: {
				i_sch_field_role: undefined,
				i_sch_field_head: undefined,
				i_enable: undefined,
				i_perpage: 10,
				i_pageindex: 1
			},
			permission: [],
			tableData: [],
			pageSizeList: [],
			selections: [],
			title: '',
			openDialog: false,
			tableForm: {
				i_operate: null,
				// i_role_id: null,
				i_role_name: null,
				i_role_comment: null,
				i_role_ml: null,
				i_role_master: null,
				i_role_flg: null,
				i_member: null,
			},
			i_show_checkbox: false,
			// userList: [],
			enableList: []
		}
	},
	computed: {
		formRules() {
			return {
				// i_role_id: [
				// 	{ required: true, trigger: 'blur', message: this.$t("801070_0001") },
				// 	{ max: 16, trigger: 'blur', message: this.$t('801070_0002') }
				// ],
				i_role_name: [
					{ required: true, trigger: "blur", message: this.$t('801070_0004') },
					{ max: 50, trigger: "blur", message: this.$t('801070_0005') },
				],
				i_role_master: [
					{ required: true, trigger: "blur", message: this.$t('801070_0006') },
					{ max: 16, trigger: "blur", message: this.$t('801070_0007') },
				],
				i_role_comment: [
					{ max: 500, trigger: "blur", message: this.$t('801070_0008') },
				],
				i_role_ml: [
					{ max: 64, trigger: "blur", message: this.$t('801070_0009') },
				],
				i_role_flg: [
					{ required: true, trigger: 'blur' },
				],
				i_member: [
					{ required: true, trigger: "blur", message: this.$t('801070_00010') },
				],
			}
		},
	},
	// created() {
	mounted() {
		//初始化
		getGroupListInit().then(res => {
			const { perpageList, i_perpage, i_show_checkbox, enableList, ...permission } = res.data
			this.permission = permission
			this.pageSizeList = perpageList.map(page => { return page.value })
			this.searchForm.i_perpage = Number(i_perpage) || 10
			this.i_show_checkbox = i_show_checkbox
			// this.enableList = JSON.parse(enableList)
			this.enableList = enableList
			this.getData()
		})
		// getUserList().then(res => {
		// 	if (res.resultCode === '0') {
		// 		this.userList = res.dataList
		// 	}
		// })
	},
	setup() {
		const windowSize = useWindowSize();
		const search = ref();
		const searchSize = useElementBounding(search);
		const pagination = ref();
		const paginationSize = useElementBounding(pagination);
		const global = useGlobalPinia();
		// const tableHeight = computed(() => windowSize.height.value - searchSize.height.value - global.header - global.mainPadding - 16 - paginationSize.height.value + 'px');
		const tableHeight = computed(() => windowSize.height.value - searchSize.height.value - global.header - global.mainPadding - 241 - paginationSize.height.value + 'px');
		return { tableHeight, search, pagination, windowSize, global }
	},
	activated() {
		this.getData()
	},
	methods: {
		//获取列表数据
		getData() {
			getGroupList(this.searchForm).then(res => {
				this.tableData = res.dataList
				this.dataCount = Number(res.i_total)
			})
		},
		//新增跳转
		increase() {
			this.openDialog = true
			this.title = this.$t("role_add")
			this.tableForm.i_operate = '新增'
		},
		//编辑
		edit(row) {
			this.openDialog = true
			this.title = this.$t("role_edit")
			getGroupDetail({ i_role_id: row.i_role_id, i_operate: '修改' }).then(res => {
				if (res.resultCode === '0') {
					this.permission.i_btn_save = res.data.i_btn_save
					replace(this.tableForm, res.data.dtDetail[0])
					if (res.data.strMember != '') {
						// this.tableForm.i_member = Object.keys(JSON.parse(res.data.strMember).data).join(',')
						this.tableForm.i_member = Object.keys(res.data.strMember.data).join(',')
					}
				}
				this.tableForm.i_operate = '修改'
			})
		},
		//查询接口
		search() {
			this.getData()
		},
		deleteMethod(row) {
			ElMessageBox.confirm(
				this.$t("common_0070"),
				this.$t("confirmTitle"),
				{
					confirmButtonText: this.$t("confirmConfirm"),
					cancelButtonText: this.$t("confirmCancel"),
					type: 'warning',
				}
			)
				.then(() => {
					delGroup(row.i_role_id).then(res => {
						if (res.resultCode == '0') {
							ElMessage({
								type: 'success',
								message: this.$t("common_0080"),
							})
						}
						this.getData()
					}
					)
				})
				.catch(() => {
					ElMessage({
						type: 'info',
						message: this.$t("common_0081"),
					})
				})
		},
		//多选删除方法
		deleteListMethod() {
			const sections = this.selections
			if (sections.length >= 1) {
				let roleIdStr = sections.map(role => { return role.i_role_id }).join(';')
				ElMessageBox.confirm(
					this.$t("common_0070"),
					this.$t("confirmTitle"),
					{
						confirmButtonText: this.$t.confirmConfirm,
						cancelButtonText: this.$t.confirmCancel,
						type: 'warning',
					}
				)
					.then(() => {
						delGroup(roleIdStr).then(res => {
							if (res.resultCode == '0') {
								ElMessage({
									type: 'success',
									message: this.$t("common_0080"),
								})
							}
							this.getData()
						}
						)
					})
					.catch(() => {
						ElMessage({
							type: 'info',
							message: this.$t("common_0081"),
						})
					})

			}
		},
		handleSelectionChange(selection) {
			this.selections = selection
		},
		//关闭弹窗
		closeDialog() {
			this.title = ''
			this.openDialog = false
			this.resetTableForm()
		},
		resetTableForm() {
			replace(this.tableForm, {
				i_operate: null,
				i_role_id: null,
				i_role_name: null,
				i_role_comment: null,
				i_role_ml: null,
				i_role_master: null,
				i_role_flg: null,
				i_member: null,
			})
		},
		//表单提交按钮
		handleSubmit() {
			this.$refs.form.validate((valid) => {
				if (valid) {
					saveGroupConfig(this.tableForm).then((res) => {
						this.getData()
						this.resetTableForm()
						this.closeDialog()
						ElMessage.success(this.$t('common_0060'))
					})
				} else {
					ElMessage({
						type: 'warning',
						message: this.$t("form_check_rejected"),
					})
				}
			})
		},
		async onClickExport() {
			const table_info = [
				{ label: 'no', value: 'No', index: 1 },
				{ label: 'i_role_name', value: this.$t("roleName"), index: 2 },
				{ label: 'i_role_master_name', value: this.$t("roleMaster"), index: 3 },
				{ label: 'i_role_comment', value: this.$t("roleDescription"), index: 4 },
				{ label: 'i_role_flg_name', value: this.$t("status"), index: 5 },
			];
			const res = await exportGroupList({
				...this.searchForm,
				table_info: table_info,
			});

			createDownloadFile(res);
		}
	},
}
</script>

<style scoped>
.searchBar {
	display: flex;
	align-items: center;
	align-content: center;
}

.datePicker {
	width: 250px;
}

.searchAlign {
	display: flex;
	align-content: flex-start;
}

.el-card {
	--el-card-padding: 10px !important;
}
</style>
