<template>
	<div ref='search' class='bg-white pt-4 pb-4 pl-5 pr-5 border app-container'>
		<!--条件组-->
		<div class='searchAlign'>
			<el-form :inline='true' :model='searchForm'>
				<GdInput :label='$t("applyInfo")' prop='i_sch_field' placeholder="" style='width: 250px' :maxlength="50" />
				<GdInput :label='$t("applicant")' prop='i_sch_apply_user' placeholder="" style='width: 250px' />
				<GdTreeSelect :label='$t("applicantDepartment")' prop='i_sch_dept' type='organize' placeholder=""
					style='width: 300px' />
			</el-form>
			<el-button icon="Search" @click='getData'>{{ $t("search_btn") }}</el-button>
		</div>

		<!--功能按钮-->
		<SearchBtnBar style="display: inline-block" :permission='permission' @OnClickDelete='' @OnClickExport='onClickExport'
			@OnClickImport='' @onClickAdd=''>
			<el-button icon="User" @click='setAgent'>{{ $t("agentSettings") }}</el-button>
		</SearchBtnBar>
	</div>

	<!-- <div class='mt-2 flex-grow'> -->
	<div class='mt-2 flex-grow app-container'>
		<el-table :data='tableData' :height='tableHeight' border>
			<el-table-column label='No' prop='no' width="60" align='center' />
			<el-table-column :label='$t("applyID")' prop='i_apply_id' width='180' align='center'>
				<template #default='scope'>
					<el-link type='primary' @click='handleLink(scope.row)'>
						{{ scope.row.i_apply_id }}
					</el-link>
				</template>
			</el-table-column>
			<el-table-column :label='$t("applyName")' prop='i_apply_name' align='center' />
			<el-table-column :label='$t("applicant")' prop='i_apply_user' align='center' />
			<el-table-column :label='$t("applicantCompany")' prop='i_apply_company_name' align='center' />
			<el-table-column :label='$t("applicantDepartment")' prop='i_apply_dept_name' align='center' />
			<el-table-column :label='$t("submitTime")' prop='i_apply_date' 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 v-model="dialogVisible" :title="Tips" width="1200px" :before-close="closeAddAgent" draggable>
		<el-form :model='dialogTableData' v-loading="loading">
			<el-table :data="dialogTableData" style="width: 100%;margin-bottom: 20px">
				<el-table-column prop="date" :label="$t('myAgent')" width='500'>
					<template #default='{ $index }'>
						<GdTableSelect :label="$t('myAgent')" :prop='`${$index}.i_proxy_user_id`' hideLabel type='user'
							class='table-form-item' />
					</template>
				</el-table-column>
				<el-table-column prop="name" :label="$t('agencyBusiness')">
					<template #default='{ $index }'>
						<GdSelect :label="$t('agencyBusiness')" :prop='`${$index}.i_proxy_form_id`' multiple type='business' hideLabel
							style='width: 270px' class='table-form-item' />
					</template>
				</el-table-column>
				<el-table-column prop="address" :label="$t('agencyPeriod')">
					<template #default='{ $index }'>
						<GdDatePicker :label="$t('agencyPeriod')" :prop='`${$index}.i_proxy_date`' type='daterange' hideLabel
							class='table-form-item' :disabled-date="disabledDate" />
					</template>
				</el-table-column>
				<el-table-column width='60'>
					<template #default='scope'>
						<Close style='width: 20px;height: 20px;color: red;cursor: pointer;' @click='deleteAgent(scope)' />
					</template>
				</el-table-column>
			</el-table>
			<el-button type="primary" style='margin-left: 12px' @click='addAgent'>{{ $t('new') }}</el-button>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button type="primary" @click="saveAddAgent" :disabled="loading">{{ $t('save') }}</el-button>
				<el-button @click="closeAddAgent">{{ $t('dialogClose') }}</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script>
import { getWorkFlowWaitListInit, getWorkFlowWaitList, exportWorkFlowWaitList } from '@/api/workflowManagement'
import { getAgentListInit, saveAgentList } from '@/api/workflowManagement'
import { ref, computed } from 'vue'
import { useGlobalPinia } from '@/pinia/global'
import { useWindowSize, useElementBounding } from '@vueuse/core'
import moment from 'moment'
import SearchBtnBar from '@/components/GdElement/BtnBar.vue';
import { createDownloadFile } from '@/utils/exportExcel';
import { ElMessage } from 'element-plus'
import router from '@/router';

export default {
	// name: 'WFApplyListAudit',
	name: 'WfApplyListAudit',
	components: { SearchBtnBar },
	data() {
		return {
			dialogVisible: false,
			Tips: '',
			startDate: null,
			endDate: null,
			searchForm: {
				i_sch_field: null,
				i_sch_apply_user: null,
				i_sch_dept: null,
				i_perpage: 10,
				i_pageindex: 1
			},
			permission: '',
			tableData: [],
			dataCount: 1,
			pageSizeList: [],
			dialogTableData: [],
			loading: false
		}
	},
	mounted() {
		getWorkFlowWaitListInit().then(res => {
			if (res.resultCode == '0') {
				const { applyStatusList, perpageList, i_perpage, ...permission } = res.data
				this.permission = permission
				this.statusList = applyStatusList
				this.pageSizeList = perpageList.map(page => { return page.value })
				this.searchForm.i_perpage = Number(i_perpage) || 10
				this.getData()
			}
		})
	},
	activated() {
  		this.getData()
 	},
	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 }
	},
	methods: {
		disabledDate(date) {
			return moment(moment(date).format("YYYY-MM-DD")).isBefore(
				moment(moment().format("YYYY-MM-DD")))
		},
		//获取列表数据
		getData() {
			getWorkFlowWaitList(this.searchForm).then(res => {
				if (res.resultCode === '0') {
					this.tableData = res.dataList
					this.dataCount = Number(res.i_total) || 0
				}
			})
		},
		getPeriod(row) {
			return (row.i_use_s_ymd || "") + '~' + (row.i_use_e_ymd || "")
		},
		handleLink({ i_form_id, i_apply_id }) {
			// this.$router.push({ name: 'WFApplyAudit', query: { formId: i_form_id, dataId: i_apply_id } })
			router.push({path:'wfApplyAudit', query: { formId: i_form_id, dataId: i_apply_id }})
		},
		setAgent() {
			this.dialogVisible = true
			this.Tips = this.$t("agentSettings")
			this.loading = true
			getAgentListInit().then(res => {
				if (res.resultCode == '0') {
					this.dialogTableData = res.dataList
				}
			}).finally(() => this.loading = false)
		},
		addAgent() {
			if (this.dialogTableData.length < 10) {
				this.dialogTableData.push({ i_proxy_user_id: null, i_proxy_form_id: null, i_proxy_date: null })
			} else {
				ElMessage.warning(this.$t('401030_0009'))
			}
		},
		deleteAgent(scope) {
			this.dialogTableData.splice(scope.$index, 1)
		},
		closeAddAgent() {
			this.Tips = ''
			this.dialogTableData = []
			this.dialogVisible = false
		},
		saveAddAgent() {
			if (this.dialogTableData.filter(data => !data.i_proxy_user_id || !data.i_proxy_form_id || !data.i_proxy_date).length > 0) {
				ElMessage.warning(this.$t('401030_0008'))
				return
			}
			this.loading = true
			saveAgentList({ datalist: this.dialogTableData })
				.then(res => {
					ElMessage.success(this.$t('common_0090'))
					this.closeAddAgent()
				})
				.finally(() => this.loading = false)
		},
		async onClickExport() {
			const table_info = [
				{ label: 'no', value: 'No', index: 1 },
				{ label: 'i_apply_id', value: this.$t("applyID"), index: 2 },
				{ label: 'i_apply_name', value: this.$t("applyName"), index: 3 },
				{ label: 'i_apply_user', value: this.$t("applicant"), index: 4 },
				{ label: 'i_apply_company_name', value: this.$t("applicantCompany"), index: 5 },
				{ label: 'i_apply_dept_name', value: this.$t("applicantDepartment"), index: 6 },
				{ label: 'i_apply_date', value: this.$t("submitTime"), index: 7 },
			];
			const res = await exportWorkFlowWaitList({
				...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;
}

.table-form-item {
	margin-bottom: 0;
}
</style>
