<template>
  <el-main class="tw-h-full">
    <article class="tw-h-full tw-w-full tw-grid tw-justify-items-center">
      <div class="tw-h-full tw-space-y-8" style="min-width: 375px; max-width: 375px">
        <section class="tw-space-x-3 tw-flex tw-justify-between">
          <span class="tw-font-bold tw-text-2xl">樣式</span>
          <el-select
            :model-value="cardStyle"
            placeholder="Select"
            size="large"
            style="width: 240px"
            @update:model-value="$emit('update:cardStyle', $event)"
          >
            <el-option key="1" label="1" value="1" />
            <el-option key="2" label="2" value="2" />
          </el-select>
        </section>

        <section class="preview-card-container tw-space-y-3">
          <p class="tw-font-bold tw-text-2xl">原始圖卡</p>
          <div class="card-container">
            <ose_card v-if="data.card_style == 1" :model-value="data" />
            <ose_card2 v-else-if="data.card_style == 2" :model-value="data" />
          </div>
        </section>

        <section class="preview-hint-container tw-space-y-3">
          <p class="tw-font-bold tw-text-2xl">縮小圖卡</p>
          <div class="tw-space-y-5">
            <div class="tw-space-y-1">
              <p class="tw-font-normal tw-text-base">
                <el-icon size="15" :color="'#2f91ee'">
                  <Iphone />
                </el-icon>
                手機版
              </p>
              <div class="mini-card-container">
                <ose_mini_card
                  :timer="data.timer"
                  :minicard_transparency="data.minicard_phone_transparency"
                  :minicard_bg="data.minicard_phone_bg"
                  :minicard_word="data.minicard_phone_word"
                  :minicard_word_color="data.minicard_phone_word_color"
                  :minicard_word_align="data.minicard_phone_word_align"
                  :minicard_timer_start_word="data.minicard_phone_timer_start_word"
                  :minicard_timer_start_word_color="data.minicard_phone_timer_start_word_color"
                  :minicard_timer_end_word="data.minicard_phone_timer_end_word"
                  :minicard_timer_end_word_color="data.minicard_phone_timer_end_word_color"
                />
              </div>
            </div>

            <div class="tw-space-y-1">
              <p class="tw-font-normal tw-text-base">
                <el-icon size="15" :color="'#2f91ee'">
                  <Monitor />
                </el-icon>
                電腦版
              </p>
              <div class="mini-card-container">
                <ose_mini_card
                  :timer="data.timer"
                  :minicard_transparency="data.minicard_computer_transparency"
                  :minicard_bg="data.minicard_computer_bg"
                  :minicard_word="data.minicard_computer_word"
                  :minicard_word_color="data.minicard_computer_word_color"
                  :minicard_word_align="data.minicard_computer_word_align"
                  :minicard_timer_start_word="data.minicard_computer_timer_start_word"
                  :minicard_timer_start_word_color="data.minicard_computer_timer_start_word_color"
                  :minicard_timer_end_word="data.minicard_computer_timer_end_word"
                  :minicard_timer_end_word_color="data.minicard_computer_timer_end_word_color"
                />
              </div>
            </div>
          </div>
        </section>

        <section class="preview-dynamic-container">
          <p class="tw-font-bold tw-text-2xl tw-pb-3">實際效果呈現</p>
          <div>
            <el-row>
              <el-col :span="12" class="tw-space-x-3">
                <span>
                  <el-icon size="15" :color="'#2f91ee'">
                    <Iphone />
                  </el-icon>
                  <span class="tw-text-base tw-font-normal"> 手機版</span>
                </span>
                <el-switch
                  :model-value="dynamicPhoneVisible"
                  inline-prompt
                  active-text="是"
                  inactive-text="否"
                  :active-value="true"
                  :inactive-value="false"
                  @update:model-value="$emit('update:dynamicPhoneVisible', $event)"
                />
              </el-col>
              <el-col :span="12" class="tw-space-x-3">
                <span>
                  <el-icon size="15" :color="'#2f91ee'">
                    <Monitor />
                  </el-icon>
                  <span class="tw-text-base tw-font-normal"> 電腦版</span>
                </span>
                <el-switch
                  :model-value="dynamicComputerVisible"
                  inline-prompt
                  active-text="是"
                  inactive-text="否"
                  :active-value="true"
                  :inactive-value="false"
                  @update:model-value="$emit('update:dynamicComputerVisible', $event)"
                />
              </el-col>
            </el-row>
          </div>
        </section>
      </div>
    </article>
  </el-main>
</template>

<script setup>
import ose_card from "@/module/ose-card/components/card.vue"
import ose_card2 from "@/module/ose-card/components/card2.vue"
import ose_mini_card from "@/module/ose-card/components/mini-card.vue"

defineProps({
  data: {
    type: Object,
    required: true,
  },
  cardStyle: {
    type: [String, Number],
    default: 1,
  },
  dynamicPhoneVisible: {
    type: Boolean,
    default: false,
  },
  dynamicComputerVisible: {
    type: Boolean,
    default: false,
  },
})

defineEmits([
  "update:cardStyle",
  "update:dynamicPhoneVisible",
  "update:dynamicComputerVisible",
])
</script>
