<template>
  <section class="view-component">
    <section class="meta-form">
      <s-code-editor v-model="textJSON" lang="json"></s-code-editor>
      <s-form
        ref="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 Form = ref()
const model = ref({
  person: {
    sex: 0
  }
})
const state = reactive<any>({
  polygons: [],
  labels: [
    {
      initValue: [ '2022-10-01 12:00:00', '2022-10-07 12:00:00' ],
      label: '时间范围',
      key: [ 'startTime', 'endTime' ],
      type: 'datePicker',
      props: {
        type: 'daterange',
        format: 'YYYY-MM-DD hh:mm:ss',
        valueFormat: 'YYYY-MM-DD hh:mm:ss'
      }
    },
    {
      initValue: '张三',
      label: '名称',
      key: 'person.name',
      type: 'input'
    },
    {
      initValue: 1,
      label: '性别',
      key: 'person.sex',
      type: 'radioGroup',
      options: [
        {
          label: '男',
          value: 1
        },
        {
          label: '女',
          value: 0
        }
      ]
    },
    {
      show ( { getItemValue } ) {
        return getItemValue({ key: 'person.sex' }) === 1
      },
      label: '体重',
      key: 'person.weight',
      type: 'input'
    },
    {
      show ( { getItemValue } ) {
        return getItemValue({ key: 'person.sex' }) === 0
      },
      label: '身高',
      key: 'person.height',
      type: 'input'
    }
  ],
  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>
