<template>
  <PageWrapper>
    <a-card>
      <BasicForm
        autoFocusFirstItem
        :labelWidth="0"
        :schemas="schemas"
        :rowProps="{ gutter: [16, 0] }"
        :showActionButtonGroup="false"
      />
      <div class="md:flex enter-y flex-wrap -mr-4">
        <AirTemperature class="md:w-386px w-full !mr-4 !mb-4" :loading="false" />
        <AirHumidity class="md:w-386px w-full !mr-4 !mb-4" :loading="false" />
        <LightIntensity class="md:w-386px w-full !mr-4 !mb-4" :loading="false" />
        <Rainfall class="md:w-386px w-full !mr-4 !mb-4" :loading="false" />
        <WindSpeed class="md:w-386px w-full !mr-4 !mb-4" :loading="false" />
        <Pressure class="md:w-386px w-full !mr-4 !mb-4" :loading="false" />
        <WindDirection class="md:w-386px w-full !mr-4 !mb-4" :loading="false" />
        <Noise class="md:w-386px w-full !mr-4 !mb-4" :loading="false" />
        <PM10 class="md:w-386px w-full !mr-4 !mb-4" :loading="false" />
        <PM25 class="md:w-386px w-full !mr-4 !mb-4" :loading="false" />
      </div>
    </a-card>
  </PageWrapper>
</template>

<script lang="ts">
  import { PageWrapper } from '/@/components/Page';
  import { Card, Row, Col, Select } from 'ant-design-vue';
  import { defineComponent, ref } from 'vue';
  import { BasicForm, FormSchema } from '/@/components/Form/index';
  import { ColEx } from '/@/components/Form/src/types';
  import AirTemperature from './components/AirTemperature.vue';
  import AirHumidity from './components/AirHumidity.vue';
  import LightIntensity from './components/LightIntensity.vue';
  import Rainfall from './components/Rainfall.vue';
  import WindSpeed from './components/WindSpeed.vue';
  import Pressure from './components/Pressure.vue';
  import WindDirection from './components/WindDirection.vue';
  import Noise from './components/Noise.vue';
  import PM10 from './components/Noise.vue';
  import PM25 from './components/PM25.vue';
  const valueSelectA = ref<string[]>([]);
  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',
          },
        ],
      },
    },
  ];
  export default defineComponent({
    components: {
      [Card.name]: Card,
      [Row.name]: Row,
      [Col.name]: Col,
      [Select.name]: Select,
      BasicForm,
      PageWrapper,
      AirTemperature,
      AirHumidity,
      LightIntensity,
      Rainfall,
      WindSpeed,
      Pressure,
      WindDirection,
      Noise,
      PM10,
      PM25,
    },
    setup() {
      return {
        valueSelectA,
        schemas,
      };
    },
  });
</script>
