<!-- 详情 -->
<script lang="ts" setup name="DetailProcess">
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import type { Ref } from 'vue'
import Setting from '../../setting.vue'
import type { Iform } from './process'
const emits = defineEmits(['close'])
// import WorkFlow from '@/components/workFlow/workFlow.vue'
const $route = useRoute()
const selectFormId = ref('')
const ruleFormRef = ref<FormInstance>()
const getRowData = ref({}) as any
const form: Ref<Iform> = ref({
  number: '', // 编号
  name: '', // 名称
  business: '', // 关联业务
  desc: '', // 流程描述
})
const $router = useRouter()
// 关闭
const close = () => {
  $router.push('/process/list')
}

onMounted(() => {
  const rowData: any = $route.query.rowData
  getRowData.value = JSON.parse(rowData)
  selectFormId.value = getRowData.value.formId
  form.value.number = getRowData.value.number
  form.value.name = getRowData.value.name
  form.value.business = getRowData.value.business
  form.value.desc = getRowData.value.describe
})
</script>

<template>
  <div class="edit-process">
    <detail-page title="流程管理-详情">
      <template #btns>
        <el-button type="info" @click="close">
          关闭
        </el-button>
      </template>
      <el-form ref="ruleFormRef" :model="form" label-width="150px">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="流程编号">
              <el-input v-model="form.number" disabled type="textarea" autosize />
            </el-form-item>
            <el-form-item label="流程描述">
              <el-input v-model="form.desc" disabled type="textarea" autosize />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="流程名称">
              <el-input v-model="form.name" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="关联业务">
              <el-input v-model="form.business" disabled />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </detail-page>
    <detail-block title="流程配置" />
    <setting :allow-edit-node="false" :select-form-id="selectFormId" />
  </div>
</template>

<style lang="scss" scoped>
  .edit-process {
    width: 100%;
    padding: 10px;

    .title {
      margin: 0 0 20px;
      font-weight: 600;
    }
  }
</style>