<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('wfName')" prop='i_sch_form_name' placeholder="" style='width: 250px' :maxlength="50" />
				<GdSelect :label="$t('status')" prop='i_sch_status' :options="statusList" placeholder="" style='width: 250px' />
				<GdDatePicker :label="$t('effectiveDate')" prop='i_sch_use_s_ymd' type='daterange' style='width: 300px' />
				<GdDatePicker :label="$t('endDate')" prop='i_sch_use_e_ymd' type='daterange' style='width: 300px' />
			</el-form>
			<el-button icon="Search" @click='searchMethod'>{{ $t('search_btn') }}</el-button>
		</div>
		<!--功能按钮-->
		<SearchBtnBar class="pb-4" style="display: inline-block" :permission='permission' @OnClickDelete=''
			@OnClickExport='onClickExport' @OnClickImport='' @onClickAdd='create'></SearchBtnBar>
	</div>


	<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("wfName")' prop='i_form_name' min-width='180' align='center'>
				<template #default='scope'>
					<el-link type='primary' @click='detail(scope.row)'>
						{{ scope.row.i_form_name }}
					</el-link>
				</template>
			</el-table-column>
			<el-table-column :label="$t('version')" prop='i_form_version' align='center' />
			<el-table-column :label="$t('status')" prop='i_status' align='center'>
				<template #default="{ row }">
					<el-tag v-if="row.i_status === '0'" type="info" effect="plain">{{ row.i_status_name }}</el-tag>
					<el-tag v-if="row.i_status === '1'" type="success" effect="plain">{{ row.i_status_name }}</el-tag>
					<el-tag v-if="row.i_status === '2'" type="danger" effect="plain">{{ row.i_status_name }}</el-tag>
				</template>
			</el-table-column>
			<el-table-column :label="$t('effectiveDate')" prop='i_use_s_ymd' align='center' />
			<el-table-column :label="$t('endDate')" prop='i_use_e_ymd' align='center' />
			<el-table-column :label="$t('operation')" align='center'>
				<template #default="scope">
					<el-button text icon='Edit' type="primary" :disabled="scope.row.edit_btn_enable == 'N'"
						@click='edit(scope.row)'>
						{{ $t('edit') }}
					</el-button>
					<el-button text icon='Delete' type="danger" :disabled="scope.row.del_btn_enable == 'N'"
						@click='deleteMethod(scope.row)'>
						{{ $t('delete') }}
					</el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>

	<!--分页-->
	<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 { delWorkFlow, getWorkFlowList, getWorkFlowListInit, exportWorkFlowList } from '@/api/workflowManagement'
import SearchBtnBar from '@/components/GdElement/BtnBar.vue';
import { createDownloadFile } from '@/utils/exportExcel';
import { ref, computed } from 'vue'
import { useGlobalPinia } from '@/pinia/global'
import { useWindowSize, useElementBounding } from '@vueuse/core'
import router from '@/router';
import { ElMessageBox, ElMessage } from 'element-plus'

export default {
	name: 'WorkflowList',
	components: { SearchBtnBar },
	data() {
		return {
			searchForm: {
				i_sch_form_name: undefined,
				i_sch_status: undefined,
				i_sch_use_s_ymd: undefined,
				i_sch_use_e_ymd: undefined,
				i_perpage: 10,
				i_pageindex: 1
			},
			permission: [],
			statusList: [],
			tableData: [],
			dataCount: 1,
			pageSizeList: []
		}
	},
	mounted() {
		getWorkFlowListInit().then(res => {
			if (res.resultCode == '0') {
				const { perpageList, i_perpage, ...permission } = res
				this.statusList = res.statusList
				this.permission = permission
				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: {
		getData() {
			getWorkFlowList(this.searchForm).then(res => {
				if (res.resultCode == '0') {
					this.tableData = res.dataList
					this.dataCount = Number(res.i_total) || 0
				}
			})
		},
		//新增跳转
		create() {
			// this.$router.push({ name: 'WorkflowCreate' })
			// router.push({path:'create'})
			router.push({path:'workflowCreate'})
		},
		edit(row) {
			// this.$router.push({ name: 'WorkflowModify', query: { formId: row.i_form_id } })
			// router.push({path:'modify', query: { formId: row.i_form_id }})
			router.push({path:'workflowModify', query: { formId: row.i_form_id }})
		},
		detail(row) {
			// this.$router.push({ name: 'WorkflowDetail', query: { formId: row.i_form_id } })
			// router.push({path:'detail', query: { formId: row.i_form_id }})
			router.push({path:'workflowDetail', query: { formId: row.i_form_id }})
		},
		//查询接口
		searchMethod() {
			this.getData()
		},
		handleSizeChange() { },
		handleCurrentChange() { },
		deleteMethod(row) {
			ElMessageBox.confirm(
				this.$t('301010_0006'),
				{
					confirmButtonText: this.$t('confirmConfirm'),
					cancelButtonText: this.$t('confirmCancel'),
				}
			)
				.then(() => {
					delWorkFlow(row.i_form_id).then(res => {
						if (res.resultCode == '0') {
							ElMessage({
								type: 'success',
								message: this.$t('common_0080'),
							})
						}
						this.searchMethod()
					})
				})
				.catch(() => {
					ElMessage({
						type: 'info',
						message: this.$t('common_0081'),
					})
				})
		},
		//时间类型格式化
		getFormatDate(date) {
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();
			month = (month < 10) ? '0' + month : month;
			day = (day < 10) ? '0' + day : day;
			let currentDate = year + "-" + month + "-" + day
			return currentDate;
		},
		getSpan(status) {
			let label = ''
			this.statusList.forEach(item => {
				if (item.value == status) {
					label = item.label
				}
			})
			return label
		},
		async onClickExport() {
			const table_info = [
				{ label: 'no', value: 'No', index: 1 },
				{ label: 'i_form_name', value: this.$t("wfName"), index: 2 },
				{ label: 'i_form_version', value: this.$t("version"), index: 3 },
				{ label: 'i_status_name', value: this.$t("status"), index: 4 },
				{ label: 'i_use_s_ymd', value: this.$t("effectiveDate"), index: 5 },
				{ label: 'i_use_e_ymd', value: this.$t("endDate"), index: 6 },
			];
			const res = await exportWorkFlowList({
				...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>
