<!--
@ 作者: 秦东
@ 时间: 2024-05-08 14:52:03
@ 备注: 版本管理
-->
<script lang='ts' setup>
import { customerFormVersionCont } from '@/api/DesignForm/type'
import { haveCustomerFormVersion,enableVersion } from '@/api/DesignForm/requestapi'
const props = withDefaults(
    defineProps<{
      tableKey?: number | string,
	  signCode?: number | string,
    }>(),
    {}
)

const emits = defineEmits<{
    (e: 'click', value: string): void
	(e: 'enableOrDisable', value: string): void
	(e: 'previewPage', value: string): void
}>()
const isOpen = ref(false)
const versionList = ref<customerFormVersionCont[]>([])			//版本内容列表
const loading = ref(false)
/**
@ 作者: 秦东
@ 时间: 2024-05-09 14:21:25
@ 功能: 编辑状态
*/
const setupStatus = (val:any) =>{
	enableVersion({id:val.id.toString()})
		.then(() =>{
			
			init()
			emits('enableOrDisable', val.id.toString())
		});
}
/**
@ 作者: 秦东
@ 时间: 2024-05-21 09:09:27
@ 功能: 预览版本
*/
const lookAppPage = (val:string) => {
	emits('previewPage', val.toString())
}
/**
@ 作者: 秦东
@ 时间: 2024-05-08 14:55:50
@ 功能: 打开页面
*/
const open = () => {
	console.log("open",isOpen)
    isOpen.value = true
    init()
}
/**
@ 作者: 秦东
@ 时间: 2024-05-08 14:56:13
@ 功能: 初始化数据
*/
const init = () => {
	loading.value= true
	haveCustomerFormVersion({id:props.tableKey})
		.then(({data})=>{
			console.log("加载异常-------------->",data)
			versionList.value = data
			// if(data.length > 0){
			// 	data.forEach((item:any) => {
			// 		if(item.status == 1){
			// 			versionId.value = item.id.toString()
			// 			emits('update:formVersion', item.id.toString())
			// 		}
			// 	});
			// }
		})
		.finally(()=>{loading.value= false})
}

defineExpose({
    open
})
/**
@ 作者: 秦东
@ 时间: 2024-05-09 14:03:54
@ 功能: 设置颜色
*/
const setColor = (val:number) => {
	if(val == 1){
		return "#67C23A"
	}else{
		return "#F56C6C"
	}
}
</script>
<template>
	<div
		v-if="isOpen"
		class="use-template active"	
		v-loading="loading"	
	>

		<span class="close icon-close" @click="isOpen = false"></span>
		<div v-if="versionList.length === 0" class="no-date">暂无版本</div>
		<div v-else class="list">
			<el-scrollbar class="timeLineBox">
				<el-timeline style="max-width: 600px">
					<el-timeline-item   v-for="item in versionList" :key="item.id"  placement="top" :color="setColor(item.status)">
						<el-card v-if="item.status==1" >
							<el-row @click="lookAppPage(item.id)">
								<el-col>版本：V{{ item.version }}</el-col>
								<el-col>创建人：{{ item.createrName }}</el-col>
								<el-col>创建时间：{{ item.dayTime }}</el-col>
							</el-row>
							<div style="text-align:right">
								<el-button text type="success" size="small" disabled>使用中</el-button>
								<el-button text type="warning" size="small"  @click="lookAppPage(item.id)">预览</el-button>
							</div>
						</el-card>
						<el-card v-else >
							<el-row @click="lookAppPage(item.id)">
								<el-col>版本：V{{ item.version }}</el-col>
								<el-col>创建人：{{ item.createrName }}</el-col>
								<el-col>创建时间：{{ item.dayTime }}</el-col>
							</el-row>
							<div style="text-align:right">
								<el-button  type="primary" size="small" @click="setupStatus(item)">启用</el-button>
								<el-button  type="warning" size="small" @click="lookAppPage(item.id)">预览</el-button>
							</div>
						</el-card>
					</el-timeline-item>
					
				
				</el-timeline>
			</el-scrollbar>
		</div>
	</div>
</template>
<style  lang='scss' scoped>
.use-template{
	width:250px;
	top: 40px;
	.list{
		padding: 30px 5px;
	}
}
.timeLineBox{
	height: calc(100vh - 80px);
	::v-deep .el-card__body{
		padding:5px;
		// color: #FFF;
	}
}
</style>
