<!-- 功能开发 -->
<template>
	<div>
		<el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList()">
			<el-form-item>
				<el-input v-model="state.queryForm.name" title="名称(精确查询,模块和列表)" placeholder="名称(精确查询,模块和列表)" clearable></el-input>
			</el-form-item>
			<el-form-item>
				<el-checkbox v-model="state.queryForm.showAll" label="自动展开" value="true" @change="refreshTableFun" />
			</el-form-item>
			<el-form-item>
				<el-button @click="getDataList()">查询</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="handleEdit(null, null)">新增</el-button>
			</el-form-item>
		</el-form>
		<el-table
		class="flex-content-1"
			v-if="refreshTable"
			v-loading="state.dataListLoading"
			show-overflow-tooltip
			:data="state.dataList"
			border
			row-key="id"
			style="width: 100%"
			height="100%"
			:default-expand-all="state.queryForm.showAll"
			@selection-change="selectionChangeHandle"
		>
			<el-table-column type="selection" width="40"></el-table-column>
			<!--<el-table-column label="ID" align="left" prop="id" show-overflow-tooltip width="290" />
			<el-table-column label="编码" align="left" prop="code" show-overflow-tooltip width="120">
				<template #default="scope">
					<div style="color: #409eff; cursor: pointer" @click="reviewReport(scope.row)">
						{{ scope.row.reportCode }}
					</div>
				</template>
			</el-table-column> -->
			<el-table-column label="名称" align="left" prop="name" show-overflow-tooltip />
      <el-table-column label="编码" align="left" prop="code" show-overflow-tooltip />
			<fast-table-column label="类型" prop="type" dict-type="function_type" show-overflow-tooltip width="80" />
			<el-table-column label="序号" prop="funOrder" show-overflow-tooltip width="80" />
			<el-table-column label="说明" prop="remark" show-overflow-tooltip width="120" />
			<fast-table-column label="是否启用" prop="usabled" dict-type="is_valid" show-overflow-tooltip width="100" />
			<el-table-column label="创建人" align="left" prop="creator" show-overflow-tooltip width="120" />
			<el-table-column label="创建时间" align="left" prop="createTime" show-overflow-tooltip width="180">
				<template #default="scope">
					{{ updateTimestamp(scope.row.createTime) }}
				</template>
			</el-table-column>
			<el-table-column label="更新人" align="left" prop="updater" show-overflow-tooltip width="120" />
			<el-table-column label="更新时间" align="left" prop="updateTime" show-overflow-tooltip width="180" >
		<template #default="scope">
		{{ updateTimestamp(scope.row.updateTime) }}
		</template>
	</el-table-column>
			<el-table-column label="操作" width="300" fixed="right">
				<template #default="scope">
					<el-button type="text" @click="editDevHandle(scope.row)"> 修改 </el-button>
					<el-button type="text" @click="addDevHandle(scope.row)"> 新增 </el-button>
					<el-button v-if="scope.row.type != 'model'" type="text" @click="addDegHandle(scope.row)"> 设计 </el-button>
					<el-button v-if="scope.row.type != 'model' && scope.row.type != 'btn'" type="text" @click="addReviewHandle(scope.row)">
						预览功能
					</el-button>
					<el-button v-if="!scope.row.children || scope.row.children.length == 0" type="text" @click="delDevHandle(scope.row)"> 删除 </el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			:current-page="state.page"
			:page-sizes="state.pageSizes"
			:page-size="state.limit"
			:total="state.total"
			layout="total, sizes, prev, pager, next, jumper"
			@size-change="sizeChangeHandle"
			@current-change="currentChangeHandle"
		>
		</el-pagination>
		<!-- <el-tree
			ref="tree"
			style="height: 33.8rem; overflow: auto"
			class="filter-tree"
			:data="dataForm.treeData"
			default-expand-all
			:expand-on-click-node="false"
			:props="{ children: 'children', label: 'name' }"
			@node-contextmenu="rightClick"
			@node-click="handleNodeClick"
		>
			<template #-> </template>
		</el-tree> -->
		<list-edit ref="listEditRef" @refresh-data-list="getDataList" />
		<btn-edit ref="btnEditRef" @refresh-data-list="getDataList" />
		<form-edit ref="formEditRef" @refresh-data-list="getDataList" />
		<edit ref="addOrUpdateRef" @refresh-data-list="getDataList" />
	</div>
</template>

<script setup lang="ts">
import { nextTick, reactive, ref, watchEffect } from 'vue'
import { deleteById, functionTreeList } from '@/views/ebo/fast/api/function'
import edit from './edit.vue'
import listEdit from '../report/add-or-update.vue'
import btnEdit from '../form/formBtnEdit.vue'
import formEdit from '../form/indexFormDrawer.vue'
import { ElMessage, ElMessageBox } from 'element-plus'

import { useRouter } from 'vue-router'
import { IHooksOptions } from '@/hooks/interface'
import { useCrud } from '@/hooks'

const router = useRouter()

const refreshTable = ref(true)

const state: IHooksOptions = reactive({
	dataListUrl: '/fast/function/treeList',
	queryMethod: 'post',
	deleteUrl: '',
	limit: 10000,
	queryForm: {
		name: '',
		showAll: false
	}
})
const dataForm = reactive({
	name: '',
	showEdit: false,
	editId: '',
	currentView: null,
	reportCode: '',
	formVisible: false,
	listVisible: false,
	listDataId: null,
	parentId: '',
	showFormCode: '',
	btnVisible: false,
	showBtnCode: '',
	menuVisible: false,
	treeData: [],
	tableData: [],
	rightClickData: { id: null, type: null, linkId: null, children: [] },
	loading: false
})

const getTreeList = () => {
	dataForm.loading = true
	functionTreeList()
		.then(reponse => {
			dataForm.treeData = reponse.data
		})
		.finally(() => {
			dataForm.loading = false
		})
}
const addOrUpdateRef = ref()
const listEditRef = ref()
const btnEditRef = ref()
const formEditRef = ref()
const handleEdit = (id: any, parentId: any) => {
	dataForm.showEdit = true
	dataForm.editId = id
	dataForm.parentId = parentId
	addOrUpdateRef.value.init(id, parentId)
}

const refreshTableFun = async () => {
	refreshTable.value = false
	await nextTick()
	refreshTable.value = true
}
const addDevHandle = row => {
	handleEdit(null, row.id)
}

//修改
const editDevHandle = row => {
	handleEdit(row.id, null)
}

const delDevHandle = row => {
	if (row.children && row.children.length > 0) {
		ElMessage.info({
			message: '存在子节点的不允许删除，需要先删除子节点',
			duration: 3000
		})
		return
	}
	handleDelete(row)
}

const handleDelete = (row: any) => {
	ElMessageBox.confirm('请确认是否删除此数据？', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning'
	}).then(() => {
		deleteById(row.id).then(response => {
			ElMessage.success({
				message: '删除成功',
				duration: 500
			})
			getTreeList()
		})
	})
}

//预览
const addReviewHandle = row => {
	if (row.type == 'list') {
		router.push({ path: '/ebo/fast/report/reportDevReview/' + row.linkId })
	} else if (row.type == 'form') {
		router.push({ path: '/ebo/fast/form/formDevReview/' + row.code + '/0' })
	} else {
		ElMessage.info({
			message: '不支持预览',
			duration: 3000
		})
	}
}
//设计
const addDegHandle = row => {
	handleDegClick(row)
}

const handleDegClick = (data: any) => {
	if (data.type == 'list') {
		listEditRef.value.init(data.linkId)
	} else if (data.type == 'form') {
		formEditRef.value.init(data.code)
	} else if (data.type == 'btn') {
		btnEditRef.value.init(data.code)
	}
}

const updateTimestamp = (timestamp: any) => {
  if (!timestamp) return '';
  var date = new Date(timestamp);
  return date.toLocaleString();
}

const handleNodeClick = (data: any) => {
	if (data.type == 'list') {
		router.push({ path: '/ebo/fast/report/reportDevReview/' + data.linkId })
	} else if (data.type == 'form') {
		router.push({ path: '/ebo/fast/form/formDevReview/' + data.code + '/0' })
	}
}

const { getDataList, selectionChangeHandle, sizeChangeHandle, currentChangeHandle, deleteBatchHandle } = useCrud(state)
</script>

<style scoped>
.dev-type-main-left {
	overflow: auto;
	padding: 10px;
}

.right-menu {
	z-index: 1;
	position: absolute;
	height: 160px;
	width: 100px;
	position: absolute;
	border-radius: 5px;
	border: 1px solid #ccc;
	background-color: white;
}

.menu-item {
	line-height: 20px;
	text-align: left;
	margin-top: 10px;
	font-size: 14px;
	color: #606266;
}

li:hover {
	background-color: #edf6ff;
	color: #606266;
}
</style>
