<script setup lang="ts">
import ProcessConfig from '@/components/ProcessConfig.vue';
import { ref } from 'vue';

const showModal = ref(false);

function handleSubmit(data: any) {
  showModal.value = false;
}

function handleCancel() {
  showModal.value = false;
}

function openModal() {
  showModal.value = true;
}
</script>

<template>
  <div class="demo-container">
    <div class="demo-header">
      <h1>流程配置演示</h1>
      <a-button type="primary" @click="openModal">打开配置界面</a-button>
    </div>

    <a-modal
      v-model:open="showModal"
      title="流程配置"
      width="800px"
      :footer="null"
      :destroyOnClose="true"
    >
      <ProcessConfig
        @submit="handleSubmit"
        @cancel="handleCancel"
      />
    </a-modal>
  </div>
</template>

<style scoped lang="scss">
.demo-container {
  padding: 20px;
  
  .demo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    h1 {
      margin: 0;
      color: #333;
    }
  }
}
</style> 