<template>
  <a-row style="width: 100%;padding: 5px;border-top: 1px solid #d1dbe5;">
    <a-col :span="4">
      变量：
    </a-col>
    <a-col :span="20">
      <a-select v-model:value="curVarient" size="small" style="min-width: 200px;width: 100%;"
        @select="handleCurVarSelect">
        <a-select-option v-for="(item, index) in curVarients" :key='index' :value="item.value"
          :label="item.label">{{ item.label }}
        </a-select-option>
      </a-select>
    </a-col>
  </a-row>
  <a-row style="width: 100%;padding: 5px;border-top: 1px solid #d1dbe5;border-bottom: 1px solid #d1dbe5;height: 35px;">
    <a-col :span="4">
      逻辑：
    </a-col>
    <a-col :span="20">
      <a-button title="小于" size="small" style="height: 24px; color: black;font-weight: bold;" @click="smallerThen">
        <template #icon>
          {{ `<` }} </template>
      </a-button>
      <a-button title="小于等于" size="small" style="height: 24px; color: black;font-weight: bold;margin-left: 2px;"
        @click="smallerAndEqualThen">
        <template #icon>
          {{ `<=` }} </template>
      </a-button>
      <a-button title="大于" size="small" style="height: 24px; color: black;font-weight: bold;margin-left: 2px;"
        @click="MoreThen">
        <template #icon>
          {{ `>` }} </template>
      </a-button>
      <a-button title="大于等于" size="small" style="height: 24px; color: black;font-weight: bold;margin-left: 2px;"
        @click="MoreAndEqualThen">
        <template #icon>
          {{ `>=` }} </template>
      </a-button>
      <a-button title="等于" size="small" style="height: 24px; color: black;font-weight: bold;margin-left: 2px;"
        @click="Equal">
        <template #icon>
          {{ `=` }} </template>
      </a-button>
      <a-button title="与" size="small" style="height: 24px; color: black;font-weight: bold;margin-left: 2px;"
        @click="handleAnd">
        <template #icon>
          {{ `&&` }} </template>
      </a-button>
      <a-button title="或" size="small" style="height: 24px; color: black;font-weight: bold;margin-left: 2px;"
        @click="handleOr">
        <template #icon>
          {{ `||` }} </template>
      </a-button>
      <a-button title="非" size="small" style="height: 24px; color: black;font-weight: bold;margin-left: 2px;"
        @click="handleNO">
        <template #icon>
          {{ `!` }} </template>
      </a-button>
      <a-button title="不等于" size="small" style="height: 24px; color: black;font-weight: bold;margin-left: 2px;"
        @click="handleNotEqual">
        <template #icon>
          {{ `!=` }} </template>
      </a-button>
    </a-col>
  </a-row>
  <div class="box">
    <codemirror class="code" v-model="state.formData.functionScript" :style="{ height: '100%' }"
      placeholder="Code gose here" :extensions="extensions" :autofocus="true" :styleActiveLine="true"
      :autoCloseBrackets="true" :foldGutter="true" :spellcheck="true" :lineWrapping="true" :disabled="false"
      @change="handleClick('change', $event)" @blur="handleClick('blur', $event)" @focus="onCmFocus"
      @input="onCmCodeChange" />
  </div>
</template>
<script setup>
import { ref, reactive, onBeforeMount, computed, watch } from "vue";
import { Codemirror } from "vue-codemirror";
import { cpp } from "@codemirror/lang-cpp"
import { cloneDeep } from "lodash-es";
const extensions = [cpp()];
const emits = defineEmits(['codeChange', 'update:scriptData'])

const props = defineProps({
  hintWords: {
    type: Array,
    default() {
      return {
        model: ["a", "b", "c"],
        model2: ["x", "y", "z"],
        测试1: [],
        test1: [],
      };
    },
  },
  scriptData: {
    type: String,
    default: "",
  },
})

const curVarient = ref("")
const state = reactive({
  formData: {
    functionScript: "",
  }
})

watch(() => state.formData.functionScript, () => {
  emits("codeChange", state.formData.functionScript);
  emits("update:scriptData", state.formData.functionScript);
})
const handleCurVarSelect = function (value) {
  state.formData.functionScript = state.formData.functionScript + " " + value + " "
}
const smallerThen = function () {
  //生成<符号
  state.formData.functionScript = state.formData.functionScript + " < "
}

const smallerAndEqualThen = function () {
  state.formData.functionScript = state.formData.functionScript + " <= "
}

const MoreThen = function () {
  state.formData.functionScript = state.formData.functionScript + " > "
}

const MoreAndEqualThen = function () {
  state.formData.functionScript = state.formData.functionScript + " >= "
}

const Equal = function () {
  state.formData.functionScript = state.formData.functionScript + " == "
}

const handleAnd = function () {
  state.formData.functionScript = state.formData.functionScript + " && "
}

const handleOr = function () {
  state.formData.functionScript = state.formData.functionScript + " || "
}

const handleNO = function () {
  state.formData.functionScript = state.formData.functionScript + "!"
}

const handleNotEqual = function () {
  state.formData.functionScript = state.formData.functionScript + " != "
}

const curVarients = computed(() => {
  let tempItem = []

  for (let i = 0; i < props.hintWords.length; i++) {
    const temp = {
      label: typeof props.hintWords[i] == "string" ? props.hintWords[i] : props.hintWords[i].VariantName,
      value: typeof props.hintWords[i] == "string" ? props.hintWords[i] : props.hintWords[i].VariantName
    }
    const copy = cloneDeep(temp)
    tempItem.push(copy)
  }

  return tempItem
})

const handleClick = (type, val) => {
  console.log(type, val);
};


const onCmFocus = function (cm) {
  console.log('the editor is focus!', cm)
}
const onCmCodeChange = function (newCode) {
  state.formData.functionScript = state.formData.functionScript + newCode.data;
  // emits("codeChange", state.formData.functionScript);
  // emits("update:scriptData", state.formData.functionScript);
}

const initForVal = function () {
  const _val = props.scriptData
  state.formData.functionScript = _val;
}

onBeforeMount(() => {
  initForVal()
})


</script>
<style>
.box {
  width: 100%;
  height: 300px;
  border: 1px solid #f00;
}

.code {
  width: 300px;
  height: 300px;
}
</style>