<template>
  <div @click.stop="open">
    <InputModel
      :value="props.formulaContent"
      :placeholder="t('点击配置条件公式')"
      style="width: 100%; min-width: 100px"
    />
    <ModalPanel
      :visible="visible"
      :width="800"
      :title="t('条件配置')"
      @submit="submit"
      @close="close"
    >
      <a-form style="padding: 20px">
        <a-form-item
          label="变量与值"
          name="variableAssignmentConfigs"
          :label-col="{ span: 4 }"
          :wrapper-col="{ span: 20 }"
        >
          <a-input
            v-model:value="data.variableAssignmentConfigs"
            :placeholder="t('请填写变量与值')"
          />
        </a-form-item>
        <a-form-item
          label="公式内容"
          name="formulaContent"
          :label-col="{ span: 4 }"
          :wrapper-col="{ span: 20 }"
        >
          <a-textarea
            v-model:value="data.formulaContent"
            :placeholder="t('请输入公式内容')"
            :rows="10"
            :maxlength="100"
          />
        </a-form-item>
      </a-form>
    </ModalPanel>
  </div>
</template>

<script setup lang="ts">
  import { reactive, ref } from 'vue';
  import { ModalPanel } from '/@/components/ModalPanel/index';
  import { InputModel } from '/@/components/ApiConfig';
  import { useI18n } from '/@/hooks/web/useI18n';
  const { t } = useI18n();
  const emit = defineEmits(['update:formulaContent', 'update:variableAssignmentConfigs']);

  const props = withDefaults(
    defineProps<{ formulaContent: string; variableAssignmentConfigs: string }>(),
    {
      formulaContent: '',
      variableAssignmentConfigs: '',
    },
  );
  const visible = ref<boolean>(false);
  let data = reactive({
    formulaContent: '',
    variableAssignmentConfigs: '',
  });

  function open() {
    data.variableAssignmentConfigs = props.variableAssignmentConfigs;
    data.formulaContent = props.formulaContent;
    visible.value = true;
  }
  function close() {
    visible.value = false;
  }

  function submit() {
    emit('update:formulaContent', data.formulaContent);
    emit('update:variableAssignmentConfigs', data.variableAssignmentConfigs);
    close();
  }
</script>

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