<template>
  <div class="p-4">
    <div class="p-4 bg-white">
      <a-button-group class="j-table-operator">
        <a-button type="primary" @click="setDis(0)">启用</a-button>
        <a-button type="primary" @click="setDis(1)">禁用</a-button>
        <a-button type="primary" @click="getValues()">校验表单并获取值</a-button>
        <a-button type="primary" @click="setValues()">设置值</a-button>
      </a-button-group>

      <BasicForm @register="register" @submit="handleSubmit"/>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  title: '富文本 | Markdown',
  name: 'MarkdownDemo',
}
</script>

<script lang="ts" setup>
import { FormSchema, useForm, BasicForm } from '/@/components/Form'
import { useMessage } from '/@/hooks/web/useMessage'

const { createMessage, createSuccessModal } = useMessage()

const schemas: FormSchema[] = [
  {
    field: 'name',
    component: 'Input',
    label: '姓名',
    required: true,
    defaultValue: 'zhangsan',
  },
  {
    field: 'tinymce',
    component: 'JEditor',
    label: '富文本',
    defaultValue: 'defaultValue',
    required: true,
  },
  {
    field: 'markdown',
    component: 'JMarkdownEditor',
    label: 'Markdown',
    defaultValue: '# 张三',
    required: true,
    componentProps: {
      height: 300,
    },
  },
]

const [register, { setProps, validate, setFieldsValue }] = useForm({
  labelWidth: 120,
  schemas: schemas,
  actionColOptions: {
    span: 24,
  },
  compact: true,
  showResetButton:false,
  showSubmitButton:false,
  showAdvancedButton: false,
  disabled: false,
})

function handleSubmit(values) {
  console.log(values)
}

function setDis(flag) {
  setProps({ disabled: !!flag })
}

async function getValues() {
  try {
    const values = await validate()
    console.log(values)
    createSuccessModal({
      title: '校验通过',
      content: `${JSON.stringify(values)}`,
    })
  } catch (error) {
    createMessage.warning('检验不通过')
  }
}

function setValues() {
  setFieldsValue({
    name: 'LiSi',
    markdown: '# 李四',
    tinymce: '<p><strong><span style="font-size: 18pt;">张<span style="color: #e03e2d;">三</span>丰</span></strong></p>',
  })
}

</script>

<style scoped>

</style>
