<template>
  <el-drawer
    v-model="drawerVisible"
    direction="rtl"
    :modal="true"
    :show-close="false"
    :close-on-click-modal="true"
    size="60%"
    :with-header="false"
    style="margin-left: 17%; width: 83%"
  >
    <el-container>
      <el-header height="20px">
        <el-form :model="formData" :inline="true">
          <el-button size="small" circle type="primary" :icon="icons.Icon" />
          <el-text size="small">{{ icons.Name }}</el-text>
          <el-form-item label="节点名称" label-width="80px" style="margin-right: 2px; float: right">
            <el-input v-model="formData.label" size="small" @change="updateNodeLabel"></el-input>
          </el-form-item>
        </el-form>
      </el-header>
      <el-divider></el-divider>
      <el-container>
        <el-main>
          <rank-node-form v-if="rankvisible" :node-data="formData" :graph-data="nodeGraph" :rules-id="formRulesId" :show-save="showSaveFlag">
          </rank-node-form>
          <filters-node-form v-if="filtersvisible" :node-data="formData" :graph-data="nodeGraph" :rules-id="formRulesId" :show-save="showSaveFlag">
          </filters-node-form>
          <edits-node-form v-if="editsvisible" :node-data="formData" :graph-data="nodeGraph" :rules-id="formRulesId" :show-save="showSaveFlag">
          </edits-node-form>
          <calendar-node-form v-if="calendarvisible" :node-data="formData" :graph-data="nodeGraph" :rules-id="formRulesId" :show-save="showSaveFlag">
          </calendar-node-form>
        </el-main>
      </el-container>
    </el-container>
  </el-drawer>
</template>

<script setup lang="ts">
import RankNodeForm from '@/components/RuleE/RankNodeForm.vue';
import FiltersNodeForm from '@/components/RuleE/FiltersNodeForm.vue';
import EditsNodeForm from '@/components/RuleE/EditsNodeForm.vue';
import CalendarNodeForm from '@/components/RuleE/CalendarNodeForm.vue';
import { Graph } from '@antv/x6';

const rankvisible = ref(false);
const filtersvisible = ref(false);
const editsvisible = ref(false);
const calendarvisible = ref(false);
const props = defineProps({
  visible: Boolean,
  nodeData: Object,
  graphData: Graph,
  rulesId: Object,
  showSave: Boolean
});

const icons = ref({
  Icon: null,
  Name: null
});

const emit = defineEmits(['update:visible', 'update:nodeLabel']);

const drawerVisible = ref(props.visible);
const formData = ref({});
const formRulesId = ref(null);
const nodeGraph = ref<Graph | undefined>(undefined);
const showSaveFlag = ref(true);
// 初始化逻辑
onMounted(() => {
  updateFromProps();
});

function updateFromProps() {
  const { nodeData, graphData, rulesId, showSave } = props;
  formData.value = nodeData || {};
  nodeGraph.value = graphData;
  formRulesId.value = rulesId;
  showSaveFlag.value = showSave;
  // 更新图标信息
  const iconConfig = {
    end: { Icon: 'CircleClose', Name: '结束节点' },
    rank: { Icon: 'Rank', Name: '条件节点' },
    filters: { Icon: 'Filter', Name: '规则节点' },
    edits: { Icon: 'Edit', Name: '赋值节点' },
    calendar: { Icon: 'Calendar', Name: '计算节点' }
  };

  if (iconConfig[nodeData?.type]) {
    const { Icon, Name } = iconConfig[nodeData?.type];
    icons.value.Icon = Icon;
    icons.value.Name = Name;
  }

  visibleAllFalse();
  if (nodeData?.type === 'rank') {
    rankvisible.value = true;
  } else if (nodeData?.type === 'filters') {
    filtersvisible.value = true;
  } else if (nodeData?.type === 'edits') {
    editsvisible.value = true;
  } else if (nodeData?.type === 'calendar') {
    calendarvisible.value = true;
  }
}
function visibleAllFalse() {
  rankvisible.value = false;
  filtersvisible.value = false;
  editsvisible.value = false;
  calendarvisible.value = false;
}

// 确保 drawerVisible 和父组件的 visible 属性同步
watch(
  () => props.visible,
  (newVal) => {
    drawerVisible.value = newVal;
  }
);

watch(drawerVisible, (newVal) => {
  emit('update:visible', newVal);
});

// 监听 props 的变化以更新内部状态
watch(
  () => ({ nodeData: props.nodeData, graph: props.graphData, rulesId: props.rulesId, showSave: props.showSave }),
  ({ nodeData, graph, rulesId, showSave }) => {
    updateFromProps();
  },
  { immediate: true, deep: true } // 使用 immediate 和 deep 来立即运行并深度监听
);

const updateNodeLabel = (newLabel: string) => {
  emit('update:nodeLabel', { id: formData.value.id, label: newLabel });
};
</script>

<style lang="scss" scoped></style>
