<script setup lang="ts" name="ExpressionEditor">
import { ref, onMounted, toRefs, watch, reactive } from "vue";
import ModalPop from "./ModalPop.vue";
import { queryFunctionList, test } from "@/api/ruleConfig/algorithm";

const props = defineProps<{
  modelValue: boolean;
  editor?: Object;
}>();

const emit = defineEmits(["update:modelValue", "confirm", "cancel"]);

const editorName = ref("");
const editorValue = ref("");
const infoText = ref("");
const listData = ref([]);
const testVisible = ref(false);
const testResult = ref(""); // 执行结果
const testData = reactive({
  expression: "",
  param: "",
});

// 确认
const confirm = () => {
  emit("confirm", editorValue.value);
};

const cancel = () => {
  editorName.value = JSON.parse(JSON.stringify(props.editor.rulename));
  editorValue.value = JSON.parse(JSON.stringify(props.editor.expression));
  emit("cancel");
};

// 划过事件
const hoverFunc = (item) => {
  infoText.value = item.remark;
};

// 获取函数列表
const getQueryFuncList = () => {
  queryFunctionList({}).then((res) => {
    const { data } = res;
    listData.value = data;
  });
};

// 执行测试
const executeTest = () => {
  testData.expression = editorValue.value;
  test(testData).then((res) => {
    const { flag, data } = res;
    if (flag) {
      testResult.value = data;
    }
  });
};
// 测试关闭
const testCancel = () => { 
  testVisible.value = false;
  testData.param = ''
  testResult.value = "";
}

watch(
  () => props.modelValue,
  (newVal) => {
    if (props.modelValue) {
      getQueryFuncList();
    }
  },
  { deep: true, immediate: true }
);

watch(
  () => props.editor,
  (newVal) => {
    editorName.value = JSON.parse(JSON.stringify(props.editor.rulename));
    editorValue.value = JSON.parse(JSON.stringify(props.editor.expression));
  },
  { deep: true, immediate: true }
);
</script>

<template>
  <div>
    <ModalPop v-model="props.modelValue" title="编辑器" @cancel="cancel">
      <template #content>
        <div class="title">算法名称 : {{ editorName }}</div>
        <div class="content">
          <div class="content_left">
            <div class="content_left_tap">函数</div>
            <div class="content_left_list">
              <el-scrollbar height="362px">
                <div class="function__item" @mouseover="hoverFunc(item)" v-for="(item,index) in listData" :key="index">
                  {{ item.name }}</div>
              </el-scrollbar>
            </div>
          </div>
          <div class="content_right">
            <div class="content_right_info">
              <div class="content_right_info_title">说明</div>
              <div class="content_right_info_content">定义：{{ infoText }}</div>
            </div>
            <div class="content_right_editor">
              <el-input type="textarea" placeholder="请输入内容" v-model="editorValue" />
            </div>
          </div>
        </div>
        <div style="display: flex; justify-content: center; padding-top: 20px;">
          <el-button type="primary" style="width: 150px;" @click="testVisible = true">测试</el-button>
          <el-button type="info" style="width: 150px;" @click="cancel">取消</el-button>
          <el-button type="primary" style="width: 150px;" @click="confirm">确认</el-button>
        </div>
      </template>
    </ModalPop>

    <!-- 测试 -->
    <ModalPop v-model="testVisible" width="800px" title="测试" @cancel="testCancel">
      <template #content>
        <el-form-item label="输入参数$value的值:" label-width="180px" prop="expression">
          <div style="width: 100%;display: flex; justify-content: center;">
            <el-input placeholder="输入参数$value的值" v-model="testData.param" />
            <el-button type="primary" style="margin-left: 10px;" @click="executeTest">执行</el-button>
          </div>
        </el-form-item>
        <el-form-item label="执行结果:" label-width="180px">
          <div>{{ testResult }}</div>
        </el-form-item>
        <div style="display: flex; justify-content: center; padding-top: 20px;">
          <el-button type="primary" style="width: 150px;" @click="testCancel">关闭</el-button>
        </div>
      </template>
    </ModalPop>
  </div>
</template>

<style lang="scss" scoped>
.title {
  height: 32px;
  line-height: 32px;
}
.content {
  display: flex;
  height: 400px;
  width: 100%;
  &_left {
    height: 100%;
    width: 322px;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(220, 229, 235);
    border-image: initial;
    &_tap {
      height: 36px;
      line-height: 36px;
      font-size: 14px;
      font-weight: 700;
      border-bottom: 1px solid rgb(220, 229, 235);
      padding-left: 20px;
      color: rgb(44, 158, 247);
    }
    &_list {
      height: 100%;
      .function__item {
        padding-left: 20px;
        cursor: pointer;
        color: #7a8596;
      }
      .function__item:hover {
        background: rgb(243, 245, 250);
      }
    }
  }
  &_right {
    margin-left: 10px;
    height: 100%;
    flex: 1;
    &_info {
      height: 146px;
      border-style: solid;
      border-color: rgb(220, 229, 235);
      border-image: initial;
      border-width: 1px 1px 0px;
      padding: 0px 20px;
      &_title {
        height: 42px;
        line-height: 42px;
        color: rgb(122, 132, 149);
        font-size: 14px;
        font-weight: 700;
      }
      &_content {
        margin-top: -4px;
        color: rgb(122, 132, 149);
        font-size: 12px;
        word-break: break-all;
      }
    }
    &_editor {
      width: 100%;
      :deep(.el-textarea__inner) {
        box-sizing: border-box !important;
        height: 254px !important;
        min-height: 254px !important;
        max-height: 254px !important;
        border-radius: 0px !important;
        padding: 12px 20px !important;
        background: rgb(243, 245, 250) !important;
      }
    }
  }
}
</style>