<template>
  <PageLayout title="ShortCode Log" :showHeader="false" description="Review the history and details of your Lofty WordPress ShortCode generation history on this log page.">
    <div class="lofty-shortCode-log">
      <Select v-model="type" :list="typeList" show-all class="short-log-select" size="small" @change="resetSearch">
        <template v-slot:label="{ label }">
          <span>Type: {{label || 'All'}}</span>
        </template>
      </Select>

      <div class="short-log-table">
        <div class="list-header">
          <div class="header-type">Type</div>
          <div class="header-content">Content</div>
          <div class="header-operation">
            Operations
          </div>
        </div>

        <div class="list-body" :class="{'has-pagination': totalPage>1}">
          <div v-for="item in list" class="list-row">
            <div class="header-type">{{ typeMap[item.type] }}</div>
            <div class="header-content" v-text="item.content "></div>
            <div class="header-operation">
              <IconCopy @click="copyShortCode(item)" class="icon"/>
              <IconTrash @click="deleteLog(item)" class="icon icon-trash"/>
            </div>
          </div>
          <div class="no-log-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>
        <Loading :loading="loading" />
      </div>

    </div>
  </PageLayout>
</template>

<script setup>
import PageLayout from "@/admin/common/PageLayout.vue";
import Select from "@/components/select/index.vue";
import pagination from '@/components/pagination/standard.vue';
import { typeList, typeMap } from '../common.js';
import http from "@/api/index.js"
import { IconTrash, IconCopy } from "@/admin/icons/index.js";
import { showToast } from "@/admin/ui/constant.js";
import { useCopy } from '@/hooks/useCopy.js'
import Loading from "@/admin/ui/loading.vue";
const { copyCode } = useCopy()
const type = ref('')
const [pageNum, totalPage, list, loading] = [ref(1), ref(1), ref([]), ref(false)]
getList()

function resetSearch(v) {
  type.value = v
  pageNum.value = 1
  getList();
}
function pageChange(data){
  pageNum.value = data.page
  getList()
}
async function getList() {
  loading.value = true
  const res = await http.get(`/admin/shortCodeLog/list?pageNum=${pageNum.value}&pageSize=5&type=${type.value}`)
  totalPage.value = Math.ceil(res.data.total / 5)
  list.value = res.data.shortCodeList
  loading.value = false
}

async function deleteLog(log) {
  const res = await http.post('/admin/shortCodeLog/remove', {
    data: { id: log.id }
  })
  if(res.status.code === 0) {
    showToast('Delete Successfully')
    pageNum.value = 1;
    await getList()
  }
}

function copyShortCode(item) {
  copyCode(item.content)
  showToast('Copy Successfully')
}
</script>
<style lang="scss">
.lofty-shortCode-log {
  padding: 22px 20px 20px;
  .short-log-select {
    width: 200px;
    .data-list {
      ul {
        li {
          line-height: 32px;
        }
      }
    }
  }
}
$width-1: 200px;
$width-2: 160px;
$width-3: 200px;
$border: solid 1px #e0e0e0;
.short-log-table {
  margin-top: 20px;
  border: $border;
  .list-header {
    border-bottom: $border;
  }
  .list-header, .list-row {
    height: 44px;
    line-height: 44px;
    display: flex;
    font-weight: 700;
    color: $gray-800;
    .header-type {
      width: $width-1;
      padding-left: 10px;
      border-right: $border;
    }
    .header-content {
      width: $width-2;
      border-right: $border;
      flex: 1;
      white-space: pre;
      padding-left: 20px;
    }
    .header-operation {
      width: $width-3;
      text-align: center;
      .icon {
        cursor: pointer;
        width: 20px;
        height: 20px;
      }
      .icon-trash {
        margin-left: 20px;
      }
    }
  }
  .list-body {
    font-weight: 400;
    .list-row {
      font-weight: 400;
      border-bottom: $border;
      height: fit-content;
      .header-content {
        height: 200px;
        overflow: auto;
        padding: 10px;
        line-height: 20px;
      }
      .header-operation {
        padding-top: 10px;
      }
    }
    .list-row:last-child {
      border-bottom: none;
    }
    .no-log-data {
      height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .has-pagination {
    .list-row:last-child {
      border-bottom: $border;
    }
  }
}
</style>