<!--
 * @Date: 2022-07-18 10:22:22
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2022-08-30 10:35:45
 * @FilePath: /data-table/src/views/index.vue
 * @Description: 首页
-->
<template>
  <van-image width="100%" height="200" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
  <div style="padding: 1rem;">表单描述</div>
  <div style="padding: 1rem;">
    <van-form @submit="onSubmit">
      <van-cell-group>
        <component v-for="(item, index) in mockData" :key="index" :is="item.component" :item="item" />
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>

</template>

<script setup>
import { createComponentType } from '@/hooks/useComponentType'

const mockData = ref([]);
onMounted(() => {
  mockData.value = [{
    key: 'username',
    value: 'Hooke',
    label: '用户名',
    placeholder: '请输入用户名',
    component: '',
    component_type: 'text',
    required: true,
  }, {
    key: 'age',
    value: '',
    label: '年龄',
    placeholder: '请输入年龄',
    component: '',
    component_type: 'text',
    required: false,
  }, {
    key: 'gender',
    value: 'female',
    label: '性别',
    placeholder: '',
    component: '',
    component_type: 'radio',
    sub: [{
      key: 'male',
      value: '男'
    }, {
      key: 'female',
      value: '女'
    }]
  }, {
    key: 'message',
    value: 'zzz',
    label: '留言',
    placeholder: '请输入留言',
    component: '',
    component_type: 'textarea',
  }];
  // 生成自定义组件
  createComponentType(mockData.value)
})

const onSubmit = (values) => {
  console.log('submit', values);
};

</script>

<style lang="less" scoped>
</style>