<template>
  <QuesBaseItem :info="info">
    <template v-slot:option>
      <div class="date">
        <a-date-picker
          v-if="dateShown && modeDate === 'year'"
          v-model:value="year"
          :mode="modeDate"
          :format="formatDate"
          :placeholder="'请选择日期'"
          class="custom-date-picker"
          style="width: 280px; margin-right: 12px"
          @panelChange="dateChange"
        />

        <a-month-picker
          v-if="dateShown && modeDate === 'month'"
          :mode="modeDate"
          :format="formatDate"
          :placeholder="'请选择日期'"
          class="custom-date-picker"
          style="width: 280px; margin-right: 12px"
        />

        <a-date-picker
          v-if="dateShown && modeDate === 'date'"
          :mode="modeDate"
          :format="formatDate"
          :placeholder="'请选择日期'"
          class="custom-date-picker"
          style="width: 280px; margin-right: 12px"
        />

        <a-time-picker
          v-if="timeShown"
          :mode="modeTime"
          :format="formatTime"
          :placeholder="'请选择时间'"
          class="custom-date-picker"
          style="width: 230px"
        />
      </div>
    </template>
    <template v-slot:footer>
      <logical :info="info" />
    </template>
  </QuesBaseItem>
</template>

<script>
import { defineComponent, computed, ref } from 'vue';
import Logical from '../../components/Logical.vue';
import QuesBaseItem from '../../fragement/QuesBaseItem.vue';
export default defineComponent({
  name: 'DateTime',
  components: { QuesBaseItem, Logical },
  props: {
    info: { type: Object, default: () => ({}) },
    sn: { type: String, default: '' },
    questionType: { type: [String, Number], default: 7 }
  },
  emits: ['update'],
  setup(props, context) {
    const quiz = computed(() => JSON.parse(JSON.stringify(props.info)));

    const placeholder = computed(() => quiz.value.config?.placeholder);
    const dateShown = computed(() => !!quiz.value.config?.date);
    const timeShown = computed(() => !!quiz.value.config?.time);

    const formatDate = computed(() => {
      const dates = [undefined, 'YYYY-MM-DD', 'YYYY-MM', 'YYYY'];
      return quiz.value.config.date ? dates[quiz.value.config.date] : dates[1];
    });
    const modeDate = computed(() => {
      const dates = [undefined, 'date', 'month', 'year'];
      return quiz.value.config.date ? dates[quiz.value.config.date] : dates[1];
    });
    const formatTime = computed(() => {
      const times = [undefined, 'HH:mm:ss', 'HH:mm', 'HH'];
      return quiz.value.config.time ? times[quiz.value.config.time] : times[1];
    });
    const modeTime = computed(() => {
      const times = [undefined, 'second', 'minute', 'hour'];
      return quiz.value.config.time ? times[quiz.value.config.time] : times[1];
    });

    const year = ref();
    const dateChange = (date) => {
      year.value = date;
    };

    return {
      quiz,
      placeholder,
      dateShown,
      timeShown,
      formatDate,
      modeDate,
      formatTime,
      modeTime,
      year,
      dateChange
    };
  }
});
</script>

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