<template>
  <lt-a-form contendPadding="0px" style="border-width: 0px">
    <a-form ref="refkeyword" id="refkeyword" :inline="false" :model="form" :inline-message="true" :rules="rules"
      label-width="100px" style="width: 100%;" :labelCol="{
        span: 7
      }">
      <a-row>
        <a-col :span="24">
          <a-form-item label="原始关键字" name="oldKeyWord" class="keyWordRow">
            <a-input v-model:value="form.oldKeyWord" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-item label="目标关键字" name="newKeyWord" class="keyWordRow">
            <a-input v-model:value="form.newKeyWord" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-item label="最大关键字" name="localMaxKeyWord" class="keyWordRow">
            <a-input v-model:value="localMaxKeyWord" :readonly="true" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row style="text-align: center;padding: 5px;display: flex;border-left: 1px solid #d1dbe5;">
        <div style="margin: auto;">
          <a-button size="mini" v-on:click="handleConfirm" type="primary" :disabled="disableBtn">
            <template #icon>
              <check-outlined />
            </template> 确认</a-button>
          <a-button v-on:click="handleReset" style="margin-left: 10px;">
            <template #icon>
              <close-outlined />
            </template>
            取消</a-button>
        </div>
      </a-row>
    </a-form>
  </lt-a-form>
</template>

<script setup lang="ts">

import { Modal } from 'ant-design-vue';
import { reactive, ref, computed } from 'vue';

const emits = defineEmits(['onOK', "onCancel"])

const props = defineProps({
  mxgraph: {
    type: Object,
    default() {
      return {};
    },
  },
  MaxKeyWord: {
    type: [Number, String],
  },
})

const rules = {
  oldKeyWord: [
    {
      required: true,
      message: "不能为空"
    },
  ],
  newKeyWord: [
    {
      required: true,
      message: "不能为空"
    },
  ],
}

const form = reactive({
  oldKeyWord: "", //原始关键字
  newKeyWord: "", //新关键字
})

const refkeyword = ref(null)
const localMaxKeyWord = ref(props.MaxKeyWord)

const isOldKeyWordExist = computed(() => {
  return checkKeyWord(form.oldKeyWord)
})

const isNewKeyWordExist = computed(() => {
  return checkKeyWord(form.newKeyWord);
})

const disableBtn = computed(() => {
  return !isOldKeyWordExist.value || isNewKeyWordExist.value;
})

const checkKeyWord = function (keyWord: string) {
  if (!props.mxgraph) {
    return;
  }
  const cells = props.mxgraph.getModel().cells;
  let bRet = false;
  for (let i in cells) {
    if (cells[i].keyWord || cells[i].DetailOrderKey) {
      if (
        cells[i].keyWord == keyWord ||
        cells[i].DetailOrderKey == keyWord
      ) {
        bRet = true;
        break;
      } else {
        if (cells[i].cellType) {
          if (cells[i].cellType == "Table") {
            // debugger
            if (cells[i].EditCols) {
              for (let j = 0; j < cells[i].EditCols.length; j++) {
                if (
                  cells[i].EditCols[j].keyWord == keyWord ||
                  cells[i].EditCols[j].DetailOrderKey == keyWord
                ) {
                  bRet = true;
                  break;
                }
              }
            }
          }
        }
      }
    }
  }
  return bRet;
}
const handleConfirm = function () {
  //@ts-ignore
  refkeyword.value.validate().then(values => {
    if (!isOldKeyWordExist.value) {
      Modal.warning({
        title: "警告",
        content: "原始关键字不存在，请检查",
      })

      return;
    }
    if (isNewKeyWordExist.value) {
      Modal.warning({
        title: "警告",
        content: "目标关键字已存在，请修正",
      })
      return;
    }
    emits("onOK", form);
    form.oldKeyWord = "";
    form.newKeyWord = "";
  })
}
const handleReset = function () {
  form.oldKeyWord = "";
  form.newKeyWord = "";
  emits("onCancel", 1);
}

</script>

<style></style>