<template>
	<!-- 流程表单详情抽屉 -->
	<div class="flow-flowForm-detail">
		<el-drawer v-model="isShowDialog" size="80%" direction="ltr">
			<template #header>
				<h4>{{ t('message.flowForm.detailTitleWithName', { name: state.formData.name || '' }) }}</h4>
			</template>
			<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" style="margin: 8px">
				<el-tab-pane :label="t('message.flowForm.tabFormDetail')" name="0">
					<div class="form-create-show">
						<FormCreate :option="detailData.option" :rule="detailData.rule" :disabled="true" v-model="formData" />
					</div>
				</el-tab-pane>
				<el-tab-pane :label="t('message.flowForm.tabApproveLog')" name="1">
					<FlowLog ref="flowLogRef" :form-id="formId" :form-table="formTable" :key="formId" />
				</el-tab-pane>
				<el-tab-pane :label="t('message.flowForm.tabFlowChart')" name="2">
					<ShowFlowDesign ref="showFlowCheckRef" />
				</el-tab-pane>
			</el-tabs>
		</el-drawer>
	</div>
</template>
<script lang="ts" setup>
// 引入 form-create
import formCreate from '@form-create/element-ui'
// 引入 form-create-edit
import FcEditor from '@form-create/component-wangeditor'
import { reactive, ref, getCurrentInstance, toRefs } from 'vue'
import { getFlowForm, getFlowFormData } from '/@/api/flow/flowForm'
import { FlowFormEditState, FlowFormTableColumns } from '/@/views/flow/flowForm/list/component/model'
import { setConfAndFields2 } from '/@/utils/formCreate'
import FlowLog from '/@/components/gFlow/flowLog.vue'
import ShowFlowDesign from '/@/components/gFlow/showDesign.vue'
import { TabsPaneContext } from 'element-plus'
import { getRunStep } from '/@/api/flow/flowModel'
import { useI18n } from 'vue-i18n'
formCreate.component(FcEditor)
//获取 formCreate 组件
const FormCreate = formCreate.$form()

const props = defineProps({
	statusOptions: {
		type: Array,
		default: () => [],
	},
})
const flowLogRef = ref()
const showFlowCheckRef = ref()
const formId = ref(0)
const formTable = ref('')
const activeName = ref('0')
const handleClick = (tab: TabsPaneContext) => {
	if (tab.index == '1') {
		flowLogRef.value.getLogList()
	} else if (tab.index == '2') {
		getRunStep({ formTable: formTable.value, formId: formId.value }).then((res: any) => {
			showFlowCheckRef.value.showDesign({ flowId: res.data?.runFlow || '0', processId: res.data?.runFlowNode || '' })
		})
	}
}
const { proxy } = <any>getCurrentInstance()
const { t } = useI18n()
const dataId = ref(0)
const formData = ref({})
const detailData = ref({
	rule: [],
	option: {} as any,
})
const state = reactive<FlowFormEditState>({
	loading: false,
	isShowDialog: false,
	formData: {
		id: undefined,
		name: undefined,
		status: false,
		remark: undefined,
		createdAt: undefined,
		updatedAt: undefined,
		deletedAt: undefined,
		createdBy: undefined,
		updatedBy: undefined,
		conf: undefined,
		fields: undefined,
	},
	// 表单校验
	rules: {
		name: [{ required: true, message: '表单名不能为空', trigger: 'blur' }],
		status: [{ required: true, message: '状态不能为空', trigger: 'blur' }],
	},
})
const { isShowDialog } = toRefs(state)
// 打开弹窗
const openDialog = async (row?: FlowFormTableColumns) => {
	resetForm()
	if (row) {
		formId.value = row.actionBtn.wfFid
		formTable.value = row.actionBtn.wfType
		await getFlowForm(row.id!).then((res: any) => {
			const data = res
			data.createdBy = data.createdUser?.userNickname
			data.updatedBy = data.updatedUser?.userNickname
			state.formData = data
			setConfAndFields2(detailData, data.conf, data.fields)
			detailData.value.option.submitBtn = false //隐藏提交按钮
			detailData.value.option.resetBtn = false //隐藏重置按钮
		})
		if (row.dataId && row.dataId != 0) {
			dataId.value = row.dataId
			//获取表单数据
			getFlowFormData({ formId: row.id, dataId: row.dataId }).then((res: any) => {
				formData.value = res.data
			})
		}
	}
	state.isShowDialog = true
}
// 关闭弹窗
const closeDialog = () => {
	state.isShowDialog = false
}
// 取消
const onCancel = () => {
	closeDialog()
}
const resetForm = () => {
	state.formData = {
		id: undefined,
		name: undefined,
		status: false,
		remark: undefined,
		createdAt: undefined,
		updatedAt: undefined,
		deletedAt: undefined,
		createdBy: undefined,
		updatedBy: undefined,
		conf: undefined,
		fields: undefined,
	}
	dataId.value = 0
	formData.value = {}
	activeName.value = '0'
}
defineExpose({ openDialog })
</script>
<style scoped>
/*.flow-flowForm-detail :deep(.el-form-item__content ._fc-submit-btn),
.flow-flowForm-detail :deep(.el-form-item__content ._fc-reset-btn){
  display: none;
}*/
.flow-flowForm-detail :deep(.el-form-item__label) {
	font-weight: bolder;
}
.pic-block {
	margin-right: 8px;
}
.file-block {
	width: 100%;
	border: 1px solid var(--el-border-color);
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: var(--el-transition-duration-fast);
	margin-bottom: 5px;
	padding: 3px 6px;
}
.ml-2 {
	margin-right: 5px;
}
.form-create-show {
	width: 100%;
	padding: 16px;
}
</style>
