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

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

	<!-- <div class='mt-2 flex-grow'> -->
	<div class='mt-2 flex-grow app-container'>
		<el-table :data='tableData' :height="tableHeight">
			<el-table-column label='No' prop='no' width="60" align="center" />
			<el-table-column :label='$t("applyFormname")' prop='i_form_name' min-width="150" />
			<el-table-column :label='$t("applicationDescription")' prop='i_form_detail' min-width="300" show-overflow-tooltip />
			<el-table-column :label='$t("companyIncharge")' prop='i_company_name' min-width="150" />
			<el-table-column :label='$t("periodOfapplication")' prop="i_use_ymd" width="200" />
			<el-table-column :label='$t("operation")' align='center' width="120">
				<template #default="scope">
					<el-button type="primary" @click='handleApply(scope.row.i_form_id)'>{{ $t("apply") }}</el-button>
				</template>
			</el-table-column>
		</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>
</template>

<script>
import { getWorkFlowNewList, exportWorkFlowNewList, getWorkFlowNewListInit, } from '@/api/workflowManagement'
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 router from '@/router';

export default {
	// name: 'WFApplyList',
	name: 'NewApplyList',
	components: { SearchBtnBar },
	data() {
		return {
			startDate: null,
			endDate: null,
			searchForm: {
				i_sch_field: null,
				i_sch_dept: null,
				i_perpage: 10,
				i_pageindex: 1
			},
			// permission: '',
			permission: [],
			tableData: [],
			dataCount: 1,
			pageSizeList: []
		}
	},
	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() {
	mounted() {
		getWorkFlowNewListInit().then(res => {
			if (res.resultCode == '0') {
				const { perpageList, i_perpage, ...permission } = res
				this.permission = permission
				this.pageSizeList = perpageList.map(page => { return page.value })
				this.searchForm.i_perpage = Number(i_perpage) || 10
				this.getData()
			}
		})
	},
	activated() {
		this.getData()
	},
	methods: {
		handleApply(formId) {
			// this.$router.push({ name: 'WFApplyCreate', query: { formId } })
			router.push({path:'wfApplyCreate', query: { formId }})
		},
		//获取列表数据
		getData() {
			getWorkFlowNewList(this.searchForm).then(res => {
				if (res.resultCode === '0') {
					this.tableData = res.dataList
					this.dataCount = Number(res.i_total)
				}
			})
		},
		filterNodeMethod() { },
		handleCheckChange(data) { },
		async onClickExport() {
			const table_info = [
				{ label: 'no', value: 'No', index: 1 },
				{ label: 'i_form_name', value: this.$t("applyFormname"), index: 2 },
				{ label: 'i_form_detail', value: this.$t("applicationDescription"), index: 3 },
				{ label: 'i_company_name', value: this.$t("companyIncharge"), index: 4 },
				{ label: 'i_use_ymd', value: this.$t("periodOfapplication"), index: 5 },
			];
			const res = await exportWorkFlowNewList({
				...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>
