<script setup lang="ts">
// 製作者 松下
import { ref, reactive, computed, onMounted } from 'vue'
import { PickerValue } from '../../CCWheelPicker/utils'
import CCWheelMultiPicker from '../CCWheelMultiPicker.vue'

const value = ref<string>('2023/9月1')
const valueTime = ref<string>('10時32分')
const valueFloat = ref<string>('10.6')
const valueMIX = ref<string>('今日16時49分')
const earlyVal = ref<string>('')
</script>

<template>
  <div>
    {{ value }}<br />
    早く値を取りたい場合{{ earlyVal }}
    <CCWheelMultiPicker
      v-model="value"
      format="{yyyy}年{m}月{d}日"
      class="_CCWheelPicker"
      mode="date"
      :initialValue="[
        { label: 'yyyy', value: '2023' },
        { label: 'm', value: '9' },
        { label: 'd', value: '1' },
      ]"
      @earlyUpdate="(val) => (earlyVal = val)"
    />

    {{ valueTime }}
    <CCWheelMultiPicker
      v-model="valueTime"
      format="{HH}:{MM}"
      class="_CCWheelPicker"
      :initialValue="[
        { label: 'HH', value: '10' },
        { label: 'MM', value: '32' },
      ]"
      :formats="[
        {
          label: 'HH',
          startOffset: 0,
          upperNumber: 23,
          requiredDigit: false,
          numberOptions: true,
        },
        {
          label: 'MM',
          startOffset: 0,
          upperNumber: 59,
          requiredDigit: false,
          numberOptions: true,
        },
      ]"
    />
    {{ valueFloat }}
    <CCWheelMultiPicker
      v-model="valueFloat"
      format="{x}.{y}℃"
      class="_CCWheelPicker"
      :initialValue="[
        { label: 'x', value: '10' },
        { label: 'y', value: '6' },
      ]"
      :formats="[
        {
          label: 'x',
          startOffset: 0,
          upperNumber: 99,
          requiredDigit: false,
          numberOptions: true,
        },
        {
          label: 'y',
          startOffset: 0,
          upperNumber: 9,
          requiredDigit: false,
          numberOptions: true,
        },
      ]"
    />
    {{ valueMIX }}
    <CCWheelMultiPicker
      v-model="valueMIX"
      format="{x}{y}:{z}"
      class="_CCWheelPicker"
      :initialValue="[
        { label: 'x', value: '今日' },
        { label: 'y', value: '16' },
        { label: 'z', value: '49' },
      ]"
      :formats="[
        {
          label: 'x',
          options: [
            { label: '一昨日', value: '一昨日' },

            { label: '昨日', value: '昨日' },
            { label: '今日', value: '今日' },
            { label: '明日', value: '明日' },
            { label: '明後日', value: '明後日' },
          ],
          numberOptions: false,
        },
        {
          label: 'y',
          startOffset: 0,
          upperNumber: 23,
          requiredDigit: false,
          numberOptions: true,
        },
        {
          label: 'z',
          startOffset: 0,
          upperNumber: 59,
          requiredDigit: false,
          numberOptions: true,
        },
      ]"
    />
  </div>
</template>

<style scoped>
.arrow-bottom {
  transform: rotate(180deg);
}
</style>
