<!-- 详情 -->
<script lang="ts" setup name="DetailProcess">
import { reactive, ref } from 'vue'
import type { FormInstance } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import type { Ref } from 'vue'
import Setting from '../../setting.vue'
import type { Iform, dictType } from './process'
import { getDictByCode } from '@/api/system/dict'
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: '', // 关联业务
  formID: '', // formID
  desc: '', // 流程描述
  decisionItem: '', // 可选决策项 1同意驳回拒绝2同意驳回3同意拒绝
  noticeStarter: '', // 审批结果是否通知发起人
})
const decisionItemList = ref<dictType[]>([]) // 可选决策项
const noticeStarterList = ref<dictType[]>([]) // 可选决策项
const $router = useRouter()
// 关闭
const close = () => {
  $router.push('/process/list')
}
// 获取字典值
async function getDict() {
  // 可选决策项
  const response = await getDictByCode('decisionItem')
  decisionItemList.value = response.data

  // 审批结果是否通知发起人
  const res = await getDictByCode('noticeStarter')
  noticeStarterList.value = res.data
}
getDict()

const getNotice = () => {
  if (window.sessionStorage.getItem('decisionItem')) { // 可选决策项
    form.value.decisionItem = window.sessionStorage.getItem('decisionItem')!
  }
  if (window.sessionStorage.getItem('noticeStarter')) { // 是否通知发起人
    form.value.noticeStarter = window.sessionStorage.getItem('noticeStarter')!
  }
}

onMounted(() => {
  const rowData: any = $route.query.rowData
  getRowData.value = JSON.parse(rowData)
  selectFormId.value = getRowData.value.formId
  form.value.formID = 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="24">
          <el-col :span="8">
            <el-form-item label="流程编号:">
              <el-input v-model="form.number" disabled placeholder="系统自动生成" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="流程名称:">
              <el-input v-model="form.name" disabled placeholder="请输入流程名称" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="formID:">
              <el-input v-model="form.formID" disabled placeholder="请输入formID" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="关联业务:">
              <el-input v-model="form.business" disabled placeholder="请输入关联业务" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="可选决策项:">
              <el-select
                v-model="form.decisionItem"
                clearable
                placeholder="请选择可选决策项"
                size="default"
                style="width: 100%;"
                disabled
              >
                <el-option
                  v-for="item in decisionItemList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="审批结果是否通知发起人:">
              <el-select
                v-model="form.noticeStarter"
                clearable
                placeholder="请选择是否通知发起人"
                size="default"
                style="width: 100%;"
                disabled
              >
                <el-option
                  v-for="item in noticeStarterList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="流程描述">
              <el-input v-model="form.desc" disabled type="textarea" autosize placeholder="请输入流程描述" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </detail-page>
    <detail-block title="流程配置" />
    <setting :allow-edit-node="false" :select-form-id="selectFormId" @notice="getNotice" />
  </div>
</template>

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

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