<script setup lang="ts">
import {computed} from "vue";
import {templateStore} from "/@/stores/template";
const temp = templateStore();
const show = computed(() => temp.showTemp);
import {flowNameValueToLabelMap} from "/@/hooks/enums";

/**
 * 根据 templateType 判断是哪个模板
 * */
const getTemplate = (templateType:number) => {
		return flowNameValueToLabelMap[templateType];
};
const dataList = computed(() =>temp.tempData);
const loading = computed(()=>temp.loading);
const row = ref({});
const getTemplateRow = (template:any) => {
	row.value = template
};
</script>

<template>
<el-dialog width="80%" :model-value="show" title="模板" @close="temp.changeTempShow(false)">
	<el-table height="350" :data="dataList" @current-change="getTemplateRow"  highlight-current-row v-loading="loading">
		<el-table-column type="index" width="50" />
		<el-table-column prop="templateName" label="模板名称"/>
		<el-table-column label="模板类型">
			<template #default="{row}">
				<div>{{getTemplate(row.templateType)}}</div>
			</template>
		</el-table-column>
		<el-table-column prop="createTime" label="创建时间"/>
	</el-table>
	<template #footer>
	<div class="flex justify-end align-center">
		<el-pagination
				:currentPage="temp.query.current"
				:page-size="temp.query.size"
				:page-sizes="[10, 20, 30, 40]"
				:total="temp.total"
				@current-change="(event:any) => temp.changePage(event)"
				@size-change="(event:any) => temp.changePageSize(event)"
				layout="total, sizes, prev, pager, next, jumper"
				class="mr-12"
				style="margin-top: 0"
		></el-pagination>
		<el-button-group>
			<el-button @click="temp.changeTempShow(false)">取消</el-button>
			<el-button type="primary" @click="()=>{
				temp.changeTempShow(false)
				temp.getTempId(row)
			}">确定</el-button>
		</el-button-group>
	</div>
	</template>
</el-dialog>
</template>

<style scoped lang="scss">

</style>