<template>
  <SubPanel title="状态" :tools="addTool" @tool-click="handleToolClick">
    <DataItem></DataItem>
    <ElEmpty :image-size="50"></ElEmpty>
    <Dialog v-model="dialogVisible" title="状态" width="600px" submit cancel>
      <ElForm size="small" label-position="top">
        <ElFormItem label="状态名称">
          <ElInput></ElInput>
        </ElFormItem>
        <ElFormItem label="状态值表达式"></ElFormItem>
      </ElForm>
      <CodeEditor
        border
        height="200px"
        modelValue="const a = 1;"
        :options="{ minimap: { enabled: false } }"></CodeEditor>
    </Dialog>
  </SubPanel>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { CodeEditor, SubPanel } from '@vtj/engine';
import Dialog from './Dialog.vue';
import { ElEmpty, ElForm, ElFormItem, ElInput } from 'element-plus';
import DataItem from './DataItem.vue';

const addTool = [
  {
    name: 'add',
    icon: 'vtj-icon-plus'
  }
];
const dialogVisible = ref(false);

const handleToolClick = (tool: any) => {
  console.log('add', tool);
  dialogVisible.value = true;
};

onMounted(() => {
  console.log('code mounted');
});
</script>
