<!-- 通用形配置 -->
<template>
  <div>
    <el-form-item>
      <template #label>
        <feature-tooltip
          @code="handleCodeClick"
          label="Vue3"
          :is-demo="true"
          buy-tooltip="点击购买插件以使用Vue3语法支持"
          buy-link="4"
        />
      </template>
      <avue-switch v-model="main.activeOption.vue3"></avue-switch>
    </el-form-item>
    <el-form-item label="远程组件">
      <avue-switch v-model="main.activeOption.remote"></avue-switch>
    </el-form-item>
    <template v-if="main.activeOption.remote">
      <el-form-item label="组件地址">
        <avue-input v-model="main.activeOption.src"></avue-input>
      </el-form-item>
      <el-form-item label="组件ID">
        <el-input v-model="main.activeOption.id"
                  placeholder="请选择组件">
          <template #append>
            <el-button type="primary"
                       @click="handleOpen(true)"
                       icon="el-icon-search"></el-button>
          </template>
        </el-input>
      </el-form-item>
    </template>
    <el-form-item v-else
                  label="配置">
      <el-button type="primary"
                 @click="openCode">编辑</el-button>
      <el-button type="primary"
                 @click="handleOpen()"
                 icon="el-icon-search"></el-button>
    </el-form-item>
    <el-form-item label-width="0"
                  v-if="!main.activeOption.remote">
      <avue-highlight :height="500"
                      v-model="main.activeOption.content"></avue-highlight>
    </el-form-item>
    <el-form-item label-width="0"
                  v-else>
      <avue-highlight :height="500"
                      v-model="main.activeComponent.remoteContent"></avue-highlight>
    </el-form-item>
    <codeedit @submit="codeClose"
              title="配置列表"
              :rules="false"
              codeType="vue"
              v-model="code.obj"
              v-if="code.box"
              :type="code.type"
              language="javascript"
              v-model:visible="code.box"></codeedit>

    <el-dialog title="组件库"
               v-model="api.box"
               class="avue-dialog"
               width="70%">
      <component-list v-if="api.box"
                      :activeName="0"
                      @change="handleApiChange"
                      :menu="false"></component-list>
    </el-dialog>
  </div>
</template>

<script>
import codeedit from '../../page/group/code.vue';
import componentList from '../../page/list/components.vue'
import { getObj } from '@/api/components'
import FeatureTooltip from '@/page/components/FeatureTooltip.vue'

export default {
  name: 'vue',
  inject: ["main"],
  components: {
    componentList,
    codeedit,
    FeatureTooltip,
  },
  data () {
    return {
      api: {
        isId: false,
        box: false,
        item: {}
      },
      code: {
        type: 'content',
        box: false,
        obj: {},
      }
    }
  },
  methods: {
    handleOpen (isId) {
      this.api.isId = isId
      this.api.box = true
    },
    handleApiChange (val) {
      this.api.item = val
      getObj(this.api.item.id).then(res => {
        const data = res.data.data;
        if (this.api.isId) {
          this.main.activeOption.id = data.id
        } else {
          this.main.activeOption[this.code.type] = data.content
        }
        this.api.box = false;
        this.api.item = {}
        this.$message.success('导入成功')
      })
    },
    codeClose (value) {
      this.main.activeOption[this.code.type] = value;
    },
    openCode () {
      this.code.obj = this.main.activeOption[this.code.type];
      this.code.box = true;
    }, 
    handleCodeClick () {
      this.main.activeOption.content = `<template>
  <div class="test">
    <h1 @click="handleClick">Vue3语法{{ dataChart }}</h1>
  </div>
</template>

<script setup>
  const handleClick = () => {
    emit('click',dataChart.value)
  };
  onMounted(() => {
    console.log(dataChart.value); // 在组件挂载时打印数据
  });
};
<\/script>

<style>
.test {
  text-align: center;
  color: red;
  font-size: 40px;
}
</style>`;
      this.$message.success('示例代码已插入');
    }
  }
}
</script>
