<!-- 详情 -->
<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: '', // 流程描述
  selectDecision: '同意 驳回 拒绝', // 选择的决策
  rejectTo: '2', // 可驳回至
  changeData: '2', // 驳回修改数据
  isMessage: 'shi', // 审批结果通知发起人
})
// 可选决策项
const decision = [
  {
    id: 'reject-refuse',
    title: '同意 驳回 拒绝',
  },
  {
    id: 'reject',
    title: '同意 驳回',
  },
  {
    id: 'refuse',
    title: '同意 拒绝',
  },
]
// 可驳回至
const reject = [
  {
    id: 'change',
    title: '单据修改',
  },
]
// 驳回修改数据
const rejectChangeData = [
  {
    id: 'all',
    title: '重新按流程走',
  },
  {
    id: 'part',
    title: '送至驳回节点',
  },
]
// 审批结果通知发起人
const messageData = [
  {
    id: 'yes',
    title: '是',
  },
  {
    id: 'no',
    title: '否',
  },
]
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 />
              <!-- {{ form.number }} -->
            </el-form-item>
            <!-- <el-form-item label="可选决策项">
              <el-select v-model="form.selectDecision" disabled placeholder="请选择">
                <el-option
                  v-for="item in decision"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                />
              </el-select>
            </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 />

              <!-- {{ form.name }} -->
            </el-form-item>

            <!-- <el-form-item v-if="form.selectDecision !== 'refuse'" label="可驳回至">
              <el-select v-model="form.rejectTo" disabled placeholder="请选择">
                <el-option
                  v-for="item in reject"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                />
              </el-select>
            </el-form-item> -->
            <!-- <el-form-item label="审批结果通知发起人">
              <el-select v-model="form.isMessage" disabled placeholder="请选择">
                <el-option
                  v-for="item in messageData"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                />
              </el-select>
            </el-form-item> -->
          </el-col>
          <el-col :span="8">
            <el-form-item label="关联业务">
              <el-input v-model="form.business" disabled />

              <!-- {{ form.business }} -->
            </el-form-item>
            <!-- <el-form-item v-if="form.selectDecision !== 'refuse'" label="驳回修改数据">
              <el-select v-model="form.changeData" disabled placeholder="请选择">
                <el-option
                  v-for="item in rejectChangeData"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                />
              </el-select>
            </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>