<template>
  <div v-if="processData.processDefinitionKey">
    <p style="margin-top: 10px">
      流程名称 : {{ processData.deploymentName }}
    </p>
  </div>
  <div v-if="!processData.processDefinitionKey">
    <el-select v-model="processData.processKey" @change="processKeyChange" placeholder="请选择流程环节" clearable filterable>
      <el-option v-for="item in optionList" :label="item.label" :value="item.value"/>
    </el-select>
  </div>

</template>

<script setup>
import {useProcessStore} from '@/stores/processStore.js'
import {computed, defineExpose} from "vue";
import { ElNotification} from "element-plus";
import {getTypeOption, getFromPerm} from "@/api/workflow/process-definition";

const router = useRouter()
const path = reactive(router.currentRoute.value.path)
const processStore = useProcessStore()

const optionList = ref([])

const processData = computed(() => {
  return processStore.getDesign()
})

const validate = () => {
  return []
}
onActivated(()=>{
  init()
})
const init = () => {
  getTypeOption().then(res => {
    optionList.value = res.data
  })
}

const processKeyChange = () => {
  getFromPerm(processData.value.processKey).then(res => {
    if (res.code === 1000) {
      processData.value.processFromPerms = res.data
    } else {
      ElNotification({
        title: '提示',
        message: res.msg,
        type: 'error'
      })
    }
  })

}


defineExpose({
  validate
})
init()

</script>

<style scoped>

</style>
