<!--
@ 作者: 秦东
@ 时间: 2024-03-06 11:43:49
@ 备注: 表单列表
-->
<script lang='ts' setup>
import { SearchForm,customerFormCont,customerFormConfig } from "@/api/DesignForm/type";
import { customerFormGroupList,editFormGroupState,createApp,gainAppEditPsge } from '@/api/DesignForm/requestapi'


/**
@ 作者: 秦东
@ 时间: 2024-03-09 08:59:37
@ 功能: 引入组件页面
*/
import LowCodeFormPage from "@/views/sysworkflow/lowcodepage/lowCodeFormPage.vue"
import LowCodeFormGroupPage from "@/views/sysworkflow/lowcodepage/lowCodeFormGroupPage.vue"
import AppFormList from "@/views/sysworkflow/lowcodepage/appFormList.vue"

import DesignAPPpage from "@/views/sysworkflow/lowcodepage/appPage/index.vue"	//自建应用

const appPageShow = ref(false)
const contbody = ref()	//实例化内容容器
const addFormIsShow = ref(false)
const addFormGroupIsShow = ref(false)
const drawerWith = ref();	//编辑表单时抽屉宽度
const drawerGroupWith = ref();	//编辑表单时抽屉宽度
const formKey = ref<string>("") //表单标识
const formGroupKey = ref<string>("") //表单标识
const groupKey = ref<string>("") //分组标识
const squareUrl = ref<string>('https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png')

const page = ref<number>(1)			//页码
const pageSize = ref<number>(12)	//每页显示几个
const pageTotal = ref<number>(0)	//总记录数
const groupFormList = ref<any[]>([]) //记录数组
/**
@ 作者: 秦东
@ 时间: 2024-03-09 09:06:32
@ 功能: 选择添加项目
*/
const handleCommand = (command: string,groupId: string) => {
	// ElMessage(`click on item ${command}`)
	if (command == "addForm"){
		formKey.value = ""
		formGroupKey.value = groupId
		// addFormIsShow.value = true
		drawerWith.value = contbody.value?.clientWidth
		addFormIsShow.value = true;
	}else if(command == "addFormApp"){	
		
		drawerWith.value = contbody.value?.clientWidth
		let sendInfo = {
			id:groupId.toString()
		}
		createApp(sendInfo)
			.then((data)=>{
				formKey.value = data.data.uuid
				nextTick(() =>{
					appPageShow.value = true
				});
			})
			.finally(() => {
				
			})
		
	}else{
		addFormGroupIsShow.value = true
		drawerGroupWith.value = 400
	}
}
/**
@ 作者: 秦东
@ 时间: 2024-03-21 13:53:29
@ 功能: 编辑分组
*/
const editFormGroup = (id: string) =>{
	groupKey.value = id
	addFormGroupIsShow.value = true
	drawerGroupWith.value = 400
}
/**
@ 作者: 秦东
@ 时间: 2024-03-09 09:06:44
@ 功能: 刷新页面
*/
const refreshPage = (pageType:string) =>{
	if(pageType == "formPage"){
		addFormIsShow.value = false;
	}else{
		addFormGroupIsShow.value = false;
	}
	gainFormGroup()
}
/**
@ 作者: 秦东
@ 时间: 2024-03-21 09:30:27
@ 功能: 获取表单分组
*/
const gainFormGroup = () => {
	let sendInfo = {
		page:page.value,
		pagesize:pageSize.value,
		state:1
	}
	customerFormGroupList(sendInfo)
		.then((data) =>{
			console.log("获取表单分组",data)
			pageTotal.value = data.data.total
			groupFormList.value = data.data.list
		})
}
/**
@ 作者: 秦东
@ 时间: 2024-03-21 14:22:58
@ 功能: 改变分组状态
*/
const eidtGroupStatus = (id: string, state: number) => {

	ElMessageBox.confirm(
		'您确定要删除此分组吗？一经删除！数据将不可恢复！请慎重执行此操作！！！',
		'温馨提示',
		{
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning',
		}
	)
	.then(() => {
		let sendInfo = {
			id: id.toString(),
			status: state
		}
		editFormGroupState(sendInfo)
			.then((data) =>{
				ElMessageBox.alert(data.msg, '温馨提示！', {
						confirmButtonText: '确定',
						callback: (action: Action) => {
							gainFormGroup()
						}
				});
			})
	})

	
}
onMounted(()=>{
	drawerWith.value = contbody.value?.clientWidth
	gainFormGroup()
})
/**
@ 作者: 秦东
@ 时间: 2024-04-01 14:27:51
@ 功能: 获取容器宽度
*/
const getRongQiAttr = () => {
	drawerWith.value = contbody.value?.clientWidth
}
</script>
<template>
	<div ref="contbody" class="box_content">
		<!-- <el-affix :offset="100" >
			<el-dropdown  @command="handleCommand">
				<el-button type="primary" class="fa fa-plus" circle ></el-button>
				<template #dropdown>
					<el-dropdown-menu>
						<el-dropdown-item command="addForm">创建新表单</el-dropdown-item>
          				<el-dropdown-item command="addFormGroup">创建表单分组</el-dropdown-item>
					</el-dropdown-menu>
				</template>
			</el-dropdown>
		</el-affix> -->
		
		<el-row :gutter="10" class="formGroupList">
			<el-col v-for="item in groupFormList" :key="item.id" :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
				<el-card class="cardlarge" body-style="padding:0px 10px 10px 5px;">
					<template #header>
						<div class="cardHeadBox">
							<div class="textBox">
								<el-avatar v-if="item.icon!=''" shape="square" size="small" :src="item.icon" />
								<el-avatar v-else shape="square" size="small" :src="squareUrl" />
								<el-text  class="w-200px mb-2 left_suojin" truncated size="large">{{item.title}}</el-text>
							</div>
							<el-dropdown>
								<span class="el-dropdown-link">
								<el-icon><MoreFilled /></el-icon>
								</span>
								<template #dropdown>
									<el-dropdown-menu>
										<el-dropdown-item @click="handleCommand('addFormGroup',item.idStr)" >新增分组</el-dropdown-item>
										<el-dropdown-item @click="handleCommand('addForm',item.idStr)" >添加表单</el-dropdown-item>
										<el-dropdown-item @click="handleCommand('addFormApp',item.idStr)" >添加应用</el-dropdown-item>
										<el-dropdown-item @click="editFormGroup(item.idStr)">编辑</el-dropdown-item>
										<el-dropdown-item @click="eidtGroupStatus(item.idStr,3)">删除</el-dropdown-item>
									</el-dropdown-menu>
								</template>
							</el-dropdown>
						</div>
					</template>
					<AppFormList v-model:form-key="formKey" :group-id="item.idStr" :drawer-with="drawerWith" @getRongQiAttr="getRongQiAttr" />
					
				</el-card>
				
			</el-col>
			
		</el-row>
		<!-- 分页 -->
		<div class="formGroupPage">
			<el-pagination layout="prev, pager, next" v-model:current-page="page" :page-size="pageSize" :total="pageTotal" />
		</div>

		<DesignAPPpage v-model:is-show="appPageShow"  :drawer-with="drawerWith" v-model:form-key="formKey" @refreshPage="refreshPage" />
			
		<LowCodeFormPage v-if="addFormIsShow" :drawer-with="drawerWith" v-model:form-key="formKey" :form-group-key="formGroupKey" @refreshPage="refreshPage" />
		<LowCodeFormGroupPage v-if="addFormGroupIsShow" :drawer-with="drawerGroupWith"  :group-key="groupKey" @refreshPage="refreshPage" />
	</div>
</template>
<style  lang='scss' scoped>
.box_content{
	width: 100%;
	height: calc(100vh - 90px);
	overflow: hidden;
	overflow-y: auto;
	padding: 0;
	.formGroupList{
		width:100%;
		padding: 0 0 10px 10px;
	}
	.formGroupPage{
		width:100%;
		position: fixed;
		bottom: 0px;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}
.affix_box{
	display: flex;
	margin-left: 10px;
}
.cardHeadBox{
	display: flex;
	justify-content: space-between;
	align-items: center;
	.textBox{
		display: flex;
		align-items: center;
		vertical-align: middle;
		word-wrap: break-word;
		.mx-1{
			padding-left:10px;
		}
	}
}
.but_centent{
	text-align: center;
}
.foot_bottom{
	padding: 0 ;
}
/* 小卡片 */
.cardpattern{
//   padding-bottom: 0px;
//   margin-bottom: 10px;
//   min-width: 100px;
}
/* 小卡片标题 */
.cardhead{
  font-size: 15px;
}
/* 大卡片 */
.cardlarge{
  max-width: 480px;
  margin-top:10px;
  ::v-deep .el-card__header{
	padding:10px !important;
  }
}

/* 大卡片标题 */
.cardhead-large{
  font-size: 20px;
}
.left_suojin{
	padding-left: 10px;
}



</style>
