<template>
  <el-container v-if="timer_show" class="ose-container tw-h-full tw-w-full tw-justify-center tw-items-center">
    <img v-if="overlay_img_show" style=" width: 100%; height: 100%;" :src="params.overlay_img"/>

    <article class="tw-h-full tw-w-full tw-flex tw-flex-col tw-justify-center tw-items-center"
             :style="[
                 `background-color: ${params.bg_color}`,
                 !params.bg_color2?'':`background-image: linear-gradient(${params.bg_color_gradient_direction}deg, ${params.bg_color} ${params.bg_color_gradient_position}%, ${params.bg_color2} ${params.bg_color2_gradient_position}%);`,
                 `background-image: url('${params.bg_img_url}') ; background-repeat : no-repeat ; background-size : 100% 100%`
              ]"
    >
      <el-row class="tw-relative">
        <!--        Header-->
        <el-col v-if="params.header_switch=='Y'?true:false" class="tw-text-center">
          <span id="ose-cdt-header"
                class="tw-relative ose-text"
                :style="[
                    `top: ${params.header_y_position}px`,
                    `font-size: ${params.header_font_size}px`,
                    `color: ${params.header_color}`,
                    params.header_color2?
                    `background-image: linear-gradient(${params.header_color_gradient_direction}deg, ${params.header_color} ${params.header_color_gradient_position}%, ${params.header_color2} ${params.header_color2_gradient_position}%);`:
                    `background-image: linear-gradient(${params.header_color_gradient_direction}deg, ${params.header_color} ${params.header_color_gradient_position}%, ${params.header_color} ${params.header_color2_gradient_position}%);`
                ]"
                v-html="header_text"
          >
          </span>
        </el-col>
        <!--        Timer-->
        <el-col class="tw-flex tw-justify-center tw-text-center">
          <el-row :gutter="params.timer_x_space">
            <!--            天-->
            <el-col span="3.4">
              <p class="tw-relative ose-text"
                 :style="[
                    `top: ${params.time_y_position}px`,
                    `font-size: ${params.time_font_size}px`,
                    `color: ${params.time_color}`,
                     params.time_color2?
                    `background-image: linear-gradient(${params.time_color_gradient_direction}deg, ${params.time_color} ${params.time_color_gradient_position}%, ${params.time_color2} ${params.time_color2_gradient_position}%);`:
                    `background-image: linear-gradient(${params.time_color_gradient_direction}deg, ${params.time_color} ${params.time_color_gradient_position}%, ${params.time_color} ${params.time_color2_gradient_position}%);`
                    ]"
              >
                {{ t_day }}
              </p>
              <p class="tw-relative ose-text"
                 :style="[
                    `top: ${params.unit_y_position}px`,
                    `font-size: ${params.unit_font_size}px`,
                    `color: ${params.unit_color}`,
                    params.unit_color2?
                    `background-image: linear-gradient(${params.unit_color_gradient_direction}deg, ${params.unit_color} ${params.unit_color_gradient_position}%, ${params.unit_color2} ${params.unit_color2_gradient_position}%);`:
                    `background-image: linear-gradient(${params.unit_color_gradient_direction}deg, ${params.unit_color} ${params.unit_color_gradient_position}%, ${params.unit_color} ${params.unit_color2_gradient_position}%);`
                    ]"
              >
                天
              </p>
            </el-col>
            <el-col span="3.4" class="">
              <span class="tw-relative ose-text-symbol"
                    :style="[
                    `top: ${params.symbol_y_position}px`,
                    `font-size: ${params.symbol_font_size}px`,
                    `color: ${params.symbol_color}`,
                    params.symbol_color2?
                    `background-image: linear-gradient(${params.symbol_color_gradient_direction}deg, ${params.symbol_color} ${params.symbol_color_gradient_position}%, ${params.symbol_color2} ${params.symbol_color2_gradient_position}%);`:
                    `background-image: linear-gradient(${params.symbol_color_gradient_direction}deg, ${params.symbol_color} ${params.symbol_color_gradient_position}%, ${params.symbol_color} ${params.symbol_color2_gradient_position}%);`
                    ]"
              >
                :
              </span>
            </el-col>

            <!--            時-->
            <el-col span="3.4">
              <p class="tw-relative ose-text"
                 :style="[
                    `top: ${params.time_y_position}px`,
                    `font-size: ${params.time_font_size}px`,
                    `color: ${params.time_color}`,
                     params.time_color2?
                    `background-image: linear-gradient(${params.time_color_gradient_direction}deg, ${params.time_color} ${params.time_color_gradient_position}%, ${params.time_color2} ${params.time_color2_gradient_position}%);`:
                    `background-image: linear-gradient(${params.time_color_gradient_direction}deg, ${params.time_color} ${params.time_color_gradient_position}%, ${params.time_color} ${params.time_color2_gradient_position}%);`
                    ]"
              >
                {{ t_hour }}
              </p>
              <p class="tw-relative ose-text"
                 :style="[
                    `top: ${params.unit_y_position}px`,
                    `font-size: ${params.unit_font_size}px`,
                    `color: ${params.unit_color}`,
                     params.unit_color2?
                    `background-image: linear-gradient(${params.unit_color_gradient_direction}deg, ${params.unit_color} ${params.unit_color_gradient_position}%, ${params.unit_color2} ${params.unit_color2_gradient_position}%);`:
                    `background-image: linear-gradient(${params.unit_color_gradient_direction}deg, ${params.unit_color} ${params.unit_color_gradient_position}%, ${params.unit_color} ${params.unit_color2_gradient_position}%);`
                    ]"
              >
                時
              </p>
            </el-col>
            <el-col span="3.4" class="">
              <span class="tw-relative ose-text-symbol"
                    :style="[
                    `top: ${params.symbol_y_position}px`,
                    `font-size: ${params.symbol_font_size}px`,
                    `color: ${params.symbol_color}`,
                    params.symbol_color2?
                    `background-image: linear-gradient(${params.symbol_color_gradient_direction}deg, ${params.symbol_color} ${params.symbol_color_gradient_position}%, ${params.symbol_color2} ${params.symbol_color2_gradient_position}%);`:
                    `background-image: linear-gradient(${params.symbol_color_gradient_direction}deg, ${params.symbol_color} ${params.symbol_color_gradient_position}%, ${params.symbol_color} ${params.symbol_color2_gradient_position}%);`
                    ]"
              >
                :
              </span>
            </el-col>

            <!--            分-->
            <el-col span="3.4">
              <p class="tw-relative ose-text"
                 :style="[
                    `top: ${params.time_y_position}px`,
                    `font-size: ${params.time_font_size}px`,
                    `color: ${params.time_color}`,
                     params.time_color2?
                    `background-image: linear-gradient(${params.time_color_gradient_direction}deg, ${params.time_color} ${params.time_color_gradient_position}%, ${params.time_color2} ${params.time_color2_gradient_position}%);`:
                    `background-image: linear-gradient(${params.time_color_gradient_direction}deg, ${params.time_color} ${params.time_color_gradient_position}%, ${params.time_color} ${params.time_color2_gradient_position}%);`
                    ]"
              >
                {{ t_minute }}
              </p>
              <p class="tw-relative ose-text"
                 :style="[
                    `top: ${params.unit_y_position}px`,
                    `font-size: ${params.unit_font_size}px`,
                    `color: ${params.unit_color}`,
                     params.unit_color2?
                    `background-image: linear-gradient(${params.unit_color_gradient_direction}deg, ${params.unit_color} ${params.unit_color_gradient_position}%, ${params.unit_color2} ${params.unit_color2_gradient_position}%);`:
                    `background-image: linear-gradient(${params.unit_color_gradient_direction}deg, ${params.unit_color} ${params.unit_color_gradient_position}%, ${params.unit_color} ${params.unit_color2_gradient_position}%);`
                    ]"
              >
                分
              </p>
            </el-col>
            <el-col span="3.4" class="">
              <span class="tw-relative ose-text-symbol"
                    :style="[
                    `top: ${params.symbol_y_position}px`,
                    `font-size: ${params.symbol_font_size}px`,
                    `color: ${params.symbol_color}`,
                    params.symbol_color2?
                    `background-image: linear-gradient(${params.symbol_color_gradient_direction}deg, ${params.symbol_color} ${params.symbol_color_gradient_position}%, ${params.symbol_color2} ${params.symbol_color2_gradient_position}%);`:
                    `background-image: linear-gradient(${params.symbol_color_gradient_direction}deg, ${params.symbol_color} ${params.symbol_color_gradient_position}%, ${params.symbol_color} ${params.symbol_color2_gradient_position}%);`
                    ]"
              >
                :
              </span>
            </el-col>

            <!--            秒-->
            <el-col span="3.4">
              <p class="tw-relative ose-text"
                 :style="[
                    `top: ${params.time_y_position}px`,
                    `font-size: ${params.time_font_size}px`,
                    `color: ${params.time_color}`,
                     params.time_color2?
                    `background-image: linear-gradient(${params.time_color_gradient_direction}deg, ${params.time_color} ${params.time_color_gradient_position}%, ${params.time_color2} ${params.time_color2_gradient_position}%);`:
                    `background-image: linear-gradient(${params.time_color_gradient_direction}deg, ${params.time_color} ${params.time_color_gradient_position}%, ${params.time_color} ${params.time_color2_gradient_position}%);`
                    ]"
              >
                {{ t_second }}
              </p>
              <p class="tw-relative ose-text"
                 :style="[
                    `top: ${params.unit_y_position}px`,
                    `font-size: ${params.unit_font_size}px`,
                    `color: ${params.unit_color}`,
                     params.unit_color2?
                    `background-image: linear-gradient(${params.unit_color_gradient_direction}deg, ${params.unit_color} ${params.unit_color_gradient_position}%, ${params.unit_color2} ${params.unit_color2_gradient_position}%);`:
                    `background-image: linear-gradient(${params.unit_color_gradient_direction}deg, ${params.unit_color} ${params.unit_color_gradient_position}%, ${params.unit_color} ${params.unit_color2_gradient_position}%);`
                    ]"
              >
                秒
              </p>
            </el-col>

          </el-row>
        </el-col>
      </el-row>
    </article>

  </el-container>
</template>
<script setup>
import {computed, reactive, ref, toRefs, watch} from "vue";
import {useRoute} from 'vue-router';

const route = useRoute();
const query_params = computed(() => route.query.params)

const props = defineProps({
  dev: {
    default: false
  },
  modelValue: {
    default: ""
  },
  timer_type: {
    default: 1
  },
  start_at: {
    default: null
  },
  end_at: {
    default: null
  },
  repeat_day: {
    default: 0
  },

  bg_color: {
    default: "#FFFFFFFF"
  },
  bg_color2: {
    default: null
  },
  bg_color_gradient_direction: {
    default: 62
  },
  bg_color_gradient_position: {
    default: 0
  },
  bg_color2_gradient_position: {
    default: 100
  },
  bg_img_url:{
    default:""
  },

  header_switch: {
    default: "Y"
  },
  header_text_prepare: {
    default: "優 惠 活 動 尚 未 開 始"
  },
  header_text_ing: {
    default: "優 惠 倒 數 計 時 中"
  },
  header_text_finish: {
    default: "優 惠 活 動 已 結 束"
  },
  header_y_position: {
    default: 0
  },
  header_font_size: {
    default: 20
  },
  header_color: {
    default: "black"
  },
  header_color2: {
    default: null
  },
  header_color_gradient_direction: {
    default: 62
  },
  header_color_gradient_position: {
    default: 0
  },
  header_color2_gradient_position: {
    default: 100
  },

  timer_x_space: {
    default: 10
  },

  time_y_position: {
    default: 0
  },
  time_font_size: {
    default: 20
  },
  time_color: {
    default: "black"
  },
  time_color2: {
    default: null
  },
  time_color_gradient_direction: {
    default: 62
  },
  time_color_gradient_position: {
    default: 0
  },
  time_color2_gradient_position: {
    default: 100
  },

  symbol_y_position: {
    default: ""
  },
  symbol_font_size: {
    default: 20
  },
  symbol_color: {
    default: "black"
  },
  symbol_color2: {
    default: null
  },
  symbol_color_gradient_direction: {
    default: 62
  },
  symbol_color_gradient_position: {
    default: 0
  },
  symbol_color2_gradient_position: {
    default: 100
  },

  unit_y_position: {
    default: ""
  },
  unit_font_size: {
    default: 20
  },
  unit_color: {
    default: "black"
  },
  unit_color2: {
    default: null
  },
  unit_color_gradient_direction: {
    default: 62
  },
  unit_color_gradient_position: {
    default: 0
  },
  unit_color2_gradient_position: {
    default: 100
  },

  overlay_img: {
    default: null
  },
})
let params = reactive(props.dev ? props.modelValue : {})


const header_text = ref('優 惠 倒 數 計 時 中')
const t_day = ref('00')
const t_hour = ref('00')
const t_minute = ref('00')
const t_second = ref('00')
const timer_id = ref()
const timer_show = ref(true)
const overlay_img_show = ref(false)

const getCountDownUnit = (distance) => {

  const days = Math.floor(distance / (1000 * 60 * 60 * 24));
  const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((distance % (1000 * 60)) / 1000);
  t_day.value = days.toString()
  if (days < 10) {
    t_day.value = '0' + t_day.value
  }
  t_hour.value = hours.toString()
  if (hours < 10) {
    t_hour.value = '0' + t_hour.value
  }
  t_minute.value = minutes.toString()
  if (minutes < 10) {
    t_minute.value = '0' + t_minute.value
  }
  t_second.value = seconds.toString()
  if (seconds < 10) {
    t_second.value = '0' + t_second.value
  }
}
const initTimerHeader = (timer_type) => {
  const EMOJI_REGEX = /(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff]|[\u0023-\u0039]\ufe0f?\u20e3|\u3299|\u3297|\u303d|\u3030|\u24c2|\ud83c[\udd70-\udd71]|\ud83c[\udd7e-\udd7f]|\ud83c\udd8e|\ud83c[\udd91-\udd9a]|\ud83c[\udde6-\uddff]|\ud83c[\ude01-\ude02]|\ud83c\ude1a|\ud83c\ude2f|\ud83c[\ude32-\ude3a]|\ud83c[\ude50-\ude51]|\u203c|\u2049|[\u25aa-\u25ab]|\u25b6|\u25c0|[\u25fb-\u25fe]|\u00a9|\u00ae|\u2122|\u2139|\ud83c\udc04|[\u2600-\u26FF]|\u2b05|\u2b06|\u2b07|\u2b1b|\u2b1c|\u2b50|\u2b55|\u231a|\u231b|\u2328|\u23cf|[\u23e9-\u23f3]|[\u23f8-\u23fa]|\ud83c\udccf|\u2934|\u2935|[\u2190-\u21ff])/g;

  if (timer_type !== 'on' && params.overlay_img) {
    timer_show.value = false
    overlay_img_show.value = true
    return;
  }
  if (timer_type !== 'on' && (!params.overlay_img || params.overlay_img == '')) {
    timer_show.value = false
    overlay_img_show.value = false
    return;
  }
  timer_show.value = true
  switch (timer_type) {
    case 'prepare' :
      header_text.value = params.header_text_prepare.replace(EMOJI_REGEX,`<span class="emoji">$&</span>`)
      return

    case 'on' :
      header_text.value = params.header_text_ing.replace(EMOJI_REGEX,`<span class="emoji">$&</span>`)
      return

    case 'end' :
      header_text.value = params.header_text_finish.replace(EMOJI_REGEX,`<span class="emoji">$&</span>`)
      return
  }
}
const initTimer = (start_at, end_at, repeat_day) => {
  let timer_type = 'prepare';
  let init_now = new Date().getTime();
  let init_distance = end_at - init_now;

  // 重複模式
  if (repeat_day && end_at < init_now) {
    let repeat_day_second = repeat_day * 24 * 60 * 60 * 1000
    let lost_duration = 0
    if (new Date().getTime() - end_at < repeat_day_second) {
      lost_duration = repeat_day_second - (new Date().getTime() - end_at)
    } else {
      lost_duration = repeat_day_second - (new Date().getTime() - end_at) % repeat_day_second
    }
    init_distance = lost_duration
  }
  if (init_distance < 0 || isNaN(init_distance)) {
    timer_type = 'end'
    return timer_type
  }

  if (init_now < start_at) {
    init_distance = end_at - start_at;
    return timer_type
  }

  timer_type = 'on'
  timer_id.value = setInterval(function () {

    let now = new Date().getTime();

    let distance = end_at - now;

    if (repeat_day && end_at < now) {
      let repeat_day_second = repeat_day * 24 * 60 * 60 * 1000
      let lost_duration = 0
      if (new Date().getTime() - end_at < repeat_day_second) {
        lost_duration = repeat_day_second - (new Date().getTime() - end_at)
      } else {
        lost_duration = repeat_day_second - (new Date().getTime() - end_at) % repeat_day_second
      }

      distance = lost_duration
      // distance = repeat_day_second - lost_duration
    }

    if (distance < 0 || isNaN(distance)) {
      clearInterval(timer_id.value);
      t_day.value = '00'
      t_hour.value = '00'
      t_minute.value = '00'
      t_second.value = '00'
      return
    }

    let show_units = getCountDownUnit(distance)
  }, 1000);
  return timer_type
}
const main = () => {

  if (!params.start_at || !params.end_at) {
    return
  }
  let start_at = new Date(params.start_at)
  let end_at = new Date(params.end_at)

  start_at = start_at.getTime()
  end_at = end_at.getTime()

  const timer_type = initTimer(start_at, end_at, params.repeat_day)
  initTimerHeader(timer_type)
}
const initPage = async () => {
  if (query_params.value && !props.dev) {
    const decodedURL = decodeURIComponent(atob(query_params.value));
    const q_result = JSON.parse(decodedURL)
    for (let key in q_result) {
      const val = q_result[key]
      params[key] = val
    }
  }
  main()
}

watch(() => [
  params.start_at, params.end_at, params.repeat_day,
  params.header_text_prepare,params.header_text_ing,params.header_text_finish
], () => {
  if (timer_id.value)
    clearInterval(timer_id.value);
  main()
})
watch(query_params, newSearchQuery => initPage())
initPage()
</script>
<style>
html {
  height: 100%;
}

body {
  height: 100%;
}

#app {
  height: 100%;
}

.ose-container {
  font-family: 'Source Sans Pro', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', 'STHeiti', 'WenQuanYi Micro Hei', SimSun, sans-serif;
}

.ose-text {
  font-weight: bold;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-color: #000;
}

.ose-text-symbol {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-color: #000;
}
.emoji {
  -webkit-text-fill-color: initial;
}
</style>
