<template>
  <a-card>
    <a-row :gutter="16">
      <a-col :span="6" v-for="(item,index) of all" :key="index">
        <h3>{{ item.title }}</h3>
        <x-form-date-picker
          v-model="formValues[item.title]"
          :attr="{ ...item.attr }"
          :mode="item.mode"
        />
      </a-col>
    </a-row>
    <pre>{{ formValues }}</pre>
  </a-card>
</template>

<script>
import { defineComponent, reactive } from 'vue'
import XFormDatePicker from './index.vue'

export default defineComponent({
  name: 'XFormDatePickerDemo',
  components: { XFormDatePicker },
  setup () {
    const formValues = reactive({
      '时间选择器-新增模式': null,
      '时间选择器-查询EQUALS': null,
      '时间选择器-查询BETWEEN': null,
      '时间范围选择器-新增模式': null,
      '时间范围选择器-查询BETWEEN': null,

      '单日选择器-新增模式': null,
      '单日选择器-查询EQUALS': null,
      '单日选择器-查询BETWEEN': null,
      '单日范围选择器-新增模式': null,
      '单日范围选择器-查询BETWEEN': null,

      '月份选择-查询BETWEEN': null,
      '月份选择-查询EQUALS': null,
      '月份选择-新增': null,
      '月份范围选择-查询BETWEEN': null,
      '月份范围选择-新增': null,

      '年份选择-查询BETWEEN': null,
      '年份选择-查询EQUALS': null,
      '年份选择-新增': null,
      '年份范围选择-查询BETWEEN': null,
      '年份范围选择-新增': null,
    })

    const oneTest = reactive([{
      title: '月份范围选择-查询BETWEEN',
      attr: { type: 'monthRangePicker', queryType: 'BETWEEN' },
      mode: '查询'
    }])

    const all = reactive([
      {
        title: '时间选择器-新增模式',
        attr: { type: 'timePicker' },
        mode: '新增'
      },
      {
        title: '时间选择器-查询EQUALS',
        attr: { type: 'timePicker', queryType: 'EQUALS' },
        mode: '查询'
      },
      {
        title: '时间选择器-查询BETWEEN',
        attr: { type: 'timePicker', queryType: 'BETWEEN' },
        mode: '查询'
      },
      {
        title: '时间范围选择器-新增模式',
        attr: { type: 'timeRangePicker' },
        mode: '新增'
      },
      {
        title: '时间范围选择器-查询BETWEEN',
        attr: { type: 'timeRangePicker', queryType: 'BETWEEN' },
        mode: '查询'
      },
      {
        title: '单日选择器-新增模式',
        attr: { type: 'datePicker' },
        mode: '新增'
      },
      {
        title: '单日选择器-查询EQUALS',
        attr: { type: 'datePicker', queryType: 'EQUALS' },
        mode: '查询'
      },
      {
        title: '单日选择器-查询BETWEEN',
        attr: { type: 'datePicker', queryType: 'BETWEEN' },
        mode: '查询'
      },
      {
        title: '单日范围选择器-新增模式',
        attr: { type: 'rangePicker' },
        mode: '新增'
      },
      {
        title: '单日范围选择器-查询BETWEEN',
        attr: { type: 'rangePicker', queryType: 'BETWEEN' },
        mode: '查询'
      },
      {
        title: '月份选择-查询BETWEEN',
        attr: { type: 'monthPicker', queryType: 'BETWEEN' },
        mode: '查询'
      },
      {
        title: '月份选择-查询EQUALS',
        attr: { type: 'monthPicker', queryType: 'EQUALS' },
        mode: '查询'
      },
      {
        title: '月份选择-新增',
        attr: { type: 'monthPicker' },
        mode: '新增'
      },
      {
        title: '月份范围选择-新增',
        attr: { type: 'monthRangePicker' },
        mode: '新增'
      },
      {
        title: '月份范围选择-查询BETWEEN',
        attr: { type: 'monthRangePicker', queryType: 'BETWEEN' },
        mode: '查询'
      },
      {
        title: '年份选择-查询BETWEEN',
        attr: { type: 'yearPicker', queryType: 'BETWEEN', queryValueFormat: 'YYYY-MM-DD HH:mm:ss' },
        mode: '查询'
      },
      {
        title: '年份选择-查询EQUALS',
        attr: { type: 'yearPicker', queryType: 'EQUALS' },
        mode: '查询'
      },
      {
        title: '年份选择-新增',
        attr: { type: 'yearPicker' },
        mode: '新增'
      },
      {
        title: '年份范围选择-新增',
        attr: { type: 'yearRangePicker' },
        mode: '新增'
      },
      {
        title: '年份范围选择-查询BETWEEN',
        attr: { type: 'yearRangePicker', queryType: 'BETWEEN' },
        mode: '查询'
      },
    ])

    return { formValues, all, oneTest }
  }
})
</script>

<style scoped>
h2 {
  margin-bottom: 16px;
}

h3 {
  margin-top: 24px;
  margin-bottom: 8px;
}

x-form-date-picker {
  margin-bottom: 16px;
}

pre {
  background: #f8f8f8;
  padding: 16px;
  border: 1px solid #ddd;
}
</style>
