<!--
@ 作者: 秦东
@ 时间: 2024-07-22 15:39:28
@ 备注: 自定义应用列表模式
-->
<script lang='ts' setup>
import { customerFormCont } from "@/api/DesignForm/type";
import { getCustomerFormList,editProductionFormStatus,appJwtPower,getFieldRecord,setOftenApp } from '@/api/DesignForm/requestapi'
import {
  ArrowLeft,
  ArrowRight,
  Delete,
  Edit,
  Share,
  View,
  Star
} from '@element-plus/icons-vue'
//引入组件
import AppContainer from '@/views/sysworkflow/lowcodepage/newLowCode/appLayout/appContainer.vue'
import AppContainerPage  from '@/views/sysworkflow/lowcodepage/newLowCode/appLayoutEdit/appContainerPage.vue' //自建应用编辑
import LowCodeFormPage from "@/views/sysworkflow/lowcodepage/lowCodeFormPage.vue"


const props = defineProps({
	searchQuery:{
		type:Object,
		default(){
			return {}
		}
	},
	appGroup:{
		type:String,
		default:""
	},
	drawerWith:{
		type:Number,
		default:true
	}
});
const emits = defineEmits(["getRongQiAttr"]);
/**
@ 作者: 秦东
@ 时间: 2024-07-22 09:09:29
@ 功能: 总记录数
*/
const pageTotal = ref(0)
const contList = ref<customerFormCont[]>()	//记录
	const loadingApp = ref(false)
const runIsOpen = ref(false)
const pickAppInfo = ref<customerFormCont>()			//应用或表单内容
/**
@ 作者: 秦东
@ 时间: 2024-03-21 10:54:23
@ 功能: 获取表单列表
*/
const getFormAppList = (val:any) => {
	loadingApp.value = true
	let sendInfo = {
		page:val.page,
		pagesize:val.pagesize,
		keywords:val.searchWork,
		groupId:props.appGroup
	}
	getCustomerFormList(sendInfo)
		.then(({ data }) => {
			// console.log("打开应用-2->",data);
			pageTotal.value = data.total
			contList.value = data.list
		})
		.finally(() => {
			loadingApp.value = false
		})
}

onMounted(() => {
	nextTick(() => {
		getFormAppList(props.searchQuery);
	})
})
watch(()=>props.appGroup,()=>{
	getFormAppList(props.searchQuery);
})
/**
@ 作者: 秦东
@ 时间: 2024-07-22 16:16:31
@ 功能: 删除表单
*/
const delFormApp = (val:customerFormCont) => {
	// console.log("确定删除表单---->", val);
	loadingApp.value = true
	editProductionFormStatus({id:[val.id.toString()],status:3,is_delete:false})
		.then(({data})=>{
			loadingApp.value = false
			getFormAppList(props.searchQuery)
		})
		.finally(() => {
			loadingApp.value = false
		})
}


/**
@ 作者: 秦东
@ 时间: 2024-05-29 16:13:16
@ 功能: 打开应用
*/
const lookAppList = (val:any) => {
	let appPower = 0;
	emits('getRongQiAttr')
	pickAppInfo.value = val
	appJwtPower({id:val.signCodeStr,types:1})
		.then(({data})=>{
			// console.log("打开应用------>data:",data)
			if(data){
				runIsOpen.value = true
			}else{
				ElMessage({
					message: '对不起！您不可使用此App！请联系管理员进行授权！',
					type: 'error',
					plain: true,
				})
			}
		})
}
/**
@ 作者: 秦东
@ 时间: 2024-07-22 09:57:45
@ 功能: 编辑应用
*/
const editIsOpen = ref(false)
const appKey = ref<string>("")
const editForm = (val:any) => {
	emits("getRongQiAttr")
	pickAppInfo.value = val
	editIsOpen.value = true;
}
/**
@ 作者: 秦东
@ 时间: 2024-07-23 15:27:51
@ 功能: 表单数据
*/
const state = reactive({
    tableData: {
      // tableProps: {}, //表格所有参数
      columns: [],
      config: {},
	  controlBtn:[],
	  operateBtn:[]
    },
    searchData: [],
    loading: false,
    attrObj: {},
    config: {
		pageSize:10,
		searchIsShow:true,
		searchFormIsShow:true,
		openPageMode:"drawer"
	},
    tagList: {},
    formId: props.formKey || '',
    formList: [], // 所有可选表单数据源
    name: '',
    treeData: {}, // 左侧树相关
    previewVisible: false,
    tabsName: 'second',
    formFieldList: [], // 表单数据源所有可选字段
	formApi:{
		type:"1",
		addApiUrl:"",
		editApiUrl:"",
		delApiUrl:"",
		lookApiUrl:""
	},
    dict: {},
    refreshTable: true,
	view:{
		list:{
			status:true,
			isClick:false,
			form:{
				sortWord:"",
				sortClass:1
			}
		},
		date:{
			status:false,
			isClick:false,
			form:{
				startTime:"",
				endTime:"",
				dayType:1
			}
		}
		,
		time:{
			status:false,
			isClick:false,
			form:{
				sortWord:"",
				sort:1
			}
		}
		,
		gantt:{
			status:false,
			isClick:false,
			form:{
				startTime:"",
				endTime:"",
				dayType:2,
				sortWord:"",
				sort:1
			}
		}
		,
		map:{
			status:false,
			isClick:false,
			form:{
				mapWord:"",
				sortWord:"",
				sort:1
			}
		},
		card:{
			status:false,
			isClick:false,
			form:{
				sort:1,
				sortWord:"",
				imgWork:"",
				imgWidth:50,
				imgHeight:50,
				imgBorderRadius:5,
				imgPadding:2,
				titleWork:"",
				describe:"",
				ranks:3
			}
		}
	}
})
const lookPageIsShow = ref(false)
const versionTitle = ref<string>("")	//表单名称
const versionId = ref<string>("")	//表单版本号
const formId = ref<string>("")
const addFormIsShow = ref(false)
/**
@ 作者: 秦东
@ 时间: 2024-04-01 14:32:18
@ 功能: 查看表单列表
*/
const lookFormList = (val:any) => {
	emits('getRongQiAttr')
	// console.log("查看表单列表aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa", val)
	lookPageIsShow.value = true
	state.formId = val.idStr

	versionId.value = val.versionId
	versionTitle.value = val.name

	let stateData = string2json(val.listjson)
			// console.log(val.listjson)
			// console.log("查看表单列表---->",stateData)
			//let holeControlAndConfigStateData = string2json(data.data.appForm.mastesformjson)
			if(stateData.tableData.columns.length>0){
				for(let i = 0;i<stateData.tableData.columns.length;i++){
					if(stateData.tableData.columns[i].config!=undefined && stateData.tableData.columns[i].control!=undefined){
						// console.log(stateData.tableData.columns[i])
						let paramx:string = ""+stateData.tableData.columns[i].control.optionsValue3Field
						/*
							在这里请求后台获取字段
						*/
						getFieldRecord(paramx).then(({ data }) => {
							stateData.tableData.columns[i].options = data
							if(stateData.searchData.length>0){
								for(let j = 0;j<stateData.searchData.length;j++){
									// console.log(stateData.searchData[j])
									if(stateData.searchData[j].id==stateData.tableData.columns[i].id){
										stateData.searchData[j].options = data
									}
								}
							}
						})
					}
				}
			}
			state.tableData = stateData.tableData
			state.searchData = stateData.searchData
			state.loading = stateData.loading
			state.attrObj = stateData.attrObj
			state.config = stateData.config
			state.tagList = stateData.tagList
			
			state.formList = stateData.formList
			state.name = stateData.name
			state.treeData = stateData.treeData
			state.previewVisible = stateData.previewVisible
			state.formFieldList = stateData.formFieldList
			state.formApi = stateData.formApi
			state.dict = stateData.dict
			state.refreshTable = stateData.refreshTable


}
/**
@ 作者: 秦东
@ 时间: 2024-03-21 10:57:11
@ 功能: 编辑表单
*/
const editFormApp = (val:any) => {
	emits('getRongQiAttr')
	formId.value = val.id.toString()
	addFormIsShow.value= true
	// console.log("编辑表单",val.id,"-",formId.value,"-",addFormIsShow.value)
}
/**
@ 作者: 秦东
@ 时间: 2024-03-09 09:06:44
@ 功能: 刷新页面
*/
const refreshPage = (pageType:string) =>{
	addFormIsShow.value = false;
	getFormAppList(props.searchQuery);
}
/**
@ 作者: 秦东
@ 时间: 2024-07-23 16:29:51
@ 功能: 设置常用与非常用
*/
const setOften = (val:any) => {

	setOftenApp({id:val.signCodeStr})
		.then(({data}) =>{
			getFormAppList(props.searchQuery);
		});
	
}
defineExpose({
	getFormAppList
})
</script>
<template>
	<div class="listBody">
		<el-table v-loading="loadingApp" :data="contList" border class="tableBox">
			<el-table-column fixed  label="封面" width="80" align="center">
				<template #default="scope">
					<el-image
						style="width: 30px; height: 30px"
						:src="scope.row.icon?scope.row.icon:'https://docu.hxgk.group/images/2024_04/482167d1bf2b75a5717bcf68e18235f7.png'"
						:zoom-rate="1.2"
						:max-scale="7"
						:min-scale="0.2"
						:initial-index="4"
						fit="cover"
					/>
				</template>
			</el-table-column>
			<el-table-column fixed  prop="name" label="名称" min-width="380" />
			<el-table-column  label="编号" width="200">
				<template #default="scope">
				{{scope.row.signCodeStr!=0?scope.row.signCodeStr:""}}
				</template>
			</el-table-column>
			<el-table-column  label="类型"  align="center" width="180">
				<template #default="scope">
					<el-tag v-if="scope.row.classify==1" type="primary">普通表单</el-tag>
					<el-tag v-if="scope.row.classify==2" type="success">流程表单</el-tag>
					<el-tag v-if="scope.row.classify==3" type="warning">自定义应用</el-tag>
					<el-tag v-if="scope.row.classify==4" type="danger">自定义应用表单</el-tag>
				</template>
			</el-table-column>
			<el-table-column  prop="describe" label="简介" min-width="180" />
			<el-table-column  label="创建人" width="100"  align="center">
				<template #default="scope">
				{{scope.row.creatername}}
				</template>
			</el-table-column>
			<el-table-column  label="创建时间" width="200">
				<template #default="scope">
				{{scope.row.creatertimeStr}}
				</template>
			</el-table-column>
			<el-table-column fixed="right" label="操作" width="200" align="center">
				<template #default="scope">
					<el-button-group v-if="scope.row.classify==3" class="ml-4">
						<el-button  size="small" title="查看"  :icon="View" @click="lookAppList(scope.row)"  />
						<el-button size="small" title="设为常用" :icon="Star" :color="scope.row.isoften?'#FF0000':''" @click="setOften(scope.row)" />
						<el-button size="small" title="编辑" type="success" :icon="Edit" @click="editForm(scope.row)"  />
						
						<el-popconfirm title="请问是否真的删除？删除后数据将无法找回！" @confirm="delFormApp(scope.row)">
							<template #reference>
								<el-button size="small" title="删除" type="danger" :icon="Delete" />
							</template>
						</el-popconfirm>
					</el-button-group>
					<el-button-group v-else class="ml-4">
						<el-button  size="small" title="查看"  :icon="View"  @click="lookFormList(scope.row)" />
						<el-button size="small" title="编辑" type="success" :icon="Edit" @click="editFormApp(scope.row)" />
						<el-popconfirm title="请问是否真的删除？删除后数据将无法找回！" @confirm="delFormApp(scope.row)">
							<template #reference>
								<el-button size="small" title="删除" type="danger" :icon="Delete" />
							</template>
						</el-popconfirm>
					</el-button-group>
				</template>
			</el-table-column>
		</el-table>
		<div class="pagination-box">
            <el-pagination background v-if="pageTotal > 0" v-model:current-page="props.searchQuery.page"
            v-model:page-size="props.searchQuery.pagesize"
            :total="pageTotal" @current-change="handleCurrentChange" />
        </div>

		<AppContainer v-model:run-is-open="runIsOpen" :pick-app-info="pickAppInfo" :drawer-with="props.drawerWith" :search-query="props.searchQuery" @refreshPage="getFormAppList" />
		<AppContainerPage v-model:edit-is-open="editIsOpen" :pick-app-info="pickAppInfo" :drawer-with="props.drawerWith" :search-query="props.searchQuery"  :group-key="props.appGroup" @refreshPage="getFormAppList" />
		<el-drawer
			v-model="lookPageIsShow"
			title="列表预览"
			direction="rtl"
			:before-close="handlePreviewClose"
			:size="props.drawerWith"
		>
			<ak-page-list
				:data="state.tableData"
				:search-data="state.searchData"
				:config="state.config"
				:form-id="state.formId"
				:versionid="versionId" 
				:viewPage="state.view"
				:versiontitle="versionTitle"
				
				v-model:look-page-is-show="lookPageIsShow"
			/>
		</el-drawer>
		<LowCodeFormPage v-if="addFormIsShow" :drawer-with="props.drawerWith" v-model:form-key="formId" @refreshPage="refreshPage" />
	</div>
</template>
<style  lang='scss' scoped>
.pagination-box{
    display: flex;
    justify-content: center;
    margin-top: 15px;
}
.listBody{
	padding: 10px 10px;
}
.tableBox{
	width: 100%;
	height: calc(100vh - 370px);
}
</style>
