<template>
  <div>
    <el-drawer :wrapperClosable="false" v-model="showNodeAttribute" direction="rtl" size="550px" append-to-body :close-on-click-modal="false" @closed="closed">
      <template #header>
        <div class="unit">{{ nodeData.properties.name }}</div>
      </template>
      <div style="padding: 15px 20px">
        <startProperty v-if="nodeData.type === 'start'" :title="title" :nodeData="nodeData" :lf="lf" :flowDetail="flowDetail" @closed="closed" />

        <definevarProperty v-if="nodeData.type === 'definevar'" :title="title" :nodeData="nodeData" :lf="lf" :flowDetail="flowDetail" @closed="closed" />

        <sqlProperty v-if="nodeData.type === 'sql'" :title="title" :nodeData="nodeData" :lf="lf" :flowDetail="flowDetail" @closed="closed" />

      
        <waitProperty v-if="nodeData.type === 'wait'" :title="title" :nodeData="nodeData" :lf="lf" :flowDetail="flowDetail" @closed="closed" />
        <queueProperty v-if="nodeData.type === 'queue'" :title="title" :nodeData="nodeData" :lf="lf" :flowDetail="flowDetail" @closed="closed" />
        <branchProperty v-if="nodeData.type === 'branch'" :title="title" :nodeData="nodeData" :lf="lf" :flowDetail="flowDetail" @closed="closed" />
        <transferoutProperty v-if="nodeData.type === 'transferout'" :title="title" :nodeData="nodeData" :lf="lf" :flowDetail="flowDetail" @closed="closed" />

        <leavewordProperty v-if="nodeData.type === 'leaveword'" :title="title" :nodeData="nodeData" :lf="lf" :flowDetail="flowDetail" @closed="closed" />
        
        <hangupProperty v-if="nodeData.type === 'hangup'" :title="title" :nodeData="nodeData" :lf="lf" :flowDetail="flowDetail" @closed="closed" />
        <audiodtmfProperty v-if="nodeData.type === 'audiodtmf'" :title="title" :nodeData="nodeData" :lf="lf" :flowDetail="flowDetail" @closed="closed" />
        <audioProperty v-if="nodeData.type === 'audio'" :title="title" :nodeData="nodeData" :lf="lf" :flowDetail="flowDetail" @closed="closed" />
        

        <!-- 连线 -->
        <myBezier v-if="nodeData.type === 'myBezier'" :title="title" :nodeData="nodeData" :lf="lf" :flowDetail="flowDetail" @closed="closed"></myBezier>
      </div>
    </el-drawer>
  </div>
</template>
<script setup>
import { ref, onMounted, reactive } from 'vue';
import { getLabelByValue } from '@/utils/index';
import { pixelOption } from '@/utils/options';
import startProperty from '../registerNode/start/startProperty.vue';
import definevarProperty from '../registerNode/definevar/definevarProperty.vue';
import audioProperty from '../registerNode/audio/audioProperty.vue';
import audiodtmfProperty from '../registerNode/audiodtmf/audiodtmfProperty.vue';
import branchProperty from '../registerNode/branch/branchProperty.vue';
import queueProperty from '../registerNode/queue/queueProperty.vue';
import waitProperty from '../registerNode/wait/waitProperty.vue';
import transferoutProperty from '../registerNode/transferout/transferoutProperty.vue';
import leavewordProperty from '../registerNode/leaveword/leavewordProperty.vue';
import hangupProperty from '../registerNode/hangup/hangupProperty.vue';
import sqlProperty from '../registerNode/sql/sqlProperty.vue';
import myBezier from '../registerEdge/myBezier.vue';

const props = defineProps({
  //标题
  title: {
    type: String,
    default: '',
  },
  nodeData: Object,
  lf: Object,
  //详情
  flowDetail: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
const emit = defineEmits();

let showNodeAttribute = ref(true);

//弹窗关闭
const closed = () => {
  emit('closed', true);
};

onMounted(() => {});
</script>
<style></style>
