<template>
  <el-drawer
    v-model="drawerVisible"
    direction="rtl"
    :modal="true"
    :show-close="false"
    :close-on-click-modal="true"
    size="40%"
    :with-header="false"
    style="margin-left: 17%; width: 83%"
  >
    <el-container v-loading="loading">
      <el-header height="20px">
        <el-text>公式执行</el-text>
      </el-header>
      <el-divider></el-divider>
      <el-text>入参维护</el-text>
      <el-table :data="paramsList">
        <el-table-column label="变量解释" align="center" prop="fieldDescription" />
        <el-table-column label="变量" align="center" prop="fieldName" />
        <el-table-column label="入参值" align="center" prop="fieldNameValue" :show-overflow-tooltip="true">
          <template #default="scope">
            <el-input v-model="scope.row.fieldNameValue" placeholder="请输入参值" @blur="checkDataType(scope.row)" />
          </template>
        </el-table-column>
      </el-table>
    </el-container>
    <el-button icon="Check" type="primary" size="small" style="margin-left: 20px; margin-top: 10px" @click="ExecutionRule">执行</el-button>
    <el-card style="margin-top: 20px">
      <el-descriptions title="执行结果" size="small" :column="1" border>
        <el-descriptions-item label="执行结果">{{ resultData }}</el-descriptions-item>
        <el-descriptions-item label="执行事件">{{ resultTime }} 毫秒</el-descriptions-item>
      </el-descriptions>
      <el-table :data="exeList">
        <el-table-column label="节点" align="center" prop="hanldRuleShow"></el-table-column>
        <el-table-column label="开始时间" align="center" prop="hanldTime"></el-table-column>
        <el-table-column label="结束时间" align="center" prop="dealTime"></el-table-column>
      </el-table>
    </el-card>
  </el-drawer>
</template>

<script setup lang="ts">
import { Graph } from '@antv/x6';
import { executionRule, quryRulesParms } from '@/api/rule/definition';
import { result } from 'lodash-es';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const props = defineProps({
  visible: Boolean,
  graphData: Graph,
  rulesId: Object,
  showSave: Boolean
});
const drawerVisible = ref(props.visible);
const formRulesId = ref(null);
const nodeGraph = ref<Graph | undefined>(undefined);

const emit = defineEmits(['update:visible', 'update:dorwNodeEdges']);
const paramsList = ref([]);

const loading = ref(false);
const resultData = ref(null);
const resultTime = ref(null);
const exeList = ref([]);
const showSaveFlag = ref(true);

async function updateFromProps() {
  loading.value = true;
  const { graphData, rulesId, showSave } = props;
  nodeGraph.value = graphData;
  formRulesId.value = rulesId;
  showSaveFlag.value = showSave;
  const res = await quryRulesParms(rulesId);
  paramsList.value = res.data;
  loading.value = false;
}
//校验录入的数据类型是否匹配
function checkDataType(row) {
  if (row.fieldType === 'BigDecimal') {
    const numberRegex = /^-?\d+(\.\d+)?$/;
    if (!numberRegex.test(row.fieldNameValue)) {
      row.fieldNameValue = '';
      proxy?.$modal.msgError('变量类型是数值，请录入数字');
      return;
    }
  }
  if (row.fieldType === 'Date') {
    const dateRegex = /^\d{4}-\d{2}-\d{2}$/;
    if (!dateRegex.test(row.fieldNameValue)) {
      row.fieldNameValue = '';
      proxy?.$modal.msgError('变量类型是日期，请录入日期（格式：YYYY-MM-DD）');
      return;
    }
  }
}

async function ExecutionRule() {
  loading.value = true;
  try {
    const res = await executionRule(formRulesId.value, paramsList.value);
    resultData.value = res.data.result;
    resultTime.value = res.data.resultTime;
    exeList.value = res.data.logs;
    DorwNodeEdges(exeList.value);
    exeList.value.forEach((item) => {
      const node = nodeGraph.value.getCellById(item.hanldRule);
      item.hanldRuleShow = node.getAttrs().label.text;
    });
    loading.value = false;
  } catch (error) {
    loading.value = false;
  }
}

function DorwNodeEdges(exeList) {
  emit('update:dorwNodeEdges', { exeList });
}

// 确保 drawerVisible 和父组件的 visible 属性同步
watch(
  () => props.visible,
  (newVal) => {
    drawerVisible.value = newVal;
  }
);
watch(drawerVisible, (newVal) => {
  emit('update:visible', newVal);
});
// 监听 props 的变化以更新内部状态
watch(
  () => ({ graph: props.graphData, rulesId: props.rulesId, showSave: props.showSave }),
  ({ graph, rulesId, showSave }) => {
    updateFromProps();
  },
  { immediate: true, deep: true } // 使用 immediate 和 deep 来立即运行并深度监听
);
</script>

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