<template>
  <div class="ose-card"
       style="overflow: hidden; display: flex; flex-direction: column; width: 100%; min-width: 375px; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;">
    <article class="ose-card-content"
             style="display: flex; flex-direction: row; overflow: hidden; max-height: 135px;position: relative">
      <img v-if="!modelValue.card_img_url"
           src="@a/ose-logo2.png"
           class="ose-card-img"
           :style="`width: 100%; height: auto; background-color:${modelValue.card_img_bg}`">
      <img v-if="modelValue.card_img_url"
           :src="modelValue.card_img_url"
           class="card-img"
           :style="`width: 100%; height: auto; background-color:${modelValue.card_img_bg}`">
      <div class="ose-close-card-btn"
           :style="`position: absolute; color: ${modelValue.card_cancel_btn_color}; font-style: normal; right: 12px; top: 4px; cursor: pointer;`">
        ✕
      </div>
      <article :class="['count-down-timer']" :hidden="modelValue.timer?false:true"
               :style="`position: absolute;left: 0px; right: ${modelValue.timer_x_axis}px; bottom: ${modelValue.timer_y_axis}px; background-color: ${modelValue.timer_bg};`"
      >
        <div class="ose-time_container"
             :style="`text-align: center; background-color: ${modelValue.timer_bg}; padding-top: 3px; padding-bottom: 3px;
            display: flex; justify-content: center; align-items: center; font-weight: bold; font-size: ${modelValue.timer_font_size}px; gap:${modelValue.timer_space}px`"
        >
          <section class="ose-t_days"
                   :style="`text-align: center; min-width: 24px; color: ${modelValue.timer_day_number_color};`">00
          </section>
          <section class="ose-t_days_unit" :style="`color: ${modelValue.timer_day_word_color};`">
            {{ modelValue.timer_day_word }}
          </section>
          <section class="ose-t_hours"
                   :style="`text-align: center;  color: ${modelValue.timer_hour_number_color};`">00
          </section>
          <section class="ose-t_hours_unit" :style="`color: ${modelValue.timer_hour_word_color};`">
            {{ modelValue.timer_hour_word }}
          </section>
          <section class="ose-t_minutes"
                   :style="`text-align: center; color: ${modelValue.timer_minute_number_color};`">00
          </section>
          <section class="ose-t_minutes_unit"
                   :style="`color: ${modelValue.timer_minute_word_color};`">
            {{ modelValue.timer_minute_word }}
          </section>
          <section class="ose-t_seconds"
                   :style="`text-align: center; color: ${modelValue.timer_second_number_color};`">00
          </section>
          <section class="ose-t_seconds_unit" :style="`color: ${modelValue.timer_second_word_color};`">
            {{ modelValue.timer_second_word }}
          </section>
        </div>
      </article>
    </article>
  </div>
</template>

<script setup>
import {watchEffect, ref} from "vue";

const props = defineProps(['modelValue'])
</script>

