<template>
  <div class="config-box">
    <div class="box-top">
      <NodeHead nodeName="编写区" />
      <a-button type="primary" @click="handlePreview">预览</a-button>
    </div>
    <div style="height: 800px">
      <CodeEditor
        v-if="show"
        v-model:value="definedScript"
        language="js"
        :readonly="disabled"
        @change="handleChange"
      />
    </div>
    <BasicModal title="组件预览" width="600px" :footer="null" @register="registerModal">
      <div class="p-4">
        <CustomComponent
          :type="compParams.zuJianLeiBie9003"
          :content="compParams.bianXieQu9373"
          :compUrl="compParams.zuJianDiZhi8745"
          allowClear
        />
      </div>
    </BasicModal>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted, inject } from 'vue';
  import { CodeEditor } from '/@/components/CodeEditor';
  import { NodeHead } from '/@/components/ModalPanel/index';
  import { BasicModal, useModal } from '/@/components/Modal';
  import CustomComponent from '/@/components/Form/src/components/CustomComponent.vue';

  const props = defineProps({
    value: String,
    disabled: { type: Boolean },
    showTitle: { type: Boolean },
  });
  const compParams = inject<any>('compParams', {});
  const emit = defineEmits(['update:value']);
  const definedScript = ref();
  const [registerModal, { openModal }] = useModal();
  const show = ref(false);
  onMounted(() => {
    setTimeout(() => {
      definedScript.value = props.value;
      show.value = true;
    }, 300);
  });
  function handleChange(v) {
    emit('update:value', v);
  }
  function handlePreview() {
    openModal();
  }
</script>

<style lang="less" scoped>
  .config-box {
    height: 100%;

    .box-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 30px;
      border-bottom: 1px solid #f0f0f0;
      padding: 25px 20px;
    }

    .script-name {
      cursor: pointer;
      padding: 10px 0 10px 15px;

      &:hover {
        background: #f7fbff;
      }
    }

    .active-name {
      background: #f7fbff;
      border-right: 4px solid #1c8dff;
    }
  }
</style>
