<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">
          <section class="tw-space-y-6">
            <legacy-module-banner
              title="ose-card 目前仍是 legacy 行銷圖卡模組"
              description="它會先維持營運可用，之後再對照新的 experiment / editor 主線逐步重構；這一區目前不作為新功能主入口。"
            />

            <section class="tw-flex tw-items-start tw-justify-between tw-gap-6">
              <div class="tw-space-y-2">
                <p class="tw-text-sm tw-font-medium tw-uppercase tw-tracking-[0.2em] tw-text-slate-400">
                  OSE Card
                </p>
                <div class="tw-space-y-1">
                  <h2 class="tw-text-3xl tw-font-bold tw-text-slate-900">行銷圖卡管理</h2>
                  <p class="tw-text-sm tw-leading-6 tw-text-slate-500">
                    先維持既有圖卡模組可用，同時把列表、編輯與預覽流程逐步收斂成更乾淨的模組邊界。
                  </p>
                </div>
              </div>

              <el-button type="primary" size="large" :color="'#2f91ee'" @click="openEditPage()" plain>
                新增設定檔
              </el-button>
            </section>

            <el-row class="tw-items-center">
              <el-col :span="12" class="tw-flex tw-gap-6 tw-items-center">
                <el-input
                  v-model="search"
                  size="large"
                  placeholder="搜尋"
                  suffix-icon="Search"/>
              <p class="tw-w-full">
                查詢開啟循環天數
                <el-switch v-model="carouselDaysSearch" aria-label="test"/>
              </p>

              </el-col>
            </el-row>
          </section>
          <el-divider></el-divider>
          <el-table stripe border style="height: 87%" :data="filterTableData" v-loading="tableLoad"
                    :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="150">
              <template #default="scope">
                <ose-card-table-actions
                  @preview="previewCard(scope.row)"
                  @edit="editCard(scope.row)"
                  @copy="copyCard(scope.row)"
                  @delete="deleteCard(scope.row)"
                />
              </template>
            </el-table-column>

          </el-table>

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

<script setup>
import LegacyModuleBanner from "@/components/LegacyModuleBanner.vue";
import OseCardTableActions from "@/module/ose-card/components/OseCardTableActions.vue";
import {useRouter} from "vue-router";
import {useStore} from "vuex";
import table from "@/module/ose-card/model/table";
import { useOseCardListPage } from "@/module/ose-card/service/use-ose-card-list-page";

const store = useStore();
const router = useRouter()
const {
  search,
  carouselDaysSearch,
  tableLoad,
  filterTableData,
  openEditPage,
  loadCardList,
  previewCard,
  editCard,
  copyCard,
  deleteCard,
} = useOseCardListPage({
  store,
  router,
  tableColumns: table,
});

loadCardList()
</script>

<style scoped>

</style>
