<template>
  <h3 class="mainTitle">政务表单</h3>
  <div class="mainPadding">
    <h3>基本信息</h3>
    <el-form v-if="state.form" :model="state.form" ref="formRef" label-width="100px">
      <el-form-item label="标题">
        <el-input v-model="state.form.formTitle" :readonly="state.editable && state.mode !== 'create'"></el-input>
      </el-form-item>
      <el-form-item label="内容">
        <el-input v-model="state.form.formContent" :readonly="state.editable && state.mode === 'show'"></el-input>
      </el-form-item>
      <el-form-item label="拟稿人">
        <el-input v-model="state.form.issueUserName" readonly></el-input>
      </el-form-item>
      <el-form-item label="拟稿时间">
        <el-input v-model="state.form.createTime" readonly></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-input v-model="state.form.formStatus" readonly></el-input>
      </el-form-item>
    </el-form>
    <process-operation
      :context-path="contextPath"
      :mode="state.mode"
      :task-id="state.taskId"
      :form-id="state.formId"
      :url-format="urlFormat"
      :process-code="processCode"
      :range="range"
      :user="state.user"
      :form="state.form"
      :variables="state.variables"
      :next-branch-list="state.nextBranchList"
      :form-ref="formRef"
      @on-load="onLoad"
      @on-command="onCommand"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onBeforeMount } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import type { FormInstance } from 'element-plus'

import { type FrameUserInfo, type OperationType, type OperMode, type RuntimeOgu, getOperationType } from '@cacp/ui'

import { useCoreStore } from '@/stores/core'
import { type GovernmentInfo, contextPath, processCode, urlFormat, range } from '@/types/government'
import ProcessOperation from '@/components/workflow/ProcessOperation.vue'

const route = useRoute()
const router = useRouter()
const coreStore = useCoreStore()

const formRef = ref<FormInstance>()

const state = reactive<{
  mode: OperMode
  editable: boolean
  taskId?: string
  formId?: string
  form?: GovernmentInfo
  user: FrameUserInfo
  nextBranchList: Array<RuntimeOgu>
  variables?: Record<string, unknown>
}>({
  mode: 'show',
  editable: false,
  user: coreStore.currentUser!,
  nextBranchList: []
})

onBeforeMount(async () => {
  state.mode = (route.query.mode as OperMode) ?? 'show'

  if (state.mode !== 'create') {
    state.taskId = route.query.taskId as string
    state.formId = route.query.formId as string
  }
})

function onLoad(form: GovernmentInfo, processCode: string, activityCode: string, editable: boolean) {
  state.form = form
  state.editable = editable

  if (processCode === 'DemoParentProcess' && (activityCode === 'DISTRIBUTE' || activityCode === 'LINK')) {
    state.nextBranchList = [
      {
        oguId: '',
        oguName: '监管处',
        oguType: 'ORGANIZATION',
        parentId: '',
        fullPathName: '中国海关\\青岛海关\\监管处',
        copyFlag: false,
        deptType: 'HUIQIAN',
        delegateFlag: false
      },
      {
        oguId: '',
        oguName: '通关管理处',
        oguType: 'ORGANIZATION',
        parentId: '',
        fullPathName: '中国海关\\青岛海关\\通关管理处',
        copyFlag: false,
        deptType: 'HUIQIAN',
        delegateFlag: false
      }
    ]
  }
}

function onCommand(flag: OperationType) {
  router.push({
    path: '/user-task-list',
    query: {
      title: getOperationType(flag),
      content: '请回到待办事项页面'
    }
  })
}
</script>
