<template>
  <section class="view-component">
    <section class="meta-form">
      <s-code-editor v-model="textJSON" lang="json"></s-code-editor>
      <s-form
          v-model="model"
          :props="state.formProps"
          :fields="state.labels"
          :options="state.formOptions"
          @change="changeValue"
      >
        <template #name>123</template>
        <template #aaa>456</template>
      </s-form>
    </section>
  </section>
</template>
<script lang="ts" setup>
import { reactive, ref, computed } from 'vue'
import DiyInput from '../../GroupForm/demo/diy-input.vue'

const textJSON = computed({
  get () {
    return JSON.stringify(model.value, null, '\t')
  },
  set (value) {
    model.value = JSON.parse(value)
  },
})

const model = ref({
  name: '张三',
})
const state = reactive<any>({
  polygons: [],
  labels: [
    {
      label: '名称',
      key: 'name',
      type: 'slot',
      props: {
        placeholder: '请输入名称/sid查询',
        gridItem: {
          span: 7,
        },
      },
    },
    {
      label: '类型',
      key: 'level',
      type: 'checkbox-group',
      props: {
        gridItem: {
          span: 7,
        },
      },
      options: [
        {
          label: '目录',
          value: 1,
        },
        {
          label: '菜单',
          value: 2,
        },
        {
          label: '模块',
          value: 3,
        },
        {
          label: '按钮',
          value: 4,
        },
        {
          label: '字段',
          value: 5,
        },
      ],
    },
    {
      label: '显示层级',
      key: 'deep',
      type: 'slider',
      props: {
        step: 1,
        max: 6,
        gridItem: {
          span: 5,
        },
      },
    },
    {
      label: '',
      key: 'aaa',
      component: DiyInput,
      props: {
        gridItem: {
          span: 5,
        },
      },
    },
  ],
  formProps: {
    labelWidth: 80,
  },
  formOptions: {
    grid: {
      cols: 6,
    },
  },
})

function changeValue (key: string, value: any) {
  console.log(key, value)
}
</script>
<style lang="scss" scoped>
.sel-code-editor {
  margin-bottom: 20px;
}
</style>
