<template>
  <Dialog
    class="vtj-binder vtj-variable-binder"
    :body-padding="false"
    title="变量绑定"
    :subtitle="subtitle"
    top="50%s"
    width="70%"
    height="80%">
    <div class="vtj-binder__body">
      <ElTabs v-model="currentTab" type="border-card" tab-position="left">
        <ElTabPane name="context" label="上下文变量"> </ElTabPane>
        <ElTabPane name="state" label="状态数据"></ElTabPane>
        <ElTabPane name="computed" label="计算属性"></ElTabPane>
        <ElTabPane name="methods" label="自定义方法"></ElTabPane>
        <ElTabPane name="dataSources" label="数据源"></ElTabPane>
        <ElTabPane name="utils" label="全局变量"></ElTabPane>
      </ElTabs>
      <div class="vtj-binder__panel">
        <Panel class="vtj-binder__list" title="可选项">
          <DataItem
            v-for="n in list"
            clickable
            :title="n.title"
            @click="onPicker(n.title)">
            <template #action>
              <i
                class="vtj-icon-copy"
                title="复制"
                @click.stop="copy(n.title)"></i>
            </template>
          </DataItem>
          <ElEmpty v-if="list.length === 0" :image-size="50"></ElEmpty>
        </Panel>
        <Panel class="vtj-binder__binding" title="绑定内容">
          <CodeEditor
            ref="codeEditor"
            height="100%"
            :model-value="contentValue.value"
            @change="onEditorChange"></CodeEditor>
          <template #footer>
            <div class="vtj-binder__footer">
              <ElButton
                size="default"
                type="warning"
                :disabled="!hasContent"
                @click="onRemoveBinding"
                >移除绑定</ElButton
              >
              <span>
                <ElButton size="default" @click="onCancel">取消</ElButton>
                <ElButton size="default" type="primary" @click="onBinding">
                  确定
                </ElButton>
              </span>
            </div>
          </template>
        </Panel>
      </div>
    </div>
  </Dialog>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import {
  Dialog,
  Panel,
  DataItem,
  INode,
  JSExpression,
  JSFunction,
  CodeEditor
} from '@vtj/engine';
import { ElTabs, ElTabPane, ElButton, ElMessage, ElEmpty } from 'element-plus';

import { useVariables } from '../hooks/useVariables';

export interface Props {
  node: INode;
  value: JSExpression | JSFunction;
}

const props = withDefaults(defineProps<Props>(), {});
const emit = defineEmits(['submit', 'cancel', 'remove']);

const subtitle = ref(props.node.id);
const codeEditor = ref();
const contentValue = ref(props.value);
const hasContent = ref(!!props.value?.value);
const currentTab = ref('context');

const { list, copy } = useVariables(props.node, currentTab);

const onBinding = () => {
  const editor = codeEditor.value?.getEditor();
  if (editor) {
    const content = editor.getValue();
    if (!content) {
      ElMessage.warning({
        message: '请输入变量内容'
      });
      return;
    }
    emit('submit', {
      type: contentValue.value.type,
      value: content
    });
  }
};

const onCancel = () => {
  emit('cancel');
};

const onRemoveBinding = () => {
  emit('remove');
};

const onEditorChange = (e: any) => {
  hasContent.value = !!e?.value;
};

const onPicker = (text: string) => {
  const editor = codeEditor.value?.getEditor();
  if (editor) {
    const content = editor.getValue();
    contentValue.value.value = content ? content + ';' + text : text;
  }
};
</script>
