<template>
  <el-drawer
    v-model="drawerVisible"
    direction="rtl"
    resizable
    :modal="true"
    :modal-penetrable="true"
    :with-header="false"
    size="640"
  >
    <el-tabs v-model="activeName" class="flow-view-tabs" @tab-click="handleClick">
      <el-tab-pane label="属性配置" name="attributeConfig">
        <AttributeConfig :graph="graph" readonly :nodeAttribute="nodeAttribute"></AttributeConfig>
      </el-tab-pane>
      <el-tab-pane label="界面配置" name="pageConfig">
        <!-- <PageConfig :nodeAttribute="nodeAttribute" ref="pageConfigRef"></PageConfig> -->
        <FlowNodeParamTable
          hideButtons
          :nodeParams="nodeAttribute.pageConfigList"
        ></FlowNodeParamTable>
      </el-tab-pane>
    </el-tabs>
    <template #footer>
      <el-button @click="closeFun">关闭</el-button>
    </template>
  </el-drawer>
</template>
<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue';
import AttributeConfig from '@/views/simulation/creation/components/attributeConfig.vue';
import FlowNodeParamTable from '@/components/flow/flowNodeParamTable.vue';

const props = defineProps({
  drawerVisible: {
    type: Boolean,
    default: false,
  },
  nodeAttribute: {
    type: Object,
    default: () => {
      return {};
    },
  },
  graph: {
    type: Object,
    default: () => {
      return {};
    },
  },
});

const emits = defineEmits(['update:drawerVisible', 'update:nodeAttribute']);

const drawerVisible = computed({
  get() {
    return props.drawerVisible;
  },
  set(value) {
    emits('update:drawerVisible', value);
  },
});

const closeFun = () => {
  emits('update:drawerVisible', false);
};

const activeName = ref('attributeConfig');

const handleClick = () => {};

onMounted(() => {});
</script>
<style lang="scss">
.flow-view-tabs {
  .el-drawer {
    box-shadow: none;
  }
  .el-drawer__body {
    padding: 0 0;
  }
  .el-tabs__header {
    margin-bottom: 0;
  }

  .el-tabs__nav-scroll {
    display: flex;
    justify-content: center;
  }
  .el-tabs__item {
    // width: 200px;
    padding: 0 60px;
    font-weight: 600;
  }
}
</style>
<style lang="scss" scoped></style>
