<template>
  <div>
    <BasicForm
      autoFocusFirstItem
      :labelWidth="0"
      :schemas="schemas"
      :rowProps="{ gutter: [16, 0] }"
      :showActionButtonGroup="false"
    />
    <List
      :grid="{ gutter: 16, xs: 1, sm: 2, md: 2, lg: 3, xl: 4, xxl: 5, column: 1 }"
      :data-source="data"
    >
      <template #renderItem="{ item }">
        <List-item>
          <LiveBroadcastItem />
        </List-item>
      </template>
    </List>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  import { BasicForm, FormSchema } from '/@/components/Form/index';
  import { List } from 'ant-design-vue';
  import { ColEx } from '/@/components/Form/src/types';
  import LiveBroadcastItem from './LiveBroadcastItem.vue';
  const colProps: Partial<ColEx> = {
    xs: 24,
    sm: 12,
    md: 8,
    lg: 6,
    xl: 6,
    xxl: 4,
  };
  const schemas: FormSchema[] = [
    {
      field: 'field1',
      component: 'Select',
      label: '',
      colProps,
      componentProps: {
        placeholder: '基地',
        options: [
          {
            label: '选项2',
            value: '1',
            key: '1',
          },
        ],
        onChange: (e: any) => {
          console.log(e);
        },
      },
    },
    {
      field: 'field1',
      component: 'Select',
      label: '',
      colProps,
      componentProps: {
        placeholder: '检测点',
        options: [
          {
            label: '选项2',
            value: '1',
            key: '1',
          },
        ],
        onChange: (e: any) => {
          console.log(e);
        },
      },
    },
    {
      field: 'time',
      component: 'RangePicker',
      label: '',
      colProps,
      componentProps: {
        placeholder: ['开始日期', '结束日期'],
      },
    },
    {
      field: 'disclosure',
      component: 'RadioButtonGroup',
      label: '',
      colProps: colProps,
      componentProps: {
        options: [
          {
            label: '今天',
            value: '1',
          },
          {
            label: '近一周',
            value: '2',
          },
          {
            label: '近一个月',
            value: '3',
          },
        ],
      },
    },
  ];

  interface DataItem {
    title: string;
  }
  const data: DataItem[] = [
    {
      title: 'Title 1',
    },
    {
      title: 'Title 2',
    },
    {
      title: 'Title 3',
    },
    {
      title: 'Title 4',
    },
    {
      title: 'Title 4',
    },
    {
      title: 'Title 4',
    },
    {
      title: 'Title 4',
    },
  ];

  export default defineComponent({
    components: {
      BasicForm,
      List,
      ListItem: List.Item,
      LiveBroadcastItem,
    },
    setup() {
      return {
        schemas,
        data,
      };
    },
  });
</script>

<style scoped></style>
