<template>
  <h3>vue-vuecmf-dialog demo</h3>
  <el-button 
      size="default" 
      type="primary" 
      @click=" showDlg = true " >打开对话框</el-button>
  
  <vuecmf-dialog 
      :model_value="showDlg" 
      title="标题"  
      @updateVisible="updateVisible"  
      @close="close" 
      @toggleScreen="toggleScreen">

    <template #content>
      <div> 这是一个可以最大化、最小化及还原的 对话框</div>
    </template>

    <template #footer>
      <el-button type="primary" @click=" showDlg = false ">关闭</el-button>
    </template>

  </vuecmf-dialog>
</template>

<script lang="ts">
import {defineComponent, ref} from 'vue';

export default defineComponent({
  name: 'App',
  setup(){
    const showDlg = ref()
    showDlg.value = false

    const updateVisible = (val:any) => {
      console.log('val=', val)
      showDlg.value = val
    }

    const close = ():void => {
       console.log('dialog closed!')
    }
    
    const toggleScreen = (is_max: boolean):void => {
       console.log('dialog is max:', is_max)
    }

    return {
     showDlg,
     updateVisible,
     close,
     toggleScreen
    }
  }
});
</script>

<template>
  <h3>vuecmf-editor demo</h3>

  <vuecmf-editor
      id="myeditor"
      :content="contentHtml"
      @on-change="getContent"
  ></vuecmf-editor>
  <button @click="save">保存</button>

</template>


<script lang="ts">
import {defineComponent, ref} from 'vue';

export default defineComponent({
  name: 'App',
  components: {
  },
  setup(){
    const contentHtml = ref('Hello world!')

    const getContent = (content:string, id: string) => {
      console.log('id=', id)
      contentHtml.value = content
    }

    const save = ():void => {
      alert(contentHtml.value)
    }

    return {
      getContent,
      contentHtml,
      save
    }

  }
});
</script>