<template>
  <section class="view-component">
    <section class="meta-form">
      <s-code-editor v-model="textJSON" lang="json"></s-code-editor>
      <s-group-form
        ref="FormRef"
        v-model="model"
        :props="state.formProps"
        :fields="state.fields"
        :options="state.formOptions"
        @change="changeValue"
      >
      </s-group-form>
      <e-button @click="submit">提交</e-button>
    </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({
  center: ['1', '2'],
  group: [
    {},
  ],
})
const state = reactive<any>({
  fields: [
    {
      label: '数组模式',
      key: 'center',
      type: 'group',
      props: {
        mode: 'array',
        size: 'small',
        grid: {
          gap: 10,
        },
        gridItem: {
          span: 4,
        },
      },
      children: [
        {
          type: 'input',
          props: {
            size: 'small',
            placeholder: '经度',
            gridItem: { span: 2 },
            rules: [
              {
                required: true,
                message: '名称是必填的',
                trigger: 'change',
              },
            ],
          },
        },
        {
          type: 'input',
          props: {
            size: 'small',
            placeholder: '纬度',
            gridItem: { span: 2 },
            rules: [
              {
                required: true,
                message: '名称是必填的',
                trigger: 'change',
              },
            ],
          },
        },
      ],
    },
    {
      label: '可添加',
      type: 'group',
      key: 'group',
      props: {
        add: true,
        titlePosition: 'top',
        button: 'in-title',
        grid: {
          gap: 10,
        },
        gridItem: {
          span: 4,
        },
        title: (index: number) => {
          return `系列${ index }`
        },
        renderChildren: () => {
          return [
            {
              label: '大小',
              type: 'input',
              key: 'type',
              props: {
                size: 'small',
                placeholder: '类型',
                gridItem: { span: 2 },
                rules: [
                  {
                    required: true,
                    message: '名称是必填的',
                    trigger: 'change',
                  },
                ],
              },
              style: {
                size: 'small',
                marginRight: '10px',
              },
            },
            {
              label: '大小',
              prefix: 'diy',
              type: 'input',
              key: 'color',
              props: {
                rules: [
                  {
                    required: true,
                    message: '名称是必填的',
                    trigger: 'change',
                  },
                ],
              },
              gridItem: {
                span: 4,
              },
            },
          ]
        },
      },
      children: [],
    },
  ],
  formProps: {
    labelWidth: 80,
  },
  formOptions: {
    grid: {
      cols: 6,
    },
  },
})
const FormRef = ref()

function submit () {
  FormRef.value.validate().then(vali => {
    console.log(vali)
  }).catch(err => {
    console.log(err)
  })
}

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