<template>
  <el-main class="tw-h-full ">
    <el-row class="tw-h-full">
      <el-col class="tw-h-full">
        <el-card shadow="never" class="tw-h-full " body-class="tw-h-full ">
          <legacy-module-banner
            title="conutdown-timer 目前仍是 legacy 倒數計時器模組"
            description="這條線先維持既有營運功能，後續會在新平台主線穩定後，再整理它和 experiment / runtime / GTM 的關係。"
          />

          <el-row class="tw-items-center">
            <el-col :span="7">
              <el-input
                  v-model="search"
                  size="large"
                  placeholder="搜尋"
                  suffix-icon="Search"/>
            </el-col>
            <el-col :span="2" :offset="15">
              <el-button type="primary" size="large" :color="'#2f91ee'" @click="edit_page()" plain> 新增設定檔</el-button>
            </el-col>
          </el-row>
          <el-divider></el-divider>
          <el-table stripe border style="height: 87%" :data="filterTableData"   v-loading="table_load"
                    :default-sort="{prop:'id',order:'descending'}">
            <el-table-column v-for="(item,index) in table" :prop="item.id" :label="item.name"
                             :width="item.header_setup.width" :sortable="item.header_setup.sortable"
                             :show-overflow-tooltip="item.header_setup['show-overflow-tooltip']"/>
            <el-table-column fixed="right" label="操作" width="220" >
              <template #default="scope">
                <section class="tw-grid tw-grid-cols-3 tw-gap-2">
                  <div  class="">
                    <el-button size="default" @click="toEdit(scope.row)"
                    >編輯</el-button>
                  </div>
                  <div  class="">
                    <el-button size="default" @click="toCopy(scope.row)"
                    >複製</el-button>
                  </div>
                  <div  class="">
                    <el-button size="default" @click="toDelete(scope.row)"
                    >刪除</el-button>
                  </div>

                </section>


              </template>
            </el-table-column>

          </el-table>

        </el-card>
      </el-col>
    </el-row>
  </el-main>
</template>

<script setup>
import LegacyModuleBanner from "@/components/LegacyModuleBanner.vue";
import {ref, reactive, inject, provide, computed} from 'vue'
import {useRouter} from "vue-router";
import {useStore} from "vuex";
import { ElMessage, ElMessageBox } from 'element-plus'
import table from "@/module/conutdown-timer/model/table";
import { buildOseCardPreviewUrl } from "@/module/ose-card/service/card-url";

const store = useStore();
const router = useRouter()
const search = ref()
const table_load = ref(true)
const filterTableData = computed(()=>
    store.state.countdown_timer_store.countdown_timer_list.filter((data) => {
      if (!search.value)
        return data
      for(let index in table){
        try {
          if(data[table[index].id].toLowerCase().includes(search.value.toLowerCase()))
            return data
        }catch (e) {
          continue
        }
      }
    })
)

const edit_page = (queryParams)=>{
  table_load.value = true
  router.push({
    name:"conutdown-timer-edit",
    query:queryParams
  })
  table_load.value = false
}
const init_page = async ()=>{
  table_load.value = true
  await store.dispatch('countdown_timer_store/getCountdownTimerList',store.state.user.current_corporate_customer)
  table_load.value = false

}
const toPreview = (row_item)=>{
  window.open(buildOseCardPreviewUrl(row_item.landing_page, row_item.card_code))

}
const toEdit = (row_item)=>{
  store.commit('countdown_timer_store/edit_countdown_timer_data',row_item)
  edit_page({
    id:row_item.id,
    mode:"edit"
  })
}
const toCopy = (row_item)=>{
  store.commit('countdown_timer_store/edit_countdown_timer_data',row_item)
  edit_page({
    id:row_item.id,
    mode:"copy"
  })
}
const toDelete = async (row_item)=>{
  ElMessageBox.confirm(
      '請再次確認是否該刪除？',
      '注意',
      {
        confirmButtonText: '確認',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {
        table_load.value = true
        await store.dispatch('countdown_timer_store/deleteCountdownTimer',row_item.id)
        await store.dispatch('countdown_timer_store/getCountdownTimerList',store.state.user.current_corporate_customer)
        ElMessage({
          type: 'success',
          message: '刪除成功',
        })
        table_load.value = false
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '刪除取消',
        })
      })
}

init_page()
</script>

<style scoped>

</style>
