<template>
  <el-drawer
    v-model="drawerVisible"
    direction="rtl"
    resizable
    :modal="false"
    :modal-penetrable="true"
    :with-header="false"
    append-to="#flow-box"
    size="640"
  >
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="属性配置" name="attributeConfig">
        <AttributeConfig :graph="graph" :nodeAttribute="nodeAttribute"></AttributeConfig>
      </el-tab-pane>
      <el-tab-pane label="界面配置" name="pageConfig">
        <PageConfig :nodeAttribute="nodeAttribute" ref="pageConfigRef"></PageConfig>
      </el-tab-pane>
    </el-tabs>
    <template #footer>
      <el-button @click="closeFun">关闭</el-button>
      <el-button @click="reviewPageConfigFun">预览</el-button>
      <el-button v-if="activeName === 'pageConfig'" type="primary" @click="saveTemplateFun"
        >保存</el-button
      >
    </template>
  </el-drawer>
  <ReviewPageConfig
    v-model:showReviewDialog="showReviewDialog"
    :pageConfigList="nodeAttribute.pageConfigList"
  ></ReviewPageConfig>
</template>
<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue';
import AttributeConfig from './attributeConfig.vue';
import PageConfig from './pageConfig/index.vue';
import { updateNodeAttribute } from './nodeEvents';
import { FLOW_CREATE_ID } from './initGraph';
import ReviewPageConfig from './reviewPageConfig.vue';

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

const insertElement = ref();

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 = () => {};

const pageConfigRef = ref();

const saveTemplateFun = () => {
  updateNodeAttribute({ pageConfigList: pageConfigRef.value.drawingList });
};

const showReviewDialog = ref(false);
const reviewPageConfigFun = () => {
  showReviewDialog.value = true;
};

onMounted(() => {
  insertElement.value = document.getElementById(FLOW_CREATE_ID);
});
</script>
<style lang="scss">
#flow-box {
  position: relative;
  .el-modal-drawer.is-penetrable {
    position: absolute !important;
    z-index: 1 !important;
  }
}
#flow-box {
  .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>
