import 'dayjs/locale/ko'
import 'dayjs/locale/en'
import dayjs from 'dayjs'

Failed to resolve module specifier "dayjs/locale/ko".
Tip: edit the "Import Map" tab to specify import paths for dependencies.

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { ElConfigProvider } from 'element-plus'
import dayjs from 'dayjs'

var koLocale = {
  name: 'ko',
  weekdays: '일요일_월요일_화요일_수요일_목요일_금요일_토요일'.split('_'),
  weekdaysShort: '일_월_화_수_목_금_토'.split('_'),
  weekdaysMin: '일_월_화_수_목_금_토'.split('_'),
  months: '1월_2월_3월_4월_5월_6월_7월_8월_9월_10월_11월_12월'.split('_'),
  monthsShort: '1월_2월_3월_4월_5월_6월_7월_8월_9월_10월_11월_12월'.split('_'),
  ordinal: function ordinal(n) {
    return n;
  },
  formats: {
    LT: 'A h:mm',
    LTS: 'A h:mm:ss',
    L: 'YYYY.MM.DD.',
    LL: 'YYYY년 MMMM D일',
    LLL: 'YYYY년 MMMM D일 A h:mm',
    LLLL: 'YYYY년 MMMM D일 dddd A h:mm',
    l: 'YYYY.MM.DD.',
    ll: 'YYYY년 MMMM D일',
    lll: 'YYYY년 MMMM D일 A h:mm',
    llll: 'YYYY년 MMMM D일 dddd A h:mm'
  },
  meridiem: function meridiem(hour) {
    return hour < 12 ? '오전' : '오후';
  },
  relativeTime: {
    future: '%s 후',
    past: '%s 전',
    s: '몇 초',
    m: '1분',
    mm: '%d분',
    h: '한 시간',
    hh: '%d시간',
    d: '하루',
    dd: '%d일',
    M: '한 달',
    MM: '%d달',
    y: '일 년',
    yy: '%d년'
  }
};

// @ts-ignore
dayjs.locale(koLocale, null, true);

// import './en.js'

// @ts-ignore
import ko from 'element-plus/dist/locale/ko'
// @ts-ignore
import en from 'element-plus/dist/locale/en'

import Child from './Inner.vue';

const lang = ref('ko');
const localeVal = computed(() => lang.value === 'ko' ? ko : en)

const handleChangeLaguage = () => {
  if(lang.value === 'ko') {
    dayjs.locale('en')
    lang.value = 'en';
  } else {
    dayjs.locale('ko')
    lang.value = 'ko';
  }
}

onMounted(() => {
})
</script>

<template>
  {{ dayjs().locale(lang).format('HH:MM a') }}
  <ElConfigProvider :locale="localeVal">
    <Child />
    <ElButton @click="handleChangeLaguage">Click me</ElButton>
  </ElConfigProvider>
</template>

<script setup lang="ts">
import { useLocale } from '@element-plus/hooks'
import { ref } from '@vue/reactivity'
import { watch } from '@vue/runtime-core'

const { locale: localeEl, lang } = useLocale()

watch([localeEl, lang], (val) => {
  console.log('localeEl', val)
})

const changeTime = () => {}
const format = 'h:mm A'
const time = ref()
</script>

<template>
  <div>Hello Inner</div>
  <div>
    <el-time-select
      :model-value="time"
      @change="changeTime"
      start="00:00"
      step="00:30"
      end="23:59"
      :format="format"
    />
  </div>
</template>