<template>
  <section class="view-component">
    <section class="meta-form">
      <s-code-editor v-model="textJSON" lang="json"></s-code-editor>
      <s-group-form
        ref="form"
        v-model="model"
        :props="state.formProps"
        :fields="state.labels"
        :options="state.formOptions"
        @change="changeValue"
      >
        <template #name="{data,slotItem,validator}">
          <input
            type="text"
            v-model="data[slotItem.code]"
            placeholder="自定义的输入框"
            @change="e=>validator(e,'change')"
          >
        </template>
      </s-group-form>
    </section>
  </section>
</template>
<script lang="ts" setup>
import { reactive, ref, computed, onMounted } from 'vue'
import DiyInput from './diy-input.vue'

const textJSON = computed({
  get () {
    return JSON.stringify(model.value, null, '\t')
  },
  set (value) {
    model.value = JSON.parse(value)
  },
})
const form = ref()
const slots = computed(() => form.value?.allSlots)
const model = ref({
  name: '张三',
  center: [],
  group: [
    {},
  ],
})
setTimeout(() => {
  model.value.group.push({})
  console.log('赋值')
}, 3000)
const state = reactive<any>({
  polygons: [],
  labels: [
    {
      label: '名称',
      key: 'name',
      type: 'slot',
      props: {
        rules: [
          {
            required: true,
            message: '名称是必填的',
            trigger: 'change',
          },
        ],
      },
    },
    {
      label: '数组模式',
      key: 'center',
      type: 'group',
      props: {
        mode: 'array',
        size: 'small',
        grid: {
          cols: 4,
          gap: 10,
        },
        gridItem: {
          span: 4,
        },
      },
      children: [
        {
          initValue: 11,
          prefix: 'diy',
          type: 'input',
          props: {
            size: 'small',
            placeholder: '经度',
            gridItem: { span: 2 },
          },
        },
        {
          initValue: 11,
          prefix: 'diy',
          type: 'input',
          props: {
            size: 'small',
            placeholder: '纬度',
            gridItem: { span: 2 },
          },
        },
      ],
    },
    {
      label: '可添加',
      type: 'group',
      key: 'group',
      props: {
        add: true,
        mode: 'default',
        titlePosition: 'top',
        button: 'in-title',
        title: (index: number) => {
          return `系列${ index }`
        },
      },
      children: [
        {
          initValue: 22,
          label: '类型',
          prefix: 'diy',
          type: 'input',
          key: 'type',
          gridItem: {
            span: 2,
          },
        },
        {
          initValue: 33,
          label: '颜色',
          component: DiyInput,
          key: 'color',
          gridItem: {
            span: 2,
          },
        },
      ],
    },
  ],
  formProps: {
    labelWidth: 80,
  },
  formOptions: {
    grid: {
      cols: 4,
    },
    gridItem: {
      span: 4,
    },
    formItem: {
      style: {
      },
    },
  },
})

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