<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="['count-down-timer']" :hidden="modelValue.timer?false:true"  style="">
      <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: 18px;`">
        <section class="ose-t_description" :style="`margin-right: 0.3em; color: ${modelValue.timer_start_word_color};`">
          {{ modelValue.timer_start_word }}
        </section>
        <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; width: 24px; color: ${modelValue.timer_hour_number_color};`">00
        </section>
        <section class="ose-t_hours_unit" :style="`margin-right: 0.3em; color: ${modelValue.timer_hour_word_color};`">
          {{modelValue.timer_hour_word}}
        </section>
        <section class="ose-t_minutes"
                 :style="`text-align: center; width: 23px; color: ${modelValue.timer_minute_number_color};`">00
        </section>
        <section class="ose-t_minutes_unit" :style="`margin-right: 0.3em; color: ${modelValue.timer_minute_word_color};`">
          {{ modelValue.timer_minute_word }}
        </section>
        <section class="ose-t_seconds"
                 :style="`text-align: center; width: 24px; 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>
        <section class="ose-t_description_end" :style="`margin-left: 0.3em; color: ${modelValue.timer_end_word_color};`">
          {{ modelValue.timer_end_word }}
        </section>
      </div>
    </article>
    <article class="ose-card-content"
             style="display: flex; flex-direction: row; overflow: hidden; max-height: 100px">
      <img v-if="!modelValue.card_img_url"
          src="@a/ose-logo2.png"
          class="ose-card-img"
          :style="`min-width: 100px; max-width: 100px;
          width: 100px; height: 100px; min-height: 100px; max-height: 100px; background-color:${modelValue.card_img_bg}`">
      <img v-if="modelValue.card_img_url"
           :src="modelValue.card_img_url"
           class="card-img"
           :style="`min-width: 100px; max-width: 100px;
          width: 100px; height: 100px; min-height: 100px; max-height: 100px; background-color:${modelValue.card_img_bg}`">

      <section class="ose-card-text" style="width: 100%;">
        <div class="ose-card-header"
             :style="`min-height: 1em; background-color: ${modelValue.card_title_bg};  position: relative;`">
          <h3
              :style="`text-align: ${modelValue.card_title_word_align} ;color: ${modelValue.card_title_word_color}; padding: 3px 15px 3px 12px; font-size: 20px; margin: 0px
              ; font-weight: bold; line-height: normal;`">
            {{ modelValue.card_title_word }}
          </h3>
          <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>
        </div>
        <section class="ose-card-text-content "
                 :style="` padding-left: 12px; height: 100%; background-color: ${modelValue.card_text_bg}; font-size: 16px;`" v-html="modelValue.card_text_content">
        </section>
      </section>
    </article>
    <article class="ose-card-footer"
             :style="`min-height: 1em; background-color: ${modelValue.card_footer_bg};`">
      <h3
          :style="`text-align: ${modelValue.card_footer_word_align}; margin: 0px; font-size: 18px; font-weight: bold;
          letter-spacing: 3px; color:${modelValue.card_footer_word_color}; padding: 5px; line-height: normal;`">
        {{ modelValue.card_footer_word }}
      </h3>
    </article>
  </div>
</template>

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

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

