<!--
 * @Date: 2022-07-18 10:22:22
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2022-08-31 13:37:32
 * @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: 'test',
    label: '用户名',
    placeholder: '请输入用户名',
    component: '',
    component_props: {
      name: 'text'
    },
    required: true,
  }, {
    key: 'age',
    value: '',
    label: '年龄',
    placeholder: '请输入年龄',
    component: '',
    component_props: {
      name: 'number'
    },
    required: false,
  }, {
    key: 'gender',
    value: '',
    label: '性别',
    placeholder: '',
    component: '',
    component_props: {
      name: 'radio'
    },
    options: [{
      key: '男',
      value: '男'
    }, {
      key: '女',
      value: '女'
    }]
  }, {
    key: 'hobby',
    value: [],
    label: '兴趣爱好',
    placeholder: '',
    component: '',
    component_props: {
      name: 'checkbox'
    },
    options: [{
      key: '足球',
      value: '足球'
    }, {
      key: '篮球',
      value: '篮球'
    }]
  }, {
    key: 'message',
    value: 'zzz',
    label: '留言',
    placeholder: '请输入留言',
    component: '',
    component_props: {
      name: 'textarea'
    },
  }, {
    key: 'vehicle',
    value: '自行车',
    label: '交通工具',
    placeholder: '请选择交通工具',
    component: '',
    component_props: {
      name: 'picker'
    },
    options: [
      { text: '自行车', value: '自行车' },
      { text: '汽车', value: '汽车' },
      { text: '地铁', value: '地铁' },
    ],
    required: true,
  }, {
    key: 'city',
    value: '天津市/天津市/和平区',
    city_code: '120101',
    label: '省市区',
    placeholder: '请选择省市区',
    component_props: {
      name: 'area_picker'
    },
  }, {
    key: 'datetime',
    value: [],
    label: '日期选择',
    placeholder: '请选择日期',
    component_props: {
      name: 'date_picker',
      title: '请选择',
      min_date: new Date(),
      columns_type: ['year', 'month']
    },
  }, {
    key: 'imageUploader',
    value: '',
    label: '图片上传',
    component_props: {
      name: 'image_uploader'
    }
  }];
  // 生成自定义组件
  createComponentType(mockData.value)
})

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

</script>

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