<template>
  <el-main class="tw-h-full" v-loading="page_loading">
    <el-row class="tw-h-full" :gutter="50">
      <!--      setting-->
      <el-col :span="14" 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-10 tw-text-base tw-font-light tw-h-full">
                  <!--                  基本-->
                  <section class="tw-space-y-5">
                    <p class="tw-text-xl tw-font-bold">基本</p>

                    <!--          倒數計時器名稱-->
                    <el-row class="tw-items-center ">
                      <!--                      進行中文字內容-->
                      <el-col :span="5">
                        倒數計時器名稱
                      </el-col>
                      <el-col :span="19">
                        <el-input
                            :input-style="{fontSize:'medium'}"
                            size="large"
                            v-model="data.name"
                        />
                      </el-col>
                    </el-row>
                    <!--          開始 結束-->
                    <el-row   class="tw-items-center">
                      <el-col :span="5">
                        <span class="">開始</span>
                      </el-col>
                      <el-col :span="8">
                        <el-date-picker
                            :input-style="{fontSize:'medium'}"
                            v-model="data.start_at"
                            type="datetime"
                            format="YYYY-MM-DD HH:mm:ss"
                            placeholder="請選擇開始時間日期"
                            size="large"
                            style="width: 100%"
                        />
                      </el-col>

                      <el-col :span="3" class="tw-pl-10">
                        <span class="">結束</span>
                      </el-col>
                      <el-col :span="8">
                        <el-date-picker
                            :input-style="{fontSize:'medium'}"
                            v-model="data.end_at"
                            type="datetime"
                            format="YYYY-MM-DD HH:mm:ss"
                            placeholder="請選擇開始時間日期"
                            size="large"
                            style="width: 100%"
                        />
                      </el-col>
                    </el-row>
                    <!--                  圖卡高度-->
                    <el-row class="tw-items-center">
                      <el-col :span="5">
                        圖卡高度
                      </el-col>
                      <el-col :span="19">
                        <el-slider v-model="data.height"
                          :min="50" :max="500"
                        />
                      </el-col>
                    </el-row>
                    <!--                  重複天數-->
                    <el-row class="tw-items-center">
                      <el-col :span="5">
                        重複天數
                      </el-col>
                      <el-col :span="19">
                        <el-slider v-model="data.repeat_day"
                                   :min="0" :max="10"
                        />
                      </el-col>
                    </el-row>
                  </section>

                  <!--                  背景-->
                  <section class="tw-space-y-5">
                    <p class="tw-text-xl tw-font-bold">背景</p>
<!--                                      上傳圖片
                    <el-row class="tw-items-center">
                      <el-col :span="5">
                        上傳圖片
                      </el-col>
                      <el-col :span="6" class="tw-pr-10">
                        <el-button type="primary" size="default" :color="'#2f91ee'" @click="images_drawer_show =true"
                                   plain>
                          選擇 / 上傳圖片
                        </el-button>
                      </el-col>
                    </el-row>-->
                    <!--                  背景色/背景漸層色-->
                    <el-row class="tw-items-center">
                      <!--                      背景色-->
                      <el-col :span="5">
                        背景色
                      </el-col>
                      <el-col :span="7">
                        <el-color-picker v-model="data.bg_color" show-alpha color-format="hex"
                                         @active-change="colorChange('bg_color',$event)"/>
                      </el-col>

                      <!--                      背景漸層色-->
                      <el-col :span="5">
                        背景漸層色
                      </el-col>
                      <el-col :span="7">
                        <el-color-picker v-model="data.bg_color2" show-alpha color-format="hex"
                                         @active-change="colorChange('bg_color2',$event)"/>
                      </el-col>
                    </el-row>
                    <!--                  漸層方向-->
                    <el-row class="tw-items-center">
                      <el-col :span="5">
                        漸層方向
                      </el-col>
                      <el-col :span="19">
                        <el-slider v-model="data.bg_color_gradient_direction"
                                   :min="-200" :max="200"
                                   :disabled="!data.bg_color2?true:false"
                        />
                      </el-col>
                    </el-row>
                    <!--                  背景色起始-->
                    <el-row class="tw-items-center">
                      <el-col :span="5">
                        背景色起始
                      </el-col>
                      <el-col :span="19">
                        <el-slider v-model="data.bg_color_gradient_position"
                                   :disabled="!data.bg_color2?true:false"
                        />
                      </el-col>
                    </el-row>
                    <!--                  漸層色起始-->
                    <el-row class="tw-items-center">
                      <el-col :span="5">
                        漸層色起始
                      </el-col>
                      <el-col :span="19">
                        <el-slider v-model="data.bg_color2_gradient_position"
                                   :disabled="!data.bg_color2?true:false"
                        />
                      </el-col>
                    </el-row>

                  </section>

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

                    <!--                  顯示標題-->
                    <el-row class="tw-items-center">
                      <el-col :span="5">
                        顯示標題
                      </el-col>
                      <el-col :span="2">
                        <el-switch
                            v-model="data.header_switch"
                            inline-prompt
                            active-text="是"
                            inactive-text="否"
                            active-value="Y"
                            inactive-value="N"
                        />

                      </el-col>
                    </el-row>
<!--                       開始前文字內容
                    <el-row class="tw-items-center ">
                      &lt;!&ndash;                      開始前文字內容&ndash;&gt;
                      <el-col :span="5">
                        開始前文字內容
                      </el-col>
                      <el-col :span="19">
                        <el-input
                            :input-style="{fontSize:'medium'}"
                            size="large"
                            v-model="data.header_text_prepare"
                        />
                      </el-col>
                    </el-row>-->
                    <!--   進行中文字內容-->
                    <el-row class="tw-items-center ">
                      <!--                      進行中文字內容-->
                      <el-col :span="5">
                        文字內容
                      </el-col>
                      <el-col :span="19">
                        <el-input
                            :input-style="{fontSize:'medium'}"
                            size="large"
                            v-model="data.header_text_ing"
                        />
                      </el-col>
                    </el-row>
<!--                       結束後文字內容
                    <el-row class="tw-items-center ">
                      &lt;!&ndash;                      結束後文字內容&ndash;&gt;
                      <el-col :span="5">
                        結束後文字內容
                      </el-col>
                      <el-col :span="19">
                        <el-input
                            :input-style="{fontSize:'medium'}"
                            size="large"
                            v-model="data.header_text_finish"
                        />
                      </el-col>
                    </el-row>-->
                    <!--                  文字顏色/文字漸層色-->
                    <el-row class="tw-items-center">
                      <!--                      文字顏色-->
                      <el-col :span="5">
                        文字顏色
                      </el-col>
                      <el-col :span="7">
                        <el-color-picker v-model="data.header_color" show-alpha color-format="hex"
                                         @active-change="colorChange('header_color',$event)"/>
                      </el-col>

                      <!--                      文字漸層色-->
                      <el-col :span="5">
                        文字漸層色
                      </el-col>
                      <el-col :span="7">
                        <el-color-picker v-model="data.header_color2" show-alpha color-format="hex"
                                         @active-change="colorChange('header_color2',$event)"/>
                      </el-col>
                    </el-row>
                    <!--                  文字位置-->
                    <el-row class="tw-items-center">
                      <el-col :span="5">
                        文字位置
                      </el-col>
                      <el-col :span="19">
                        <el-slider v-model="data.header_y_position"
                                   :min="-200" :max="200"
                        />
                      </el-col>
                    </el-row>
                    <!--                  文字大小-->
                    <el-row class="tw-items-center">
                      <el-col :span="5">
                        文字大小
                      </el-col>
                      <el-col :span="19">
                        <el-slider v-model="data.header_font_size"
                        />
                      </el-col>
                    </el-row>
                    <!--                  漸層方向-->
                    <el-row class="tw-items-center">
                      <el-col :span="5">
                        漸層方向
                      </el-col>
                      <el-col :span="19">
                        <el-slider v-model="data.header_color_gradient_direction"
                                   :min="-200" :max="200"
                                   :disabled="!data.header_color2?true:false"
                        />
                      </el-col>
                    </el-row>
                    <!--                  文字顏色起始-->
                    <el-row class="tw-items-center">
                      <el-col :span="5">
                        文字顏色起始
                      </el-col>
                      <el-col :span="19">
                        <el-slider v-model="data.header_color_gradient_position"
                                   :disabled="!data.header_color2?true:false"
                        />
                      </el-col>
                    </el-row>
                    <!--                  漸層色起始-->
                    <el-row class="tw-items-center">
                      <el-col :span="5">
                        漸層色起始
                      </el-col>
                      <el-col :span="19">
                        <el-slider v-model="data.header_color2_gradient_position"
                                   :disabled="!data.header_color2?true:false"
                        />
                      </el-col>
                    </el-row>

                  </section>

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

              <el-tab-pane label="倒數計時" class="tw-h-full">
                <el-main class="tw-space-y-10 tw-text-base tw-font-light tw-h-full">

                  <section class="tw-space-y-5">
                    <!--                  X間距調整-->
                    <el-row class="tw-items-center">
                      <el-col :span="5">
                        X軸間距調整
                      </el-col>
                      <el-col :span="19">
                        <el-slider v-model="data.timer_x_space"
                                   :min="0" :max="50"
                        />
                      </el-col>
                    </el-row>
                  </section>
                  <!--                  時間-->
                  <section class="tw-space-y-5">
                    <p class="tw-text-xl tw-font-bold">時間</p>
                    <!--                  文字顏色/文字漸層色-->
                    <el-row class="tw-items-center">
                      <!--                      文字顏色-->
                      <el-col :span="5">
                        文字顏色
                      </el-col>
                      <el-col :span="7">
                        <el-color-picker v-model="data.time_color" show-alpha color-format="hex"
                                         @active-change="colorChange('time_color',$event)"/>
                      </el-col>

                      <!--                      文字漸層色-->
                      <el-col :span="5">
                        文字漸層色
                      </el-col>
                      <el-col :span="7">
                        <el-color-picker v-model="data.time_color2" show-alpha color-format="hex"
                                         @active-change="colorChange('time_color2',$event)"/>
                      </el-col>
                    </el-row>
                    <!--                  文字位置-->
                    <el-row class="tw-items-center">
                      <el-col :span="5">
                        文字位置
                      </el-col>
                      <el-col :span="19">
                        <el-slider v-model="data.time_y_position"
                                   :min="-200" :max="200"
                        />
                      </el-col>
                    </el-row>
                    <!--                  文字大小-->
                    <el-row class="tw-items-center">
                      <el-col :span="5">
                        文字大小
                      </el-col>
                      <el-col :span="19">
                        <el-slider v-model="data.time_font_size"
                        />
                      </el-col>
                    </el-row>
                    <!--                  漸層方向-->
                    <el-row class="tw-items-center">
                      <el-col :span="5">
                        漸層方向
                      </el-col>
                      <el-col :span="19">
                        <el-slider v-model="data.time_color_gradient_direction"
                                   :min="-200" :max="200"
                                   :disabled="!data.time_color2?true:false"
                        />
                      </el-col>
                    </el-row>
                    <!--                  文字顏色起始-->
                    <el-row class="tw-items-center">
                      <el-col :span="5">
                        文字顏色起始
                      </el-col>
                      <el-col :span="19">
                        <el-slider v-model="data.time_color_gradient_position"
                                   :disabled="!data.time_color2?true:false"
                        />
                      </el-col>
                    </el-row>
                    <!--                  漸層色起始-->
                    <el-row class="tw-items-center">
                      <el-col :span="5">
                        漸層色起始
                      </el-col>
                      <el-col :span="19">
                        <el-slider v-model="data.time_color2_gradient_position"
                                   :disabled="!data.time_color2?true:false"
                        />
                      </el-col>
                    </el-row>
                  </section>

                  <!--                  單位-->
                  <section class="tw-space-y-5">
                    <p class="tw-text-xl tw-font-bold">單位</p>
                    <!--                  文字顏色/文字漸層色-->
                    <el-row class="tw-items-center">
                      <!--                      文字顏色-->
                      <el-col :span="5">
                        文字顏色
                      </el-col>
                      <el-col :span="7">
                        <el-color-picker v-model="data.unit_color" show-alpha color-format="hex"
                                         @active-change="colorChange('unit_color',$event)"/>
                      </el-col>

                      <!--                      文字漸層色-->
                      <el-col :span="5">
                        文字漸層色
                      </el-col>
                      <el-col :span="7">
                        <el-color-picker v-model="data.unit_color2" show-alpha color-format="hex"
                                         @active-change="colorChange('unit_color2',$event)"/>
                      </el-col>
                    </el-row>
                    <!--                  文字位置-->
                    <el-row class="tw-items-center">
                      <el-col :span="5">
                        文字位置
                      </el-col>
                      <el-col :span="19">
                        <el-slider v-model="data.unit_y_position"
                                   :min="-200" :max="200"
                        />
                      </el-col>
                    </el-row>
                    <!--                  文字大小-->
                    <el-row class="tw-items-center">
                      <el-col :span="5">
                        文字大小
                      </el-col>
                      <el-col :span="19">
                        <el-slider v-model="data.unit_font_size"
                        />
                      </el-col>
                    </el-row>
                    <!--                  漸層方向-->
                    <el-row class="tw-items-center">
                      <el-col :span="5">
                        漸層方向
                      </el-col>
                      <el-col :span="19">
                        <el-slider v-model="data.unit_color_gradient_direction"
                                   :min="-200" :max="200"
                                   :disabled="!data.unit_color2?true:false"
                        />
                      </el-col>
                    </el-row>
                    <!--                  文字顏色起始-->
                    <el-row class="tw-items-center">
                      <el-col :span="5">
                        文字顏色起始
                      </el-col>
                      <el-col :span="19">
                        <el-slider v-model="data.unit_color_gradient_position"
                                   :disabled="!data.unit_color2?true:false"
                        />
                      </el-col>
                    </el-row>
                    <!--                  漸層色起始-->
                    <el-row class="tw-items-center">
                      <el-col :span="5">
                        漸層色起始
                      </el-col>
                      <el-col :span="19">
                        <el-slider v-model="data.unit_color2_gradient_position"
                                   :disabled="!data.unit_color2?true:false"
                        />
                      </el-col>
                    </el-row>
                  </section>

                  <!--                  符號-->
                  <section class="tw-space-y-5">
                    <p class="tw-text-xl tw-font-bold">符號</p>
                    <!--                  文字顏色/文字漸層色-->
                    <el-row class="tw-items-center">
                      <!--                      文字顏色-->
                      <el-col :span="5">
                        文字顏色
                      </el-col>
                      <el-col :span="7">
                        <el-color-picker v-model="data.symbol_color" show-alpha color-format="hex"
                                         @active-change="colorChange('symbol_color',$event)"/>
                      </el-col>

                      <!--                      文字漸層色-->
                      <el-col :span="5">
                        文字漸層色
                      </el-col>
                      <el-col :span="7">
                        <el-color-picker v-model="data.symbol_color2" show-alpha color-format="hex"
                                         @active-change="colorChange('symbol_color2',$event)"/>
                      </el-col>
                    </el-row>
                    <!--                  文字位置-->
                    <el-row class="tw-items-center">
                      <el-col :span="5">
                        文字位置
                      </el-col>
                      <el-col :span="19">
                        <el-slider v-model="data.symbol_y_position"
                                   :min="-200" :max="200"
                        />
                      </el-col>
                    </el-row>
                    <!--                  文字大小-->
                    <el-row class="tw-items-center">
                      <el-col :span="5">
                        文字大小
                      </el-col>
                      <el-col :span="19">
                        <el-slider v-model="data.symbol_font_size"
                        />
                      </el-col>
                    </el-row>
                    <!--                  漸層方向-->
                    <el-row class="tw-items-center">
                      <el-col :span="5">
                        漸層方向
                      </el-col>
                      <el-col :span="19">
                        <el-slider v-model="data.symbol_color_gradient_direction"
                                   :min="-200" :max="200"
                                   :disabled="!data.symbol_color2?true:false"
                        />
                      </el-col>
                    </el-row>
                    <!--                  文字顏色起始-->
                    <el-row class="tw-items-center">
                      <el-col :span="5">
                        文字顏色起始
                      </el-col>
                      <el-col :span="19">
                        <el-slider v-model="data.symbol_color_gradient_position"
                                   :disabled="!data.symbol_color2?true:false"
                        />
                      </el-col>
                    </el-row>
                    <!--                  漸層色起始-->
                    <el-row class="tw-items-center">
                      <el-col :span="5">
                        漸層色起始
                      </el-col>
                      <el-col :span="19">
                        <el-slider v-model="data.symbol_color2_gradient_position"
                                   :disabled="!data.symbol_color2?true:false"
                        />
                      </el-col>
                    </el-row>
                  </section>
                </el-main>
              </el-tab-pane>
            </el-tabs>
          </template>
          <template #footer>
            <el-row>
              <el-col :span="2">
                <el-button size="large" @click="toPrevious">返回列表</el-button>
              </el-col>
              <el-col :span="15"></el-col>
              <el-col :span="5">
                <el-button type="primary" size="large" plain @click="outputIframeCode">產出HTML代碼</el-button>
              </el-col>
              <el-col :span="2">
                <el-button size="large" @click="toSaveRecord">保存</el-button>
              </el-col>
            </el-row>
            <div class="tw-h-full tw-w-full tw-flex tw-justify-center">
            </div>
          </template>
        </el-card>
      </el-col>

      <!--      preview-->
      <el-col :span="10" class="tw-h-full">
        <el-main class="tw-h-full ">
          <!--                  樣式類型-->
          <el-row class="tw-items-center">
            <el-col :span="5">
              樣式類型
            </el-col>
            <el-col :span="19">
              <el-select v-model="data.timer_type" class="" placeholder="請選擇" size="large">
                <el-option
                    v-for="item in timer_types"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
              </el-select>
            </el-col>

          </el-row>

          <article class="tw-h-full tw-w-full tw-flex tw-items-center" style="height: 92%">
            <countdown_timer_main :style="`height: ${data.height}px`" v-model="data" :dev="true" />
          </article>
        </el-main>
      </el-col>
    </el-row>
  </el-main>
  <el-dialog
      v-model="iframe_code_dialog_show"
      title="IFRAME HTML CODE"
      width="60%"
      align-center
  >
    <template #title>
      <el-button type="primary"  plain @click="copyIframeCode">複製</el-button>
    </template>
    <template #default>
      <el-input
          v-model="iframe_code"
          :rows="15"
          type="textarea"
          class="-tw-my-5 tw-pb-5"
      />
    </template>
  </el-dialog>
  <el-drawer v-model="images_drawer_show" title="選擇 / 上傳圖片" direction="ltr" size="50%" class="">
    <template #default>
      <section class="-tw-my-5 tw-space-y-7 tw-h-full">
        <el-upload
            drag
            :http-request="toImageUpload"
            :show-file-list="false"
        >
          <el-icon class="el-icon--upload">
            <upload-filled/>
          </el-icon>
          <div class="el-upload__text">
            拖移檔案至此 或 <em>點擊上傳</em>
          </div>
        </el-upload>
        <el-card class="" style="height: 73%" :body-style="{height:'100%'}">
          <div class="tw-grid tw-grid-cols-4 tw-gap-4 tw-h-full tw-overflow-auto">
            <div v-for="(item,inedx) in store.state.countdown_timer.images" style="height: 150px">
              <el-image :src="item.url" fit="fill"
                        :class="[item.url==data.bg_img_url?'tw-border-4 tw-border-blue-500':'','tw-h-full tw-w-full  tw-rounded-md']"
                        @click="data.bg_img_url = item.url" loading="lazy"
              />
            </div>
          </div>
        </el-card>
      </section>
    </template>

  </el-drawer>
</template>
<script setup>
import {reactive, ref, watch} from "vue";
import { ElMessage } from 'element-plus'
import {useStore} from "vuex";
import countdown_timer_main from "@/module/conutdown-timer/components/card-one.vue"
import {useRoute, useRouter} from "vue-router";

const router = useRouter()
const route = useRoute()
const store = useStore();
const props = defineProps({
  name:{
    default:""
  },
  corporate_customer:{
    default:''
  },
  timer_type:{
    default:1
  },
  start_at:{
    default:new Date()
  },
  end_at:{
    default:new Date().setDate(new Date().getDate()+3)
  },
  height:{
    default:150
  },

  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: "#000000FF"
  },
  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: "#000000FF"
  },
  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: 0
  },
  symbol_font_size: {
    default: 20
  },
  symbol_color: {
    default: "#000000FF"
  },
  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: 0
  },
  unit_font_size: {
    default: 20
  },
  unit_color: {
    default: "#000000FF"
  },
  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
  },
})
const queryString = route.query
const timer_types = reactive([
  {
    "label":1,
    "value":1
  }
])
const card_height = ref(150)
const iframe_code_dialog_show = ref(false)
const iframe_code = ref()
const images_drawer_show = ref(false)
const data = reactive({})
const page_loading = ref(false)


const initPage = async () => {
  for (let key in props) {
    data[key] = props[key]
  }
  data.corporate_customer = store.state.user.current_corporate_customer
  if (store.state.countdown_timer_store.images.length == 0){
    await store.dispatch('countdown_timer_store/getImages')
  }
  if (queryString.id) {
    console.log(store.state.countdown_timer_store.edit_countdown_timer_data)
    for (let key in data) {
      data[key] = store.state.countdown_timer_store.edit_countdown_timer_data[key]
    }
  }
}
const colorChange = (param, color) => {
  if (typeof param == 'string')
    data[param] = color
  else {
    for (let i in param) {
      data[param[i]] = color
    }
  }
}
const outputIframeCode = ()=>{
  let query_obj = {}
  for(let key in data){
    const val = data[key]
    if(val == null)
      continue
    query_obj[key] = val
  }
  console.log(query_obj)
  let encodedURL = btoa(encodeURIComponent(JSON.stringify(query_obj)));
  const src_url = `https://countdown-timer.ose.tw?params=${encodedURL}`
  iframe_code.value = `<iframe src="${src_url}" height="${card_height.value}px" width="100%" style="border: 0px"></iframe>`
  iframe_code_dialog_show.value=true
}
const copyIframeCode = ()=>{
  let input = document.createElement('input')
  //将input的值设置为需要复制的内容
  input.value = iframe_code.value;
  //添加input标签
  document.body.appendChild(input)
  //选中input标签
  input.select()
  //执行复制
  document.execCommand('copy')
  //移除input标签
  document.body.removeChild(input)
  ElMessage({
    message: '複製完成！',
    type: 'success',
  })
}
const toImageUpload = async (e) => {
  const form = new FormData();
  form.append('file', e.file)
  store.dispatch("countdown_timer/uploadImages", form)
}
const toPrevious = () => {
  router.go(-1)
}
const toSaveRecord = async () => {
  data.end_at = new Date (data.end_at).toISOString()
  data.start_at = new Date (data.start_at).toISOString()
  page_loading.value = true
  let params = {
    mode: queryString.mode,
    id: queryString.id,
    item: data
  }
  console.log({params})

  const saveResult = await store.dispatch('countdown_timer_store/saveCountdownTimer', params)
  ElMessage({
    showClose: true,
    message: '保存完成！',
    type: 'success',
  })
  if (queryString.mode != 'edit')
    router.go(-1)

  page_loading.value = false
}

initPage()

</script>
<style>
.ose-setting-tabs > .el-tabs__content {
  height: 92%;
}
.el-tabs__item {
  font-size: 16px;
}
</style>