<!--
@ 作者: 秦东
@ 时间: 2024-11-06 08:42:51
@ 备注: 表单内容列表
-->
<script lang='ts' setup>
import { useRoute,useRouter } from 'vue-router'
import request from '@/utils/axios/index'
import { appPageDataInit } from '@/api/common/type'
import { tableFormStruct } from '@/api/lowCode/form/type'
import { gainAppPageInfo,judgeSubmitCancel,gainFormPageListCont } from '@/api/lowCode/form/index'
import { inputUnit,timeUnit,choiceUnit,switchUnit,orgUnit,checkboxUnit } from '@/api/lowCode/form/fieldUnit'
import { useDesignFormStore } from '@/utils/pinia/stores/lowCode/designForm'
import{ json2string,string2json,stringToObj } from '@/utils/lowCode/form'
import{ submitButton,submitFlowButton } from '@/utils/lowCode/const'
import { appWorkFlow } from '@/api/workFlow/type'
import { softDeletion } from '@/api/lowCode/taskapi/management'

import SvgIcon from '@/components/svgIcon/index.vue'
import Header from '@/views/common/header/formTable/header.vue'
import SearchSelect from '@/components/lowCode/selectSearch.vue'

import  CardPage  from '@/views/formTable/page/cardPageNew.vue'
import TabelFormList from '@/views/formTable/page/tabelFormList.vue'
import TimeAxis from '@/views/formTable/page/timeAxis.vue'
import Calendar from '@/views/formTable/page/calendar.vue'
import MapPage from '@/views/formTable/page/mapPage.vue'
import AppPageInfo  from '@/views/formTable/pageInfo.vue'

const route = useRoute()
const router = useRouter()
const appKey = ref<string>(route.query.key)
const appId = ref<string>(route.query.id)
const taskTitle = ref<string>(route.query.title)
const taskId = ref<string>(route.query.formid)
const taskKey = ref<string>(route.query.formKey)
const activeName = ref('1')
const pageIdAry = ref<string[]>([])
const formTableStr = ref<string>('')

const cardPageRef = ref(null) //卡片视图
const appFlowInfo = ref<appWorkFlow>(""); //流程

const appContent = reactive<any>({
    appKey:route.query.key,
	appId:route.query.id,
	taskTitle:route.query.title,
	taskId:route.query.formid,
	taskKey:route.query.formKey,
})
const lookInfo = ref<any>({})
const openAppPage = ref(false)
//app表单
const stateForm = reactive<any>({
  type: 1, // 1新增；2修改；3查看（表单模式） 
  formData: {
    list: [],
    form: {},
    config: {},
    powerstr: {},
  },
  dict: {},
  appKey: route.query.key,
  appId: route.query.id,
  taskTitle: route.query.title,
  taskId:route.query.formid,
  taskKey:route.query.formKey,
  flowIsTrue:false,
  flowKey:"",
  loading: true,
});
//表单列表
const stateList = reactive<tableFormStruct>({
    tableData: {
      // tableProps: {}, //表格所有参数
      columns: [],
      config: {},
	  controlBtn:[],
	  operateBtn:[]
    },
    searchData: [],
    loading: false,
    attrObj: {},
    config: {
		pageSize:10,
		searchIsShow:true,
		searchFormIsShow:true,
		openPageMode:"drawer"
	},
    tagList: {},
    formId: taskId || '',
    formList: [], // 所有可选表单数据源
    name: '',
    treeData: {}, // 左侧树相关
    previewVisible: false,
    tabsName: 'second',
    formFieldList: [], // 表单数据源所有可选字段
	formApi:{
		type:"1",
		addApiUrl:"",
		editApiUrl:"",
		delApiUrl:"",
		lookApiUrl:""
	},
    dict: {},
    refreshTable: true,
    isOpen: false,
	view:{
		list:{
			status:false,
			isClick:false,
			form:{
				sortWord:"",
				sortClass:1,
				title:[]
			}
		},
		date:{
			status:false,
			isClick:false,
			form:{
				startTime:"",
				endTime:"",
				dayType:1,
				title:[]
			}
		}
		,
		time:{
			status:false,
			isClick:false,
			form:{
				sortWord:"",
				sort:1,
				title:[]
			}
		}
		,
		gantt:{
			status:false,
			isClick:false,
			form:{
				startTime:"",
				endTime:"",
				dayType:2,
				sortWord:"",
				sort:1,
				title:[]
			}
		}
		,
		map:{
			status:false,
			isClick:false,
			form:{
				mapWord:"",
				sortWord:"",
				sort:1,
				title:[]
			}
		},
		card:{
			status:true,
			isClick:false,
			form:{
				sort:1,
				sortWord:"",
				imgWork:"",
				imgWidth:50,
				imgHeight:50,
				imgBorderRadius:5,
				imgPadding:2,
				titleWork:"",
				describe:"",
				ranks:3,
				title:[]
			}
		}
	}
		
})


/**
@ 作者: 秦东
@ 时间: 2024-11-04 11:16:36
@ 功能: 获取表单综合情况
*/
const initLoadData = () => {
    // console.log("获取初始化表单数据:",taskId)
    gainAppPageInfo({id:taskKey.value})
        .then((data) => {
            // console.log("获取初始化表单数据:",data)
            // appInitData.value = data.data
            // console.log("获取初始化表单数据---!",appInitData.value)
            formTableStr.value = data.data.appForm.mastesformjson

            if(data.data.appForm.listjson!=null && data.data.appForm.listjson != ''){
                let stateData = string2json(data.data.appForm.listjson)
                let holeControlAndConfigStateData = string2json(data.data.appForm.mastesformjson)
                if(stateData.tableData.columns && stateData.tableData.columns.length>0){
					for(let i = 0;i<stateData.tableData.columns.length;i++){
						for(let u = 0;u<holeControlAndConfigStateData.list.length;u++){
							if(stateData.tableData.columns[i].id==holeControlAndConfigStateData.list[u].name){
								stateData.tableData.columns[i].control = holeControlAndConfigStateData.list[u].control
								stateData.tableData.columns[i].config = holeControlAndConfigStateData.list[u].config
							}
							
						}


						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
							/*
								在这里请求后台获取字段
							*/
							//console.log("runAppForm-----214",paramx)
							if(paramx && paramx != "" && paramx != null && paramx != "undefined"){
								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
											}
										}
									}
								})
							}
							if(stateData.searchData && 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){
										
										
										// console.log(stateData.tableData.columns[i])
										stateData.searchData[j].control = stateData.tableData.columns[i].control
										stateData.searchData[j].config = stateData.tableData.columns[i].config
										// console.log(stateData.searchData[j])
									}
								}
							}
						}
					}
				}
                //liwenxuan 二维码 20250123 start
                stateData.tableData.controlBtn = stateData.tableData.controlBtn.filter(
                    //(item: any) => item.key != "showQrCode"
                    (item: any) => item.key !== "showQrCode" && item.key !== "import" && item.key !== "export"
                );
                //liwenxuan 二维码 20250123 end
                stateList.tableData = stateData.tableData

				stateList.searchData = stateData.searchData
				if(stateList.searchData == null){
					stateList.searchData = new Array()
				}
				stateList.loading = stateData.loading
				stateList.attrObj = stateData.attrObj
				stateList.config = stateData.config
				stateList.tagList = stateData.tagList
				stateList.formList = stateData.formList
				stateList.name = stateData.name
				stateList.treeData = stateData.treeData
				stateList.previewVisible = stateData.previewVisible
				stateList.formFieldList = stateData.formFieldList
				stateList.formApi = stateData.formApi
				stateList.dict = stateData.dict
				stateList.refreshTable = stateData.refreshTable
				if(stateData.view){
                    // console.log("数据展开",stateData.view)
                    if(stateData.view&&stateData.view.list){
                        stateData.view.list.status=false
                        stateData.view.list.isClick = false
                    }
                    if(stateData.view&&stateData.view.card){
                        stateData.view.card.status=true
                        stateData.view.card.isClick = true
                        activeName.value = 2
                    }
                    // console.log("数据展开--------------<",stateData.view)
					stateList.view = stateData.view
				}
            }
            // stateForm.formData = stringToObj(data.data.appForm.mastesform);
            // stateForm.dict = string2json(data.data.appForm.dict);
            // stateForm.formData.powerstr = string2json(data.data.appForm.powerstr);
            // judgeSubmitCancel({ name: data.data.appForm.mastesformjson })
            // .then(
            //     (datajud: any) => {
            //         if (datajud.code == 0) {
            //             if (datajud.data == 3 || datajud.data == 4) {
            //                 stateForm.formData.list.push(submitButton);
            //             }
            //         }
            //     }
            // );
            stateForm.flowIsTrue=data.data.appFlow
            stateForm.flowKey=data.data.flowkey
            //流程
            if (data.data.appFlow) {
                appFlowInfo.value = data.data.workFlow;
            }
        })
}
/**
@ 作者: 秦东
@ 时间: 2024-11-04 11:20:11
@ 功能: 加载数据
*/
onMounted(() => {
	initLoadData()
});
//搜索弹窗
const drawerOpen = ref(false)
const openSearch = () => {
    drawerOpen.value = true;
}
const closeSearch = () => {
    drawerOpen.value = false;
}


function getFieldRecord(param1: any) {
	return request({
		url: '/javasys/lowCode/AssociatedForms/getFieldRecord',
		method: 'post',
		data: {
			optionsValue3Field:param1
		},
	});
}
/**
@ 作者: 秦东
@ 时间: 2024-03-28 16:03:12
@ 功能: 判断类型
*/
const unitIsShow = (val:tableButton,unitName:string) => {
	// val.pattern
	switch (val.fieldClass) {
		case "id":		//自定义表单保留字
			return inputUnit.includes(unitName);
			break;
		case "masters_key": //自定义表单保留字
			return inputUnit.includes(unitName);
			break;
		case "creater": //自定义表单保留字
			return inputUnit.includes(unitName);
			break;
		case "creater_time": //自定义表单保留字
			return timeUnit.includes(unitName);
			break;
		case "edit_time": //自定义表单保留字
			return timeUnit.includes(unitName);
			break;
		case "flow_id": //自定义表单保留字
			return inputUnit.includes(unitName);
			break;
		case "baidumap":		//自定义表单保留字
			return inputUnit.includes(unitName);
			break;
		case "input":		//自定义表单保留字
			return inputUnit.includes(unitName);
			break;
		case "radio":		//自定义表单保留字
			return choiceUnit.includes(unitName);
			break;
		case "switch":		//自定义表单保留字
			return switchUnit.includes(unitName);
			break;
		case "orgCentent":		//自定义表单保留字
			return orgUnit.includes(unitName);
			break;
		case "varchar":		//自定义表单保留字
			return inputUnit.includes(unitName);
			break;
		case "checkbox":
			return checkboxUnit.includes(unitName);
			break;
		default:
			if(val.fieldClass != "datePicker" && val.fieldClass != "timePicker"){
				return inputUnit.includes(unitName);
			}
			
			break;
	}
	return false;
}
/**
@ 作者: 秦东
@ 时间: 2024-11-19 09:18:39
@ 功能: 获取app最新表单
*/
const getNewAppForm = () => {
    gainAppPageInfo({id:taskKey.value})
        .then((data) => {
            stateForm.formData = stringToObj(data.data.appForm.mastesform);
            stateForm.dict = string2json(data.data.appForm.dict);
            stateForm.formData.powerstr = string2json(data.data.appForm.powerstr);
            judgeSubmitCancel({ name: data.data.appForm.mastesformjson })
                .then(
                    (datajud: any) => {
                        
                        if (datajud.code == 0) {
                            if (datajud.data == 3 || datajud.data == 4) {
                                if(data.data.appFlow){
                                    stateForm.formData.list.push(submitFlowButton);
                                }else{
                                    stateForm.formData.list.push(submitButton);
                                }
                                
                            }
                        }
                    }
                );
            stateForm.flowIsTrue=data.data.appFlow
            stateForm.flowKey=data.data.flowkey
            //流程
            if (data.data.appFlow) {
                appFlowInfo.value = data.data.workFlow;
            }
        })
}
/**
@ 作者: 秦东
@ 时间: 2024-11-04 13:59:42
@ 功能: 功能按钮动作
*/
const setUpClick = (val:string,id:string) => {
    // console.log("功能按钮动作",val,"----id----->",id,"-----formId---->",pageIdAry.value)
    if(val.key == "newAdd"){
        getNewAppForm()
        stateForm.type = 1
        openAppPage.value = true;
    }else{
        if(pageIdAry.value.length > 0){
            ElMessageBox.confirm("确认删除此数据项?删除后不可恢复！", "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                let sendData = {
                    id: pageIdAry.value,
                    isTrue: 2,
                };
                softDeletion(sendData).then((data) => {
                    // console.log('cancel!',data)
                    ElNotification({
                        title: "温馨提示！",
                        message: data.mag,
                        type: "success",
                    });
                    cardPageRef.value.requeryList();
                });
            }).catch(() => {
                cardPageRef.value.requeryList();
            });
        }else{
            ElMessage.error("你还未选中要删除的项目！");
        }
    }
}
/**
@ 作者: 秦东
@ 时间: 2024-11-06 11:46:28
@ 功能: 查询数据
*/
const chaxunData = () => {
    console.log("查询数据重置查询列表:")
    cardPageRef.value.requeryList();
    drawerOpen.value = false;
}
/**
@ 作者: 秦东
@ 时间: 2024-03-28 13:17:46
@ 功能: 重置查询表单
*/
const ruleSearchForm = ref()
const resetFields = (formEl: FormInstance | undefined) => {
	if(stateList.searchData && stateList.searchData.length > 0){
		stateList.searchData.forEach((item:any)=>{
			item.value="";
		})
	}
}
/**
@ 作者: 秦东
@ 时间: 2024-11-06 14:45:29
@ 功能: 切换视图
*/
const switchTabs = (val:string) => {
    activeName.value = val.toString()
}

/**
@ 作者: 秦东
@ 时间: 2024-11-21 13:33:52
@ 功能: 执行操作
*/
const performAction = (val) => {}

</script>
<template>
    <div>
        <Header :header-title="taskTitle" :app-key="appKey" menu-tree="" :call-back-click="true" />
        <div ref="container"  class="table-list-comm">
            <div class="contentBetween">
                <div v-if="stateList.tableData.controlBtn.length > 0">
                    <el-button
                        v-for="item in stateList.tableData.controlBtn"
                        v-bind="item"
                        :key="item.type"
                        @click="setUpClick(item)"
                    >
                        {{ item.label }}
                    </el-button>
                </div>
                <div class="listStely">
                    <el-space wrap>
                        <SvgIcon icon-class="search" :size="20" @click="openSearch" />
                        <el-dropdown>
                            <span class="el-dropdown-link">
                            视图<SvgIcon icon-class="arrow-down" :size="15" />
                            </span>
                            <template #dropdown>
                                <el-dropdown-menu>

                                    <el-dropdown-item v-if="stateList.view.list.status" @click="switchTabs(1)">
                                        <div :class="activeName=='1' ? 'pickMenu' : ''"><SvgIcon icon-class="liebiao" :size="15" />列表</div>
                                    </el-dropdown-item>
                                    <el-dropdown-item v-if="stateList.view.card.status" @click="switchTabs(2)">
                                         <div :class="activeName=='2' ? 'pickMenu' : ''"><SvgIcon icon-class="kapian" :size="15" />卡片</div>
                                    </el-dropdown-item>
                                    <el-dropdown-item v-if="stateList.view.date.status" @click="switchTabs(3)">
                                         <div :class="activeName=='3' ? 'pickMenu' : ''"><SvgIcon icon-class="rili" :size="15" />日历</div>
                                    </el-dropdown-item>
                                    <el-dropdown-item v-if="stateList.view.time.status" @click="switchTabs(4)">
                                         <div :class="activeName=='4' ? 'pickMenu' : ''"><SvgIcon icon-class="shijianzhou" :size="15" />时间轴</div>
                                    </el-dropdown-item>
                                    <el-dropdown-item v-if="stateList.view.gantt.status" @click="switchTabs(5)">
                                         <div :class="activeName=='5' ? 'pickMenu' : ''"><SvgIcon icon-class="gantetu" :size="15" />甘特图</div>
                                    </el-dropdown-item>
                                    <el-dropdown-item v-if="stateList.view.map.status" @click="switchTabs(6)">
                                         <div :class="activeName=='6' ? 'pickMenu' : ''"><SvgIcon icon-class="ditu" :size="15" />地图</div>
                                    </el-dropdown-item>
                                
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    
                    </el-space>
                    
                    <!-- <el-button-group class="ml-4">
                        <el-button v-if="stateList.view.list.status" @click="switchTabs(1)" size="small" class="fa fa-table" :color="activeName=='1' ? '#a0cfff' : ''" />
                        <el-button v-if="stateList.view.card.status" @click="switchTabs(2)" size="small" class="fa fa-id-card-o" :color="activeName=='2' ? '#a0cfff' : ''"/>
                        <el-button v-if="stateList.view.date.status" @click="switchTabs(3)" size="small" class="fa fa-calendar" :color="activeName=='3' ? '#a0cfff' : ''"/>
                        <el-button v-if="stateList.view.time.status" @click="switchTabs(4)" size="small" class="fa fa-clock-o" :color="activeName=='4' ? '#a0cfff' : ''"/>
                        <el-button v-if="stateList.view.gantt.status" @click="switchTabs(5)" size="small" class="fa fa-bar-chart" :color="activeName=='5' ? '#a0cfff' : ''" />
                        <el-button v-if="stateList.view.map.status" @click="switchTabs(6)" size="small" class="fa fa-map-signs" :color="activeName=='6' ? '#a0cfff' : ''" />
                    </el-button-group> -->
                    
                </div>

                <el-drawer
                    v-model="drawerOpen"
                    title="查询"
                    size="100%"
                >
                    <el-form  ref="ruleSearchForm" style="padding: 0px 10px 0px 10px;">
                        <template v-for="(item, index) in stateList.searchData" :key="index">
                            <div class="group group-input">
                                <el-form-item :label="item.label"  class="form_cont">
                                    <el-input
                                        v-model="item.value"
                                        :placeholder="'请输入'+item.label"
                                        clearable
                                        v-if="unitIsShow(item,'input')"
                                    />
                                    <el-date-picker
                                        v-model="item.value"
                                        type="datetime"
                                        :placeholder="'请选择'+item.label"
                                        :shortcuts="shortcuts"
                                        v-if="unitIsShow(item,'time')"
                                    />
                                    <SearchSelect
                                        v-if="unitIsShow(item,'radio')"
                                        :data="item"
                                        :disabled="false"
                                        :transform-option="transformOption"
                                        v-model:model-value="item.value"
                                    />
                                    <el-select
                                        v-model="item.value"
                                        clearable
                                        :placeholder="'请选择'+item.label"
                                        v-if="unitIsShow(item,'switch')"
                                    >
                                        <el-option
                                            :key="item.activeValue"
                                            label="是"
                                            :value="item.activeValue"
                                        />
                                        <el-option
                                            :key="item.inactiveValue"
                                            label="否"
                                            :value="item.inactiveValue"
                                        />
                                    </el-select>
                                    <SearchSelect
                                        v-if="unitIsShow(item,'checkbox')"
                                        :data="item"
                                        :disabled="false"
                                        :is-checkbox="true"
                                        :transform-option="transformOption"
                                        v-model:model-value="item.value"
                                    />
                                    <el-date-picker
                                        v-if="item.fieldClass == 'datePicker'"
                                        v-model="item.value"
                                        :type="item.auxiliary"
                                        :placeholder="'请选择'+item.label"
                                        value-format="x"
                                    />
                                    <el-time-picker
                                        v-if="item.fieldClass == 'timePicker'"
                                        v-model="item.value"
                                        arrow-control
                                        :placeholder="'请选择'+item.label"
                                        value-format="x"
                                    />
                                    <el-select
                                        v-model="item.value"
                                        clearable
                                        :placeholder="'请选择'+item.label"
                                        v-if="unitIsShow(item,'org')"
                                    >
                                    </el-select>
                                </el-form-item>
                            </div>
                        </template>
                        <div class="group group-btn" v-if="stateList.searchData.length">
                            <el-button type="primary" @click="chaxunData"><el-icon><Search /></el-icon>查询</el-button>
                            <el-button @click="resetFields(ruleSearchForm)"><el-icon><Refresh /></el-icon>重置</el-button>
                        </div>
                    </el-form>
                </el-drawer>
            </div>
        </div>
        
        <TabelFormList v-if="activeName=='1'" ref="cardPageRef" v-model:page-id-ary="pageIdAry" :app-key="appKey" :app-id="appId" :task-id="taskId" :task-key="taskKey" :task-title="taskTitle" :stateList-info="stateList" :state-form="stateForm" :app-flow-info="appFlowInfo" :form-table-str="formTableStr" />
        <CardPage v-if="activeName=='2'" ref="cardPageRef" v-model:page-id-ary="pageIdAry" :app-key="appKey" :app-id="appId" :task-id="taskId" :task-key="taskKey" :task-title="taskTitle" :stateList-info="stateList" :state-form="stateForm" :app-flow-info="appFlowInfo" :form-table-str="formTableStr"  />
        <Calendar v-if="activeName=='3'" ref="cardPageRef" v-model:page-id-ary="pageIdAry" :app-key="appKey" :app-id="appId" :task-id="taskId" :task-key="taskKey" :task-title="taskTitle" :stateList-info="stateList" :state-form="stateForm" :app-flow-info="appFlowInfo" :form-table-str="formTableStr" />
        <TimeAxis v-if="activeName=='4'" ref="cardPageRef" v-model:page-id-ary="pageIdAry" :app-key="appKey" :app-id="appId" :task-id="taskId" :task-key="taskKey" :task-title="taskTitle" :stateList-info="stateList" :state-form="stateForm" :app-flow-info="appFlowInfo" :form-table-str="formTableStr" />
        <mapPage  v-if="activeName=='6'" ref="cardPageRef" v-model:page-id-ary="pageIdAry" :app-key="appKey" :app-id="appId" :task-id="taskId" :task-key="taskKey" :task-title="taskTitle" :stateList-info="stateList" :state-form="stateForm" :app-flow-info="appFlowInfo" :form-table-str="formTableStr" />

        <AppPageInfo v-if="openAppPage" v-model:is-show="openAppPage" :app-info="appContent" :app-page-info="lookInfo" :state-form="stateForm" :app-flow-info="appFlowInfo" :form-table-str="formTableStr" @searchData="chaxunData" />
    </div>
</template>
<style  lang='scss' scoped>
.table-list-comm{
	padding:10px 15px 5px 15px;
}
.appListScrollbarCss{
    width: 100%;
    padding: 0px 10px 0 10px;
    height: calc(100vh - 130px);
    // background-color: #FF0000;
    .taskCardBox{
        width: 100%;
        margin-top:10px;
        :deep .el-card__footer{
            padding: 10px 5px;
            text-align: right;
        }
    }
    :deep .el-card__body{
        padding: 10px 10px;
    }
}
.cardFoot{
    width: 100%;
    text-align: right;
}
.cardTitle{
    line-height: 30px;
}
.cardInfoTitle{
    font-size:14px;
    line-height:20px;
    color: #999999;
}
.loading{
    width:100%;
    text-align: center;
    height:40px;
    line-height: 40px;
}
.listStely{

    padding: 5px 0px 0px 0px;
    text-align: right;
}
.talbelBox{
    width: 100%;
    .leftTdWat{
        max-width: 50px;
        text-align:left;
    }
}
.pickMenu{
    color: #a0cfff;
}
</style>