<template>
  <div class="report-list-title">
    <h2>Report List</h2>
    <Tooltip>
      <template #trigger>
        <IconQuestion class="icon-mark" />
      </template>
      <template #content>
        Create a series of Market Reports to display on the website, and visitors can switch to browse different reports
      </template>
    </Tooltip>
  </div>
  <div class="report-list-table" ref="listRef">
    <div class="search-title">
      <input v-model="searchText" @keydown.enter="resetSearch"  type="text" placeholder="Search Market Report Title">
      <IconSearch class="lofty-icon-search" @click.native="getList"/>
      <div class="add-report-btn" @click="addReport">
        <span class="plus-icon">+</span>
        <span>Add a New Report</span>
      </div>
    </div>
    <div class="list-header">
      <div class="header-title">Report Title</div>
      <div class="header-subscribe">Historical total of subscribers</div>
      <div class="header-display">
        Collection Display
        <Tooltip right>
          <template #trigger>
            <IconQuestion class="icon-mark" />
          </template>
          <template #content>
            Once the toggle is enabled, visitors will be able to select the report from the Market Report page on the website.
          </template>
        </Tooltip>
      </div>
      <div class="header-operation">
        Operations
        <Tooltip right>
          <template #trigger>
            <IconQuestion class="icon-mark" />
          </template>
          <template #content>
            You can quickly view the generated report, delete any report.
          </template>
        </Tooltip>
      </div>
    </div>
    <div class="list-body" :class="{'has-pagination': totalPage>1}">
      <div v-for="item in list" class="list-row">
        <div class="header-title">{{ item.title }}</div>
        <div class="header-subscribe">{{ item.subscribeCount }}</div>
        <div class="header-display">
          <Switch class="mt10" v-model="item.collectionDisplay" @change="changeDisplay($event, item)" needConfirm></Switch>
        </div>
        <div class="header-operation">
          <IconView @click="viewReport(item)" class="icon-view icon"/>
          <IconTrash @click="deleteReport(item)" class="icon"/>
        </div>
      </div>
      <div class="no-report-data" v-if="list.length === 0">
        <div>No Data</div>
      </div>
    </div>
    <pagination class="admin-pagination" @pageChange="pageChange" :pageNum="pageNum" :pageSize="5" :totalPage="totalPage"></pagination>
  </div>
</template>

<script setup>
import { IconQuestion, IconSearch, IconTrash, IconView } from "@/admin/icons/index.js";
import Tooltip from "@/admin/ui/tooltip.vue";
import pagination from '@/components/pagination/standard.vue';
import Switch from '@/components/switch/index.vue';
import {debounce} from "@/util/index.js";
import { useConfirm } from "@/hooks/useConfirm.js";
import http from "@/api/index.js";
import { showToast } from "@/admin/ui/constant.js";
import { showLoading } from "@/common/loading.js";

const { pageConfig } = defineProps({ pageConfig: Object})
const searchText = ref('')
const list = ref([])
const [pageNum, totalPage] = [ref(1),ref(0)]
function addReport() {
  const params = new URLSearchParams(window.location.search);
  params.set('page', 'lofty-shortcodes');
  params.set('sub', 'market-report');
  window.location.search = params.toString();
}
function resetSearch(e) {
  pageNum.value = 1;
  getList();
  e.target.blur();
}
const listRef = useTemplateRef('listRef');
const getList = debounce(async function () {
  const data = {
    title: searchText.value.trim(),
    pageNum: pageNum.value,
    pageSize: 5,
  }
  const hideLoading = showLoading(listRef.value);
  const res = await http.post('/admin/report/list', {data})
  totalPage.value = Math.ceil(res.data.total / 5)
  list.value = res.data.pluginReports || []
  hideLoading()
})
getList();
function pageChange(data){
  pageNum.value = data.page
  getList()
}
function viewReport(item) {
  window.open(`${window.location.origin}/${pageConfig.uri}?report=${encodeURIComponent(item.title)}&pageKey=market_report_page`);
}

const { confirm } = useConfirm()
function deleteReport(item) {
  confirm({
    title: 'Delete Market Report',
    content: "Delete this report? It will be removed from the Market Report page, and currently subscribed leads will be unsubscribed and won't receive the email.",
    onConfirm: async ()=> {
      const res = await http.post(`/admin/report/remove/${item.encryptId}`, {})
      if(res.status.code === 0) {
        showToast('Delete Successfully')
        await getList()
      }
    }
  })
}

function changeDisplay(val, item) {
  if(val === false) {
    confirm({
      title: 'Hide this Report',
      content: 'Hide this Report? It will be removed from the Market Report page, and currently subscribed leads will be unsubscribed and won\'t receive the email. If shown again, leads will need to resubscribe.',
      onConfirm: ()=> {
         sendAjaxDisplay(val, item)
      },
      confirmButtonText: 'UPDATE',
      type: 'normal'
    })
  } else {
    sendAjaxDisplay(val, item)
  }
}

async function sendAjaxDisplay(val, item) {
  const data = {
    encryptId: item.encryptId,
    collectionDisplay: val
  }
  const res = await http.post(`/admin/report/updateReport`, {data})
  if(res.status.code === 0) {
    showToast('Update Successfully');
    await getList()
  }
}
</script>
<style lang="scss">
$border: solid 1px #e0e0e0;
.icon-mark {
  color: #ccc;
  width: 14px;
  height: 14px;
  position: relative;
  top: 2px;
}
.report-list-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
$width-1: 100px;
$width-2: 220px;
$width-3: 200px;
$width-4: 160px;
.report-list-table {
  border: $border;
  position: relative;
  .search-title {
    display: flex;
    align-items: center;
    padding: 10px;
    input {
      height: 32px;
      width: 300px;
      padding-right: 100px;
      border-color: transparent;
      background: $gray-100;
    }
    input::placeholder {
      color: $gray-700;
      font-size: 12px;
    }
    .lofty-icon-search {
      cursor: pointer;
      position: relative;
      right: 30px;
    }
    .add-report-btn {
      width: 160px;
      height: 32px;
      margin-left: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #3858E9;
      border: solid 1px #3858E9;
      border-radius: $radius-small;
      cursor: pointer;
      .plus-icon {
        position: relative;
        font-size: 1.2rem;
        margin-right: 5px;
      }
    }
  }
  .list-header, .list-row {
    border-top: $border;
    height: 44px;
    line-height: 44px;
    display: flex;
    font-weight: 700;
    color: $gray-800;
    .header-title {
      width: $width-1;
      padding-left: 10px;
      flex: 1;
      border-right: $border;
    }
    .header-subscribe {
      width: $width-2;
      text-align: center;
      border-right: $border;
    }
    .header-display {
      width: $width-3;
      text-align: center;
      border-right: $border;
      .lofty-switch.on {
        background: #3858E9;
      }
    }
    .header-operation {
      width: $width-4;
      text-align: center;
      .icon {
        cursor: pointer;
      }
      .icon-view {
        margin-right: 20px;
        position: relative;
        top: 5px;
      }
    }
  }
  .list-body {
    position: relative;
    .list-row {
      font-weight: 400;
    }
    .no-report-data {
      border-top: $border;
      height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .has-pagination {
    .list-row:last-child {
      border-bottom: $border;
    }
  }
}
</style>