<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"
      />
    </section>
  </section>
</template>
<script lang="ts" setup>
import { reactive, ref, computed } from 'vue'

const textJSON = computed({
  get () {
    return JSON.stringify(model.value, null, '\t')
  },
  set (value) {
    model.value = JSON.parse(value)
  }
})
const model = ref({
  startTime: '2022-10-01 12:00:00',
  endTime: '2022-10-07 12:00:00',
  person: {
    name: '张三',
    sex: '男'
  }
})
const state = reactive<any>({
  polygons: [],
  labels: [
    {
      label: '时间范围',
      key: ['startTime', 'endTime'],
      type: 'datePicker',
      props: {
        type: 'daterange',
        format:'YYYY-MM-DD hh:mm:ss',
        valueformat:'YYYY-MM-DD hh:mm:ss'
      },
    },
    {
      label: '名称',
      key: 'person.name',
      type: 'input'
    },
    {
      label: '性别',
      key: 'person.sex',
      type: 'radioGroup',
      options: [
        {
          label: '男',
          value: '男'
        },
        {
          label: '女',
          value: '女'
        }
      ]
    }
  ],
  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>
