<template>
  <div v-show="dynamicPhoneVisible" class="dynamic_phone_container">
    <div class="mini_dynamic_phone_card_container"
         :style="`min-width: 375px; width: 375px; position: fixed; z-index: 9999;  top: ${data.phone_minicard_position}px;left:50%; margin:0px 0px 0px -188px;  display: none;`">
      <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 class="dynamic_phone_card_container"
         :style="`min-width:375px;width:375px;position: fixed;z-index: 9999;top:${data.phone_fixed_card_position}px;left:50%;margin:0px 0px 0px -188px;`">
      <ose_card v-if="data.card_style == 1" v-model="data"/>
      <ose_card2 v-else-if="data.card_style == 2" v-model="data"/>
    </div>
    <div class="page_dynamic_phone_card_container"
         :style="`min-width:375px;width:100%;position: relative;z-index: 999;top:${data.phone_card_position}px;display:none`">
      <ose_card v-if="data.card_style == 1" v-model="data"/>
      <ose_card2 v-else-if="data.card_style == 2" v-model="data"/>
    </div>
  </div>
  <div v-show="dynamicComputerVisible" class="dynamic_computer_container">
    <div class="mini_dynamic_computer_card_container"
         style="min-width: 375px; width: 375px; position: fixed; z-index: 999; left: 50%; bottom: 0px; margin: 0px 10px 10px -186px; text-align: center;  cursor: pointer;display: none;">
      <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 class="dynamic_computer_card_container"
         :style="`min-width:375px;width:375px;position:
         fixed;z-index: 999;${data.computer_card_position}`">
      <ose_card v-if="data.card_style == 1" v-model="data"/>
      <ose_card2 v-else-if="data.card_style == 2" v-model="data"/>
    </div>
  </div>
  <el-main v-loading="pageLoading" class="tw-h-full">
    <el-row class="tw-h-full">
      <!--      setting-->
      <el-col :span="16" class="tw-h-full">
        <el-card shadow="never" class="tw-h-full" :body-style="{height:'89.5%'}">
          <template #default>
            <el-tabs stretch class="tw-h-full ose-setting-tabs">
              <el-tab-pane label="基本設定" class="tw-h-full">
                <el-main class="tw-space-y-5 tw-text-base tw-font-light tw-h-full">
                  <!--          圖卡名稱-->
                  <el-row class="tw-items-center">
                    <el-col>
                      <p class="">圖卡名稱</p>
                      <el-input
                          :input-style="{fontSize:'medium'}"
                          size="large"
                          v-model="data.card_name"
                          placeholder="OSE推廣圖卡"/>
                    </el-col>
                  </el-row>

                  <!--          Landing Page連結-->
                  <el-row class="tw-items-center">
                    <el-col>
                      <p class="">Landing Page連結</p>
                      <el-input
                          :input-style="{fontSize:'medium'}"
                          size="large"
                          v-model="data.landing_page"
                          placeholder="https://marketing.ose.tw"/>
                    </el-col>
                  </el-row>

                  <!--          圖卡代碼-->
                  <el-row class="tw-items-center">
                    <el-col>
                      <p class="">圖卡代碼&ensp;&ensp;
                        <el-button plain type="primary" class=""
                                   @click="openCouponDrawer">搭配優惠代碼功能說明
                        </el-button>
                      </p>

                      <el-input
                          class="tw-pt-2"
                          :input-style="{fontSize:'medium'}"
                          size="large"
                          v-model="data.card_code"
                          placeholder="card1"/>
                    </el-col>
                  </el-row>

                  <!--          開始 結束-->
                  <el-row :gutter="23" class="tw-items-center">
                    <el-col :span="12">
                      <p class="">開始</p>
                      <el-date-picker
                          :input-style="{fontSize:'medium'}"
                          v-model="data.start_date"
                          type="datetime"
                          format="YYYY-MM-DD HH:mm:ss"
                          placeholder="請選擇開始時間日期"
                          size="large"
                          style="width: 100%"

                      />
                    </el-col>
                    <el-col :span="12">
                      <p class="">結束</p>
                      <el-date-picker
                          :input-style="{fontSize:'medium'}"
                          v-model="data.end_date"
                          type="datetime"
                          format="YYYY-MM-DD HH:mm:ss"
                          placeholder="請選擇結束時間日期"
                          size="large"
                          style="width: 100%"

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

                  <!--          倒數計時器 輪迴天數-->
                  <el-row :gutter="23" class="tw-items-center">
                    <el-col :span="12">
                      <p class="">倒數計時器</p>
                      <el-switch
                          v-model="data.timer"
                          inline-prompt
                          active-text="是"
                          inactive-text="否"
                          :active-value="true"
                          :inactive-value="false"
                      />
                    </el-col>
                    <el-col :span="12">
                      <p class="">過期後指定輪迴天數</p>
                      <el-input
                          :input-style="{fontSize:'medium'}"
                          size="large"
                          type="number"
                          v-model="data.carousel_days"
                          min="0"
                      />
                    </el-col>
                  </el-row>
                </el-main>
              </el-tab-pane>

              <el-tab-pane label="圖卡位置" class="tw-h-full">
                <el-main class="tw-h-full tw-space-y-10 tw-text-base tw-font-light">
                  <!--                  手機版-->
                  <section class="tw-space-y-5">
                    <p>
                      <el-icon size="15" :color="'#2f91ee'">
                        <Iphone/>
                      </el-icon>
                      <span class="tw-text-xl tw-font-bold"> 手機版</span>
                    </p>

                    <!--                  原始圖卡位置往下位移-->
                    <el-row class="tw-items-center">
                      <el-col :span="8">
                        原始圖卡位置往下位移
                      </el-col>
                      <el-col :span="16">
                        <el-input
                            :input-style="{fontSize:'medium'}"
                            size="large"
                            v-model="data.phone_card_position"
                        />
                      </el-col>
                    </el-row>

                    <!--                  浮動原始圖卡位置往下位移-->
                    <el-row class="tw-items-center">
                      <el-col :span="8">
                        浮動原始圖卡位置往下位移
                      </el-col>
                      <el-col :span="16">
                        <el-input
                            :input-style="{fontSize:'medium'}"
                            size="large"
                            v-model="data.phone_fixed_card_position"
                        />
                      </el-col>
                    </el-row>

                    <!--                  縮小圖卡位置往下位移-->
                    <el-row class="tw-items-center">
                      <el-col :span="8">
                        縮小圖卡位置往下位移
                      </el-col>
                      <el-col :span="16">
                        <el-input
                            :input-style="{fontSize:'medium'}"
                            size="large"
                            v-model="data.phone_minicard_position"
                        />
                      </el-col>
                    </el-row>

                  </section>

                  <!--                  電腦版-->
                  <section class="tw-space-y-5">
                    <p>
                      <el-icon size="15" :color="'#2f91ee'">
                        <Monitor/>
                      </el-icon>
                      <span class="tw-text-xl tw-font-bold"> 電腦版</span>
                    </p>

                    <!--                  原始圖卡位置-->
                    <el-row class="tw-items-center">
                      <el-col :span="5">
                        原始圖卡位置
                      </el-col>
                      <el-col :span="16">
                        <el-radio-group v-model="data.computer_card_position" size="default">
                          <el-radio label="left:0px;top:0px;margin:10px 0px 0px 10px;">左上</el-radio>
                          <el-radio label="right:0px;top:0px;margin:10px 10px 0px 0px;">右上</el-radio>
                          <el-radio label="left:0px;bottom:0px;margin:0px 0px 10px 10px;">左下</el-radio>
                          <el-radio label="right:0px;bottom:0px;margin:0px 10px 10px 0px;">右下</el-radio>
                        </el-radio-group>
                      </el-col>
                    </el-row>

                  </section>

                </el-main>
              </el-tab-pane>
              <div v-if="data.card_style == 1" class="tw-h-full">
                <el-tab-pane label="倒數計時器" class="tw-h-full">
                  <el-main class="tw-h-full tw-space-y-10 tw-text-base tw-font-light">
                    <!--                  統一調色-->
                    <el-row class="tw-items-center">
                      <el-col :span="4">
                        統一調色
                      </el-col>
                      <el-col :span="2">
                        <el-color-picker v-model="unified_color" show-alpha
                                         color-format="hex"
                                         @active-change="colorChange(['timer_start_word_color','timer_end_word_color','timer_day_word_color','timer_day_number_color','timer_hour_word_color','timer_hour_number_color','timer_minute_word_color','timer_minute_number_color','timer_second_word_color','timer_second_number_color'],$event)"/>
                      </el-col>
                    </el-row>

                    <!--                  描述文字 Group-->
                    <section class="tw-space-y-5">
                      <p class="tw-text-xl tw-font-bold">描述文字</p>

                      <!--                  開頭文字顏色-->
                      <el-row class="tw-items-center">
                        <el-col :span="4">
                          開頭文字顏色
                        </el-col>
                        <el-col :span="2">
                          <el-color-picker v-model="data.timer_start_word_color" show-alpha color-format="hex"
                                           @active-change="colorChange('timer_start_word_color',$event)"/>
                        </el-col>
                      </el-row>

                      <!--                  開頭文字-->
                      <el-row class="tw-items-center">
                        <el-col :span="4">
                          開頭文字
                        </el-col>
                        <el-col :span="20">
                          <el-input
                              :input-style="{fontSize:'medium'}"
                              size="large"
                              v-model="data.timer_start_word"
                          />
                        </el-col>
                      </el-row>

                      <!--                  結尾文字顏色-->
                      <el-row class="tw-items-center">
                        <el-col :span="4">
                          結尾文字顏色
                        </el-col>
                        <el-col :span="2">
                          <el-color-picker v-model="data.timer_end_word_color" show-alpha color-format="hex"
                                           @active-change="colorChange('timer_end_word_color',$event)"/>
                        </el-col>
                      </el-row>

                      <!--                  結尾文字-->
                      <el-row class="tw-items-center">
                        <el-col :span="4">
                          結尾文字
                        </el-col>
                        <el-col :span="20">
                          <el-input
                              :input-style="{fontSize:'medium'}"
                              size="large"
                              v-model="data.timer_end_word"
                          />
                        </el-col>
                      </el-row>
                    </section>

                    <!--                  樣式設定 Group-->
                    <section class="tw-space-y-5">
                      <p class="tw-text-xl tw-font-bold">樣式設定</p>

                      <!--                  背景顏色-->
                      <el-row class="tw-items-center">
                        <el-col :span="4">
                          背景顏色
                        </el-col>
                        <el-col :span="2">
                          <el-color-picker v-model="data.timer_bg" show-alpha color-format="hex"
                                           @active-change="colorChange('timer_bg',$event)"/>
                        </el-col>
                      </el-row>
                    </section>

                    <!--                  日設定 Group-->
                    <section class="tw-space-y-5">
                      <p class="tw-text-xl tw-font-bold">日設定</p>

                      <!--                  單位文字 / 單位顏色 / 數字顏色-->
                      <div>
                        <el-row class="tw-items-center">
                          <el-col :span="4">
                            單位文字
                          </el-col>
                          <el-col :span="7" class="tw-pr-12">
                            <el-input
                                :input-style="{fontSize:'medium'}"
                                size="large"
                                v-model="data.timer_day_word"
                            />
                          </el-col>

                          <el-col :span="3">
                            單位顏色
                          </el-col>
                          <el-col :span="3">
                            <el-color-picker v-model="data.timer_day_word_color" show-alpha color-format="hex"
                                             @active-change="colorChange('timer_day_word_color',$event)"/>
                          </el-col>

                          <el-col :span="3">
                            數字顏色
                          </el-col>
                          <el-col :span="3">
                            <el-color-picker v-model="data.timer_day_number_color" show-alpha color-format="hex"
                                             @active-change="colorChange('timer_day_number_color',$event)"/>
                          </el-col>

                        </el-row>
                      </div>
                    </section>

                    <!--                  時設定 Group-->
                    <section class="tw-space-y-5">
                      <p class="tw-text-xl tw-font-bold">時設定</p>

                      <!--                  單位文字 / 單位顏色 / 數字顏色-->
                      <div>
                        <el-row class="tw-items-center">
                          <el-col :span="4">
                            單位文字
                          </el-col>
                          <el-col :span="7" class="tw-pr-12">
                            <el-input
                                :input-style="{fontSize:'medium'}"
                                size="large"
                                v-model="data.timer_hour_word"
                            />
                          </el-col>

                          <el-col :span="3">
                            單位顏色
                          </el-col>
                          <el-col :span="3">
                            <el-color-picker v-model="data.timer_hour_word_color" show-alpha color-format="hex"
                                             @active-change="colorChange('timer_hour_word_color',$event)"/>
                          </el-col>

                          <el-col :span="3">
                            數字顏色
                          </el-col>
                          <el-col :span="3">
                            <el-color-picker v-model="data.timer_hour_number_color" show-alpha color-format="hex"
                                             @active-change="colorChange('timer_hour_number_color',$event)"/>
                          </el-col>

                        </el-row>
                      </div>
                    </section>

                    <!--                  分設定 Group-->
                    <section class="tw-space-y-5">
                      <p class="tw-text-xl tw-font-bold">分設定</p>
                      <!--                  單位文字 / 單位顏色 / 數字顏色-->
                      <div>
                        <el-row class="tw-items-center">
                          <el-col :span="4">
                            單位文字
                          </el-col>
                          <el-col :span="7" class="tw-pr-12">
                            <el-input
                                :input-style="{fontSize:'medium'}"
                                size="large"
                                v-model="data.timer_minute_word"
                            />
                          </el-col>

                          <el-col :span="3">
                            單位顏色
                          </el-col>
                          <el-col :span="3">
                            <el-color-picker v-model="data.timer_minute_word_color" show-alpha color-format="hex"
                                             @active-change="colorChange('timer_minute_number_color',$event)"/>
                          </el-col>

                          <el-col :span="3">
                            數字顏色
                          </el-col>
                          <el-col :span="3">
                            <el-color-picker v-model="data.timer_minute_number_color" show-alpha color-format="hex"
                                             @active-change="colorChange('timer_minute_number_color',$event)"/>
                          </el-col>

                        </el-row>
                      </div>
                    </section>

                    <!--                  秒設定 Group-->
                    <section class="tw-space-y-5">
                      <p class="tw-text-xl tw-font-bold">秒設定</p>
                      <!--                  單位文字 / 單位顏色 / 數字顏色-->
                      <div>
                        <el-row class="tw-items-center">
                          <el-col :span="4">
                            單位文字
                          </el-col>
                          <el-col :span="7" class="tw-pr-12">
                            <el-input
                                :input-style="{fontSize:'medium'}"
                                size="large"
                                v-model="data.timer_second_word"
                            />
                          </el-col>

                          <el-col :span="3">
                            單位顏色
                          </el-col>
                          <el-col :span="3">
                            <el-color-picker v-model="data.timer_second_word_color" show-alpha color-format="hex"
                                             @active-change="colorChange('timer_second_word_color',$event)"/>
                          </el-col>

                          <el-col :span="3">
                            數字顏色
                          </el-col>
                          <el-col :span="3">
                            <el-color-picker v-model="data.timer_second_number_color" show-alpha color-format="hex"
                                             @active-change="colorChange('timer_second_number_color',$event)"/>
                          </el-col>

                        </el-row>
                      </div>
                    </section>


                  </el-main>
                </el-tab-pane>

                <el-tab-pane label="原始圖卡樣式" class="tw-h-full">
                  <el-main class="tw-h-full tw-space-y-10 tw-text-base tw-font-light">
                    <section class="tw-space-y-5">
                      <el-row class="tw-items-center">
                        <el-col :span="3">
                          叉叉顏色
                        </el-col>
                        <el-col :span="2">
                          <el-color-picker v-model="data.card_cancel_btn_color" show-alpha color-format="hex"
                                           @active-change="colorChange('card_cancel_btn_color',$event)"/>
                        </el-col>
                      </el-row>
                    </section>

                    <!--圖片設定-->
                    <section class="tw-space-y-5">
                      <p>
                        <span class="tw-text-xl tw-font-bold">圖片設定</span>
                      </p>

                      <!--                  上傳圖片 / 背景顏色 -->
                      <div>
                        <el-row class="tw-items-center">
                          <el-col :span="3">
                            上傳圖片
                          </el-col>
                          <el-col :span="6" class="tw-pr-10">
                            <el-button type="primary" size="default" :color="'#2f91ee'" @click="openImageDrawer"
                                       plain>
                              選擇 / 上傳圖片
                            </el-button>
                          </el-col>

                          <el-col :span="3">
                            背景顏色
                          </el-col>
                          <el-col :span="2">
                            <el-color-picker v-model="data.card_img_bg" show-alpha color-format="hex"
                                             @active-change="colorChange('card_img_bg',$event)"/>
                          </el-col>
                        </el-row>
                      </div>

                    </section>

                    <!--標題設定-->
                    <section class="tw-space-y-5">
                      <p>
                        <span class="tw-text-xl tw-font-bold">標題設定</span>
                      </p>

                      <!--          文字內容-->
                      <el-row class="tw-items-center">
                        <el-col :span="3">
                          文字內容
                        </el-col>
                        <el-col :span="21">
                          <el-input
                              :input-style="{fontSize:'medium'}"
                              size="large"
                              v-model="data.card_title_word"
                          />
                        </el-col>
                      </el-row>

                      <!--                  文字顏色 / 背景顏色 / 文字位置-->
                      <div>
                        <el-row class="tw-items-center">
                          <el-col :span="3">
                            文字顏色
                          </el-col>
                          <el-col :span="4">
                            <el-color-picker v-model="data.card_title_word_color" show-alpha color-format="hex"
                                             @active-change="colorChange('card_title_word_color',$event)"/>
                          </el-col>

                          <el-col :span="3">
                            背景顏色
                          </el-col>
                          <el-col :span="4">
                            <el-color-picker v-model="data.card_title_bg" show-alpha color-format="hex"
                                             @active-change="colorChange('card_title_bg',$event)"/>
                          </el-col>

                          <el-col :span="3">
                            文字位置
                          </el-col>
                          <el-col :span="5">
                            <el-radio-group v-model="data.card_title_word_align">
                              <el-radio-button label="left">
                                <template #default>
                                  <el-icon>
                                    <CaretLeft/>
                                  </el-icon>
                                </template>
                              </el-radio-button>
                              <el-radio-button label="center">
                                <template #default>
                                  <el-icon>
                                    <DCaret/>
                                  </el-icon>
                                </template>
                              </el-radio-button>
                              <el-radio-button label="right">
                                <template #default>
                                  <el-icon>
                                    <CaretRight/>
                                  </el-icon>
                                </template>
                              </el-radio-button>
                            </el-radio-group>
                          </el-col>
                        </el-row>
                      </div>

                    </section>

                    <!--行銷文字設定-->
                    <section class="tw-space-y-5">
                      <p>
                        <span class="tw-text-xl tw-font-bold">行銷文字設定</span>
                      </p>

                      <!--          文字內容-->
                      <el-row class="tw-items-center">
                        <el-col :span="3">
                          文字內容
                        </el-col>
                        <el-col :span="21">
                          <el-input
                              :input-style="{fontSize:'medium'}"
                              size="large"
                              v-model="data.card_footer_word"
                          />
                        </el-col>
                      </el-row>

                      <!--                  文字顏色 / 背景顏色 / 文字位置-->
                      <div>
                        <el-row class="tw-items-center">
                          <el-col :span="3">
                            文字顏色
                          </el-col>
                          <el-col :span="4">
                            <el-color-picker v-model="data.card_footer_word_color" show-alpha
                                             color-format="hex"
                                             @active-change="colorChange('card_footer_word_color',$event)"/>
                          </el-col>

                          <el-col :span="3">
                            背景顏色
                          </el-col>
                          <el-col :span="4">
                            <el-color-picker v-model="data.card_footer_bg" show-alpha
                                             color-format="hex" @active-change="colorChange('card_footer_bg',$event)"/>
                          </el-col>

                          <el-col :span="3">
                            文字位置
                          </el-col>
                          <el-col :span="5">
                            <el-radio-group v-model="data.card_footer_word_align">
                              <el-radio-button label="left">
                                <template #default>
                                  <el-icon>
                                    <CaretLeft/>
                                  </el-icon>
                                </template>
                              </el-radio-button>
                              <el-radio-button label="center">
                                <template #default>
                                  <el-icon>
                                    <DCaret/>
                                  </el-icon>
                                </template>
                              </el-radio-button>
                              <el-radio-button label="right">
                                <template #default>
                                  <el-icon>
                                    <CaretRight/>
                                  </el-icon>
                                </template>
                              </el-radio-button>
                            </el-radio-group>
                          </el-col>
                        </el-row>
                      </div>

                    </section>

                    <!--內文設定-->
                    <section class="tw-space-y-5">
                      <p>
                        <span class="tw-text-xl tw-font-bold">內文設定</span>
                      </p>

                      <!--                  背景顏色 -->
                      <div>
                        <el-row class="tw-items-center">
                          <el-col :span="3">
                            背景顏色
                          </el-col>
                          <el-col :span="4">
                            <el-color-picker v-model="data.card_footer_bg" show-alpha
                                             color-format="hex" @active-change="colorChange('card_footer_bg',$event)"/>
                          </el-col>
                        </el-row>
                      </div>
                      <Tinymce v-model="data.card_text_content"/>
                    </section>

                  </el-main>
                </el-tab-pane>
                <el-tab-pane label="縮小圖卡樣式" class="tw-h-full">
                  <el-main class="tw-h-full tw-space-y-10 tw-text-base tw-font-light">
                    <!--                  手機版-->
                    <section class="tw-space-y-5">
                      <p>
                        <el-icon size="15" :color="'#2f91ee'">
                          <Iphone/>
                        </el-icon>
                        <span class="tw-text-xl tw-font-bold"> 手機版</span>
                      </p>

                      <!--                  文字內容-->
                      <el-row class="tw-items-center">
                        <el-col :span="3">
                          文字內容
                        </el-col>
                        <el-col :span="21">
                          <el-input
                              :input-style="{fontSize:'medium'}"
                              size="large"
                              v-model="data.minicard_phone_word"
                          />
                        </el-col>
                      </el-row>

                      <!--                  透明度-->
                      <el-row class="tw-items-center">
                        <el-col :span="3">
                          透明度
                        </el-col>
                        <el-col :span="21">
                          <el-input
                              :input-style="{fontSize:'medium'}"
                              size="large"
                              placeholder="填0 ~ 1 (eg 0.5)"
                              v-model="data.minicard_phone_transparency"
                          />
                        </el-col>
                      </el-row>

                      <!--                  文字顏色 / 背景顏色 / 文字位置-->
                      <el-row class="tw-items-center">
                        <el-col :span="3">
                          文字顏色
                        </el-col>
                        <el-col :span="4">
                          <el-color-picker v-model="data.minicard_phone_word_color" show-alpha
                                           color-format="hex"
                                           @active-change="colorChange(minicard_phone_word_color,$event)"/>
                        </el-col>

                        <el-col :span="3">
                          背景顏色
                        </el-col>
                        <el-col :span="4">
                          <el-color-picker v-model="data.minicard_phone_bg" show-alpha
                                           color-format="hex" @active-change="colorChange('minicard_phone_bg',$event)"/>
                        </el-col>

                        <el-col :span="3">
                          文字位置
                        </el-col>
                        <el-col :span="5">
                          <el-radio-group v-model="data.minicard_phone_word_align">
                            <el-radio-button label="left">
                              <template #default>
                                <el-icon>
                                  <CaretLeft/>
                                </el-icon>
                              </template>
                            </el-radio-button>
                            <el-radio-button label="center">
                              <template #default>
                                <el-icon>
                                  <DCaret/>
                                </el-icon>
                              </template>
                            </el-radio-button>
                            <el-radio-button label="right">
                              <template #default>
                                <el-icon>
                                  <CaretRight/>
                                </el-icon>
                              </template>
                            </el-radio-button>
                          </el-radio-group>
                        </el-col>
                      </el-row>
                    </section>

                    <!--                  手機縮小倒數計時器設定-->
                    <section class="tw-space-y-4">
                      <p>
                        <span class="tw-text-xl tw-font-bold">手機縮小倒數計時器設定</span>
                      </p>

                      <!--                  開頭文字-->
                      <el-row class="tw-items-center">
                        <el-col :span="3">
                          開頭文字
                        </el-col>
                        <el-col :span="21">
                          <el-input
                              :input-style="{fontSize:'medium'}"
                              size="large"
                              v-model="data.minicard_phone_timer_start_word"
                          />
                        </el-col>
                      </el-row>

                      <!--                  開頭文字顏色-->
                      <el-row class="tw-items-center">
                        <el-col :span="4">
                          開頭文字顏色
                        </el-col>
                        <el-col :span="4">
                          <el-color-picker v-model="data.minicard_phone_timer_start_word_color" show-alpha
                                           color-format="hex"
                                           @active-change="colorChange('minicard_phone_timer_start_word_color',$event)"/>
                        </el-col>

                      </el-row>

                      <!--                  結尾文字-->
                      <el-row class="tw-items-center">
                        <el-col :span="3">
                          結尾文字
                        </el-col>
                        <el-col :span="21">
                          <el-input
                              :input-style="{fontSize:'medium'}"
                              size="large"
                              v-model="data.minicard_phone_timer_end_word"
                          />
                        </el-col>
                      </el-row>

                      <!--                  結尾文字顏色-->
                      <el-row class="tw-items-center">
                        <el-col :span="4">
                          結尾文字顏色
                        </el-col>
                        <el-col :span="4">
                          <el-color-picker v-model="data.minicard_phone_timer_end_word_color" show-alpha
                                           color-format="hex"
                                           @active-change="colorChange('minicard_phone_timer_end_word_color',$event)"/>
                        </el-col>

                      </el-row>
                    </section>

                    <!--                  電腦版-->
                    <section class="tw-space-y-5">
                      <p>
                        <el-icon size="15" :color="'#2f91ee'">
                          <Monitor/>
                        </el-icon>
                        <span class="tw-text-xl tw-font-bold"> 電腦版</span>
                      </p>
                      <!--                  文字內容-->
                      <el-row class="tw-items-center">
                        <el-col :span="3">
                          文字內容
                        </el-col>
                        <el-col :span="21">
                          <el-input
                              :input-style="{fontSize:'medium'}"
                              size="large"
                              v-model="data.minicard_computer_word"
                          />
                        </el-col>
                      </el-row>

                      <!--                  透明度-->
                      <el-row class="tw-items-center">
                        <el-col :span="3">
                          透明度
                        </el-col>
                        <el-col :span="21">
                          <el-input
                              :input-style="{fontSize:'medium'}"
                              size="large"
                              placeholder="填0 ~ 1 (eg 0.5)"
                              v-model="data.minicard_computer_transparency"
                          />
                        </el-col>
                      </el-row>

                      <!--                  文字顏色 / 背景顏色 / 文字位置-->
                      <el-row class="tw-items-center">
                        <el-col :span="3">
                          文字顏色
                        </el-col>
                        <el-col :span="4">
                          <el-color-picker v-model="data.minicard_computer_word_color" show-alpha
                                           color-format="hex"
                                           @active-change="colorChange('minicard_computer_word_color',$event)"/>
                        </el-col>

                        <el-col :span="3">
                          背景顏色
                        </el-col>
                        <el-col :span="4">
                          <el-color-picker v-model="data.minicard_computer_bg" show-alpha
                                           color-format="hex"
                                           @active-change="colorChange('minicard_computer_bg',$event)"/>
                        </el-col>

                        <el-col :span="3">
                          文字位置
                        </el-col>
                        <el-col :span="5">
                          <el-radio-group v-model="data.minicard_computer_word_align">
                            <el-radio-button label="left">
                              <template #default>
                                <el-icon>
                                  <CaretLeft/>
                                </el-icon>
                              </template>
                            </el-radio-button>
                            <el-radio-button label="center">
                              <template #default>
                                <el-icon>
                                  <DCaret/>
                                </el-icon>
                              </template>
                            </el-radio-button>
                            <el-radio-button label="right">
                              <template #default>
                                <el-icon>
                                  <CaretRight/>
                                </el-icon>
                              </template>
                            </el-radio-button>
                          </el-radio-group>
                        </el-col>
                      </el-row>
                    </section>

                    <!--                  電腦縮小倒數計時器設定-->
                    <section class="tw-space-y-4">
                      <p>
                        <span class="tw-text-xl tw-font-bold">電腦縮小倒數計時器設定</span>
                      </p>

                      <!--                  開頭文字-->
                      <el-row class="tw-items-center">
                        <el-col :span="3">
                          開頭文字
                        </el-col>
                        <el-col :span="21">
                          <el-input
                              :input-style="{fontSize:'medium'}"
                              size="large"
                              v-model="data.minicard_computer_timer_start_word"
                          />
                        </el-col>
                      </el-row>

                      <!--                  開頭文字顏色-->
                      <el-row class="tw-items-center">
                        <el-col :span="4">
                          開頭文字顏色
                        </el-col>
                        <el-col :span="4">
                          <el-color-picker v-model="data.minicard_computer_timer_start_word_color" show-alpha
                                           color-format="hex"
                                           @active-change="colorChange('minicard_computer_timer_start_word_color',$event)"/>
                        </el-col>

                      </el-row>

                      <!--                  結尾文字-->
                      <el-row class="tw-items-center">
                        <el-col :span="3">
                          結尾文字
                        </el-col>
                        <el-col :span="21">
                          <el-input
                              :input-style="{fontSize:'medium'}"
                              size="large"
                              v-model="data.minicard_computer_timer_end_word"
                          />
                        </el-col>
                      </el-row>

                      <!--                  結尾文字顏色-->
                      <el-row class="tw-items-center">
                        <el-col :span="4">
                          結尾文字顏色
                        </el-col>
                        <el-col :span="4">
                          <el-color-picker v-model="data.minicard_computer_timer_end_word_color" show-alpha
                                           color-format="hex"
                                           @active-change="colorChange('minicard_computer_timer_end_word_color',$event)"/>
                        </el-col>

                      </el-row>
                    </section>

                  </el-main>
                </el-tab-pane>

              </div>
              <div v-else-if="data.card_style == 2" class="tw-h-full">
                <el-tab-pane label="倒數計時器" class="tw-h-full">
                  <el-main class="tw-h-full tw-space-y-10 tw-text-base tw-font-light">
                    <!--                  統一調色-->
                    <el-row class="tw-items-center">
                      <el-col :span="4">
                        統一調色
                      </el-col>
                      <el-col :span="2">
                        <el-color-picker v-model="unified_color" show-alpha
                                         color-format="hex"
                                         @active-change="colorChange(['timer_start_word_color','timer_end_word_color','timer_day_word_color','timer_day_number_color','timer_hour_word_color','timer_hour_number_color','timer_minute_word_color','timer_minute_number_color','timer_second_word_color','timer_second_number_color'],$event)"/>
                      </el-col>
                    </el-row>

                    <!--                  樣式設定 Group-->
                    <section class="tw-space-y-5">
                      <p class="tw-text-xl tw-font-bold">樣式設定</p>

                      <!--                  背景顏色/字體大小-->
                      <el-row class="tw-items-center">
                        <el-col :span="4">
                          背景顏色
                        </el-col>
                        <el-col :span="3">
                          <el-color-picker v-model="data.timer_bg" show-alpha color-format="hex"
                                           @active-change="colorChange('timer_bg',$event)"/>
                        </el-col>

                        <el-col :span="3">
                          字體大小
                        </el-col>
                        <el-col :span="10">
                          <el-slider v-model="data.timer_font_size" :max="200"/>
                        </el-col>
                      </el-row>
                      <!--                  Ｙ軸位置調整-->
                      <el-row class="tw-items-center">
                        <el-col :span="4">
                          Ｙ軸位置調整
                        </el-col>
                        <el-col :span="20">
                          <el-slider v-model="data.timer_y_axis" :max="200"/>
                        </el-col>
                      </el-row>

                      <!--                  X軸位置調整-->
                      <el-row class="tw-items-center">
                        <el-col :span="4">
                          X軸位置調整
                        </el-col>
                        <el-col :span="20">
                          <el-slider v-model="data.timer_x_axis" :min="-1000" :max="1000"/>
                        </el-col>
                      </el-row>
                      <!--                  間距調整-->
                      <el-row class="tw-items-center">
                        <el-col :span="4">
                          間距調整
                        </el-col>
                        <el-col :span="20">
                          <el-slider v-model="data.timer_space" />
                        </el-col>
                      </el-row>
                    </section>

                    <!--                  日設定 Group-->
                    <section class="tw-space-y-5">
                      <p class="tw-text-xl tw-font-bold">日設定</p>

                      <!--                  單位文字 / 單位顏色 / 數字顏色-->
                      <div>
                        <el-row class="tw-items-center">
                          <el-col :span="4">
                            單位文字
                          </el-col>
                          <el-col :span="7" class="tw-pr-12">
                            <el-input
                                :input-style="{fontSize:'medium'}"
                                size="large"
                                v-model="data.timer_day_word"
                            />
                          </el-col>

                          <el-col :span="3">
                            單位顏色
                          </el-col>
                          <el-col :span="3">
                            <el-color-picker v-model="data.timer_day_word_color" show-alpha color-format="hex"
                                             @active-change="colorChange('timer_day_word_color',$event)"/>
                          </el-col>

                          <el-col :span="3">
                            數字顏色
                          </el-col>
                          <el-col :span="3">
                            <el-color-picker v-model="data.timer_day_number_color" show-alpha color-format="hex"
                                             @active-change="colorChange('timer_day_number_color',$event)"/>
                          </el-col>

                        </el-row>
                      </div>
                    </section>

                    <!--                  時設定 Group-->
                    <section class="tw-space-y-5">
                      <p class="tw-text-xl tw-font-bold">時設定</p>

                      <!--                  單位文字 / 單位顏色 / 數字顏色-->
                      <div>
                        <el-row class="tw-items-center">
                          <el-col :span="4">
                            單位文字
                          </el-col>
                          <el-col :span="7" class="tw-pr-12">
                            <el-input
                                :input-style="{fontSize:'medium'}"
                                size="large"
                                v-model="data.timer_hour_word"
                            />
                          </el-col>

                          <el-col :span="3">
                            單位顏色
                          </el-col>
                          <el-col :span="3">
                            <el-color-picker v-model="data.timer_hour_word_color" show-alpha color-format="hex"
                                             @active-change="colorChange('timer_hour_word_color',$event)"/>
                          </el-col>

                          <el-col :span="3">
                            數字顏色
                          </el-col>
                          <el-col :span="3">
                            <el-color-picker v-model="data.timer_hour_number_color" show-alpha color-format="hex"
                                             @active-change="colorChange('timer_hour_number_color',$event)"/>
                          </el-col>

                        </el-row>
                      </div>
                    </section>

                    <!--                  分設定 Group-->
                    <section class="tw-space-y-5">
                      <p class="tw-text-xl tw-font-bold">分設定</p>
                      <!--                  單位文字 / 單位顏色 / 數字顏色-->
                      <div>
                        <el-row class="tw-items-center">
                          <el-col :span="4">
                            單位文字
                          </el-col>
                          <el-col :span="7" class="tw-pr-12">
                            <el-input
                                :input-style="{fontSize:'medium'}"
                                size="large"
                                v-model="data.timer_minute_word"
                            />
                          </el-col>

                          <el-col :span="3">
                            單位顏色
                          </el-col>
                          <el-col :span="3">
                            <el-color-picker v-model="data.timer_minute_word_color" show-alpha color-format="hex"
                                             @active-change="colorChange('timer_minute_number_color',$event)"/>
                          </el-col>

                          <el-col :span="3">
                            數字顏色
                          </el-col>
                          <el-col :span="3">
                            <el-color-picker v-model="data.timer_minute_number_color" show-alpha color-format="hex"
                                             @active-change="colorChange('timer_minute_number_color',$event)"/>
                          </el-col>

                        </el-row>
                      </div>
                    </section>

                    <!--                  秒設定 Group-->
                    <section class="tw-space-y-5">
                      <p class="tw-text-xl tw-font-bold">秒設定</p>
                      <!--                  單位文字 / 單位顏色 / 數字顏色-->
                      <div>
                        <el-row class="tw-items-center">
                          <el-col :span="4">
                            單位文字
                          </el-col>
                          <el-col :span="7" class="tw-pr-12">
                            <el-input
                                :input-style="{fontSize:'medium'}"
                                size="large"
                                v-model="data.timer_second_word"
                            />
                          </el-col>

                          <el-col :span="3">
                            單位顏色
                          </el-col>
                          <el-col :span="3">
                            <el-color-picker v-model="data.timer_second_word_color" show-alpha color-format="hex"
                                             @active-change="colorChange('timer_second_word_color',$event)"/>
                          </el-col>

                          <el-col :span="3">
                            數字顏色
                          </el-col>
                          <el-col :span="3">
                            <el-color-picker v-model="data.timer_second_number_color" show-alpha color-format="hex"
                                             @active-change="colorChange('timer_second_number_color',$event)"/>
                          </el-col>

                        </el-row>
                      </div>
                    </section>


                  </el-main>
                </el-tab-pane>

                <el-tab-pane label="原始圖卡樣式" class="tw-h-full">
                  <el-main class="tw-h-full tw-space-y-10 tw-text-base tw-font-light">
                    <section class="tw-space-y-5">
                      <el-row class="tw-items-center">
                        <el-col :span="3">
                          叉叉顏色
                        </el-col>
                        <el-col :span="2">
                          <el-color-picker v-model="data.card_cancel_btn_color" show-alpha color-format="hex"
                                           @active-change="colorChange('card_cancel_btn_color',$event)"/>
                        </el-col>
                      </el-row>
                    </section>

                    <!--圖片設定-->
                    <section class="tw-space-y-5">
                      <p>
                        <span class="tw-text-xl tw-font-bold">圖片設定</span>
                      </p>

                      <!--                  上傳圖片 / 背景顏色 -->
                      <div>
                        <el-row class="tw-items-center">
                          <el-col :span="3">
                            上傳圖片
                          </el-col>
                          <el-col :span="6" class="tw-pr-10">
                            <el-button type="primary" size="default" :color="'#2f91ee'" @click="openImageDrawer"
                                       plain>
                              選擇 / 上傳圖片
                            </el-button>
                          </el-col>

                          <el-col :span="3">
                            背景顏色
                          </el-col>
                          <el-col :span="2">
                            <el-color-picker v-model="data.card_img_bg" show-alpha color-format="hex"
                                             @active-change="colorChange('card_img_bg',$event)"/>
                          </el-col>
                        </el-row>
                      </div>

                    </section>
                  </el-main>
                </el-tab-pane>
                <el-tab-pane label="縮小圖卡樣式" class="tw-h-full">
                  <el-main class="tw-h-full tw-space-y-10 tw-text-base tw-font-light">
                    <!--                  手機版-->
                    <section class="tw-space-y-5">
                      <p>
                        <el-icon size="15" :color="'#2f91ee'">
                          <Iphone/>
                        </el-icon>
                        <span class="tw-text-xl tw-font-bold"> 手機版</span>
                      </p>

                      <!--                  文字內容-->
                      <el-row class="tw-items-center">
                        <el-col :span="3">
                          文字內容
                        </el-col>
                        <el-col :span="21">
                          <el-input
                              :input-style="{fontSize:'medium'}"
                              size="large"
                              v-model="data.minicard_phone_word"
                          />
                        </el-col>
                      </el-row>

                      <!--                  透明度-->
                      <el-row class="tw-items-center">
                        <el-col :span="3">
                          透明度
                        </el-col>
                        <el-col :span="21">
                          <el-input
                              :input-style="{fontSize:'medium'}"
                              size="large"
                              placeholder="填0 ~ 1 (eg 0.5)"
                              v-model="data.minicard_phone_transparency"
                          />
                        </el-col>
                      </el-row>

                      <!--                  文字顏色 / 背景顏色 / 文字位置-->
                      <el-row class="tw-items-center">
                        <el-col :span="3">
                          文字顏色
                        </el-col>
                        <el-col :span="4">
                          <el-color-picker v-model="data.minicard_phone_word_color" show-alpha
                                           color-format="hex"
                                           @active-change="colorChange(minicard_phone_word_color,$event)"/>
                        </el-col>

                        <el-col :span="3">
                          背景顏色
                        </el-col>
                        <el-col :span="4">
                          <el-color-picker v-model="data.minicard_phone_bg" show-alpha
                                           color-format="hex" @active-change="colorChange('minicard_phone_bg',$event)"/>
                        </el-col>

                        <el-col :span="3">
                          文字位置
                        </el-col>
                        <el-col :span="5">
                          <el-radio-group v-model="data.minicard_phone_word_align">
                            <el-radio-button label="left">
                              <template #default>
                                <el-icon>
                                  <CaretLeft/>
                                </el-icon>
                              </template>
                            </el-radio-button>
                            <el-radio-button label="center">
                              <template #default>
                                <el-icon>
                                  <DCaret/>
                                </el-icon>
                              </template>
                            </el-radio-button>
                            <el-radio-button label="right">
                              <template #default>
                                <el-icon>
                                  <CaretRight/>
                                </el-icon>
                              </template>
                            </el-radio-button>
                          </el-radio-group>
                        </el-col>
                      </el-row>
                    </section>

                    <!--                  手機縮小倒數計時器設定-->
                    <section class="tw-space-y-4">
                      <p>
                        <span class="tw-text-xl tw-font-bold">手機縮小倒數計時器設定</span>
                      </p>

                      <!--                  開頭文字-->
                      <el-row class="tw-items-center">
                        <el-col :span="3">
                          開頭文字
                        </el-col>
                        <el-col :span="21">
                          <el-input
                              :input-style="{fontSize:'medium'}"
                              size="large"
                              v-model="data.minicard_phone_timer_start_word"
                          />
                        </el-col>
                      </el-row>

                      <!--                  開頭文字顏色-->
                      <el-row class="tw-items-center">
                        <el-col :span="4">
                          開頭文字顏色
                        </el-col>
                        <el-col :span="4">
                          <el-color-picker v-model="data.minicard_phone_timer_start_word_color" show-alpha
                                           color-format="hex"
                                           @active-change="colorChange('minicard_phone_timer_start_word_color',$event)"/>
                        </el-col>

                      </el-row>

                      <!--                  結尾文字-->
                      <el-row class="tw-items-center">
                        <el-col :span="3">
                          結尾文字
                        </el-col>
                        <el-col :span="21">
                          <el-input
                              :input-style="{fontSize:'medium'}"
                              size="large"
                              v-model="data.minicard_phone_timer_end_word"
                          />
                        </el-col>
                      </el-row>

                      <!--                  結尾文字顏色-->
                      <el-row class="tw-items-center">
                        <el-col :span="4">
                          結尾文字顏色
                        </el-col>
                        <el-col :span="4">
                          <el-color-picker v-model="data.minicard_phone_timer_end_word_color" show-alpha
                                           color-format="hex"
                                           @active-change="colorChange('minicard_phone_timer_end_word_color',$event)"/>
                        </el-col>

                      </el-row>
                    </section>

                    <!--                  電腦版-->
                    <section class="tw-space-y-5">
                      <p>
                        <el-icon size="15" :color="'#2f91ee'">
                          <Monitor/>
                        </el-icon>
                        <span class="tw-text-xl tw-font-bold"> 電腦版</span>
                      </p>
                      <!--                  文字內容-->
                      <el-row class="tw-items-center">
                        <el-col :span="3">
                          文字內容
                        </el-col>
                        <el-col :span="21">
                          <el-input
                              :input-style="{fontSize:'medium'}"
                              size="large"
                              v-model="data.minicard_computer_word"
                          />
                        </el-col>
                      </el-row>

                      <!--                  透明度-->
                      <el-row class="tw-items-center">
                        <el-col :span="3">
                          透明度
                        </el-col>
                        <el-col :span="21">
                          <el-input
                              :input-style="{fontSize:'medium'}"
                              size="large"
                              placeholder="填0 ~ 1 (eg 0.5)"
                              v-model="data.minicard_computer_transparency"
                          />
                        </el-col>
                      </el-row>

                      <!--                  文字顏色 / 背景顏色 / 文字位置-->
                      <el-row class="tw-items-center">
                        <el-col :span="3">
                          文字顏色
                        </el-col>
                        <el-col :span="4">
                          <el-color-picker v-model="data.minicard_computer_word_color" show-alpha
                                           color-format="hex"
                                           @active-change="colorChange('minicard_computer_word_color',$event)"/>
                        </el-col>

                        <el-col :span="3">
                          背景顏色
                        </el-col>
                        <el-col :span="4">
                          <el-color-picker v-model="data.minicard_computer_bg" show-alpha
                                           color-format="hex"
                                           @active-change="colorChange('minicard_computer_bg',$event)"/>
                        </el-col>

                        <el-col :span="3">
                          文字位置
                        </el-col>
                        <el-col :span="5">
                          <el-radio-group v-model="data.minicard_computer_word_align">
                            <el-radio-button label="left">
                              <template #default>
                                <el-icon>
                                  <CaretLeft/>
                                </el-icon>
                              </template>
                            </el-radio-button>
                            <el-radio-button label="center">
                              <template #default>
                                <el-icon>
                                  <DCaret/>
                                </el-icon>
                              </template>
                            </el-radio-button>
                            <el-radio-button label="right">
                              <template #default>
                                <el-icon>
                                  <CaretRight/>
                                </el-icon>
                              </template>
                            </el-radio-button>
                          </el-radio-group>
                        </el-col>
                      </el-row>
                    </section>

                    <!--                  電腦縮小倒數計時器設定-->
                    <section class="tw-space-y-4">
                      <p>
                        <span class="tw-text-xl tw-font-bold">電腦縮小倒數計時器設定</span>
                      </p>

                      <!--                  開頭文字-->
                      <el-row class="tw-items-center">
                        <el-col :span="3">
                          開頭文字
                        </el-col>
                        <el-col :span="21">
                          <el-input
                              :input-style="{fontSize:'medium'}"
                              size="large"
                              v-model="data.minicard_computer_timer_start_word"
                          />
                        </el-col>
                      </el-row>

                      <!--                  開頭文字顏色-->
                      <el-row class="tw-items-center">
                        <el-col :span="4">
                          開頭文字顏色
                        </el-col>
                        <el-col :span="4">
                          <el-color-picker v-model="data.minicard_computer_timer_start_word_color" show-alpha
                                           color-format="hex"
                                           @active-change="colorChange('minicard_computer_timer_start_word_color',$event)"/>
                        </el-col>

                      </el-row>

                      <!--                  結尾文字-->
                      <el-row class="tw-items-center">
                        <el-col :span="3">
                          結尾文字
                        </el-col>
                        <el-col :span="21">
                          <el-input
                              :input-style="{fontSize:'medium'}"
                              size="large"
                              v-model="data.minicard_computer_timer_end_word"
                          />
                        </el-col>
                      </el-row>

                      <!--                  結尾文字顏色-->
                      <el-row class="tw-items-center">
                        <el-col :span="4">
                          結尾文字顏色
                        </el-col>
                        <el-col :span="4">
                          <el-color-picker v-model="data.minicard_computer_timer_end_word_color" show-alpha
                                           color-format="hex"
                                           @active-change="colorChange('minicard_computer_timer_end_word_color',$event)"/>
                        </el-col>

                      </el-row>
                    </section>

                  </el-main>
                </el-tab-pane>
              </div>


            </el-tabs>
          </template>
          <template #footer>
            <el-row>
              <el-col :span="2">
                <el-button size="large" @click="goBack">返回列表</el-button>
              </el-col>
              <el-col :span="18"></el-col>
              <el-col :span="2">
                <el-button :disabled="previewButtonDisabled" size="large" @click="previewCard">預覽</el-button>
              </el-col>
              <el-col :span="2">
                <el-button size="large" @click="saveRecord">保存</el-button>
              </el-col>
            </el-row>
          </template>
        </el-card>
      </el-col>

      <!--      preview-->
      <el-col :span="8" class="tw-h-full">
        <OseCardPreviewPanel
            :data="data"
            :card-style="data.card_style"
            :dynamic-phone-visible="dynamicPhoneVisible"
            :dynamic-computer-visible="dynamicComputerVisible"
            @update:card-style="data.card_style = $event"
            @update:dynamic-phone-visible="dynamicPhoneVisible = $event"
            @update:dynamic-computer-visible="dynamicComputerVisible = $event"
        />
      </el-col>
    </el-row>
  </el-main>
  <OseCardImageDrawer
      v-model="imageDrawerVisible"
      :images="store.state.ose_card_store.images"
      :selected-image-url="data.card_img_url"
      :on-image-upload="uploadImage"
      @select="selectImage"
  />
  <OseCardCouponDrawer
      v-model="couponDrawerVisible"
      :coupon-type="couponType"
      :coupon-code="couponForm.coupon_code"
      :affiliate-code="couponForm.affiliate_code"
      :card-code-url="cardCodeUrl"
      @update:coupon-type="couponType = $event"
      @update:coupon-code="couponForm.coupon_code = $event"
      @update:affiliate-code="couponForm.affiliate_code = $event"
  />
</template>

<script setup>
import {ref, reactive, onBeforeMount} from 'vue'
import {useStore} from "vuex";
import {useRouter, useRoute} from "vue-router";
import Tinymce from "@/components/tinymce.vue"
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"
import OseCardImageDrawer from "@/module/ose-card/components/OseCardImageDrawer.vue"
import OseCardCouponDrawer from "@/module/ose-card/components/OseCardCouponDrawer.vue"
import OseCardPreviewPanel from "@/module/ose-card/components/OseCardPreviewPanel.vue"
import { useOseCardEditSupport } from "@/module/ose-card/service/use-ose-card-edit-support";
import { useOseCardEditPage } from "@/module/ose-card/service/use-ose-card-edit-page";
import { useOseCardDynamicPreview } from "@/module/ose-card/service/use-ose-card-dynamic-preview";

const store = useStore();
const router = useRouter()
const route = useRoute()
const props = defineProps({
//  基本設定
  card_name: {
    default: ''
  },
  landing_page: {
    default: ''
  },
  card_code: {
    default: ''
  },
  start_date: {
    default: null
  },
  end_date: {
    default: null
  },
  timer: {
    default: true
  },
  carousel_days: {
    default: 0
  },
  card_style: {
    default: 1
  },

// 倒數計時器設定
  //   描述文字
  timer_start_word_color: {
    default: '#ff000a'
  },
  timer_start_word: {
    default: "限時倒數"
  },
  timer_end_word_color: {
    default: '#ff010b'
  },
  timer_end_word: {
    default: '!'
  },
  // 樣式設定
  timer_bg: {
    default: '#FA96AA'
  },
  timer_font_size: {
    default: 20
  },
  timer_y_axis: {
    default: 0
  },
  timer_x_axis: {
    default: 0
  },
  timer_space: {
    default: 0
  },

  timer_day_word: {
    default: '日'
  },
  timer_day_word_color: {
    default: '#ffffff'
  },
  timer_day_number_color: {
    default: '#ffffff'
  },
  timer_hour_word: {
    default: '時'
  },
  timer_hour_word_color: {
    default: '#ffffff'
  },
  timer_hour_number_color: {
    default: '#ffffff'
  },
  timer_minute_word: {
    default: '分'
  },
  timer_minute_word_color: {
    default: '#ffffff'
  },
  timer_minute_number_color: {
    default: '#ffffff'
  },
  timer_second_word: {
    default: '秒'
  },
  timer_second_word_color: {
    default: '#ffffff'
  },
  timer_second_number_color: {
    default: '#ffffff'
  },

// 圖卡位置設定
  phone_card_position: {
    default: 0
  },
  phone_minicard_position: {
    default: 50
  },
  phone_fixed_card_position: {
    default: 50
  },
  computer_card_position: {
    default: 'right:0px;bottom:0px;margin:0px 10px 10px 0px;'
  },

// 原始圖卡樣式設定
  card_cancel_btn_color: {
    default: '#000000'
  },
  //圖片設定
  card_img_url: {
    default: null
  },
  card_img_bg: {
    default: '#ffffff'
  },
  //標題設定
  card_title_word: {
    default: '圖卡標題'
  },
  card_title_word_color: {
    default: '#000000'
  },
  card_title_bg: {
    default: '#ffffff'
  },
  card_title_word_align: {
    default: 'left'
  },
  //  行銷文字設定
  card_footer_word: {
    default: '行銷文字'
  },
  card_footer_word_color: {
    default: '#000000'
  },
  card_footer_bg: {
    default: '#ffffff'
  },
  card_footer_word_align: {
    default: 'center'
  },
  // 內文設定
  card_text_bg: {
    default: '#ffffff'
  },
  card_text_content: {
    default: '<p>圖卡內文</p>'
  },

// 縮小圖卡設定
  // 手機版
  minicard_phone_word: {
    default: '手機縮小的行銷文字'
  },
  minicard_phone_transparency: {
    default: 1
  },
  minicard_phone_word_color: {
    default: '#ffffff'
  },
  minicard_phone_bg: {
    default: '#FA96AA'
  },
  minicard_phone_word_align: {
    default: 'center'
  },
  //手機縮小倒數計時器設定
  minicard_phone_timer_start_word: {
    default: '▼'
  },
  minicard_phone_timer_start_word_color: {
    default: '#000000'
  },
  minicard_phone_timer_end_word: {
    default: '▼'
  },
  minicard_phone_timer_end_word_color: {
    default: '#000000'
  },
  // 桌機版
  minicard_computer_word: {
    default: '桌機縮小的行銷文字'
  },
  minicard_computer_transparency: {
    default: 1
  },
  minicard_computer_word_color: {
    default: '#ffffff'
  },
  minicard_computer_bg: {
    default: '#FA96AA'
  },
  minicard_computer_word_align: {
    default: 'center'
  },
  //桌機縮小倒數計時器設定
  minicard_computer_timer_start_word: {
    default: '▶'
  },
  minicard_computer_timer_start_word_color: {
    default: '#000000'
  },
  minicard_computer_timer_end_word: {
    default: '▶'
  },
  minicard_computer_timer_end_word_color: {
    default: '#000000'
  },

  //Auto
  corporate_customer: {
    default: ""
  },
  ose_user_created: {
    default: ''
  },
  ose_user_updated: {
    default: ''
  },

})
const queryString = route.query
const unified_color = ref()
let data = reactive({})
const {
  dynamicPhoneVisible,
  dynamicComputerVisible,
  prepareDynamicPreviewForSave,
} = useOseCardDynamicPreview({
  data,
  store,
})
const {
  pageLoading,
  previewButtonDisabled,
  initializePage,
  goBack,
  saveRecord,
  applyColorChange,
} = useOseCardEditPage({
  data,
  props,
  query: queryString,
  router,
  store,
  beforeSave: prepareDynamicPreviewForSave,
})
const {
  imageDrawerVisible,
  couponDrawerVisible,
  couponType,
  couponForm,
  cardCodeUrl,
  openImageDrawer,
  openCouponDrawer,
  previewCard,
  uploadImage,
  selectImage,
} = useOseCardEditSupport({
  data,
  store,
})
const colorChange = (param, color) => {
  applyColorChange(param, color)
}
onBeforeMount(() => {
  initializePage()
})
</script>

<style>
.ose-setting-tabs > .el-tabs__content {
  height: 92%;
}

.el-tabs__item {
  font-size: 16px;
}
</style>
