<template>
  <div class="secret-container">
    <div class="title">以下是Redis的软件详情</div>
    <div class="mt-3">
      <OssDetailCp ref="ossDetailRef" :versionId="versionId"/>
    </div>

    <d-button v-if="isLogin" class="output-btn" @click="openSubscription">订阅</d-button>
    <div class="bubble-bottom-operations">
      <img onclick="handleRefresh()"  src="@/assets/imgs/jyh/ai/icon_generate.png" />
      <i class="icon-file" title="复制" onclick="handleFile()"></i>
      <i class="icon-like" title="点赞" onclick="handleLike()"></i>
      <i class="icon-dislike" title="踩" onclick="handleDislike()"></i>
      <i class="icon-clever-customer" title="智能客服" onclick="handleCustomerService()"></i>
      <i class="icon-more-operate" title="更多操作" onclick="handleMore()"></i>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, watch, nextTick } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { getOrgInfo } from '@/views/Org/hooks/orgInfo';
import { Message } from 'vue-devui';
import { storeToRefs } from 'pinia';
import NoData from '@/components/NoData/NoData.vue';
import { useAccountStore } from '@/stores/user';
import * as XLSX from 'xlsx';
const { formatTime } = useTimeFormat();
import { getHomeNoticeList, getReleaseExport, releasePage, searchLanguageList } from '@/api/jyh';
import { useTimeFormat } from '@/utils/hooks/useTimeFormat';
import { useGlobalInfoStore } from '@/stores/Global';
import OssDetailCp from './OssDetail/index.vue'

const router = useRouter();
const route = useRoute();

const filterTableRef = ref();
const ossDetailRef = ref(null);
const versionId = ref('3238');
const { namespace } = getOrgInfo();
const userInfo = useAccountStore();
const { isLogin } = storeToRefs(userInfo);
// 定义 tableKey，用于强制刷新表格
const tableKey = ref(0);
const tableData = ref([]);

// 定义 columns 数据
const columns = ref([
  { key: 'subject', label: '漏洞类型', visible: true, filterable: true, sortable: false },
  { key: 'overview', label: '漏洞内容', visible: true, filterable: true, sortable: false },
  { key: 'importance', label: '重要性', visible: true, filterable: true, sortable: false,width: 80 },
  { key: 'publishTime', label: '时间', visible: true, filterable: true, sortable: false },
 ]);

// 调用子组件方法的示例函数
function openSubscription() {
  if (ossDetailRef.value) {
    // 假设子组件有一个名为 'someMethod' 的方法
    ossDetailRef.value.openSubscription();
  }
}

// 跳转
const gotoDetail = (row) => {
  // 后续请换成params，暂时params传参没传过去
  router.push({
    path: 'repoDetail/' + row.id
  });
};

const getReleaseList = async () => {
  const { data, error }  = await getHomeNoticeList();
  if (!error && data) {
    tableData.value = data.data || [];
    console.log(tableData.value);
  }
};

onMounted(async () => {
  nextTick(() => {
    getReleaseList();
  });
  // getReleaseList();
});

const exportResult = async () => {
  const selectDatas = tableData.value.map((d) => d.id);
  if (!tableData.value.length || selectDatas.length <= 0) {
    Message.info('未选择任何数据');
    return;
  }

  const { data, error } = await getReleaseExport({
    list: selectDatas,
  });
  if (data && !error) {
    // 方法1：如果后端返回的是文件流（Blob）
    const blob = new Blob([data.data]);
    const downloadUrl = window.URL.createObjectURL(blob);

    // 创建一个临时的a标签触发下载
    const link = document.createElement('a');
    link.href = downloadUrl;

    // 从Content-Disposition头中获取文件名，或者使用默认文件名
    const contentDisposition = data.headers['content-disposition'];
    let fileName = 'export.xlsx'; // 默认文件名
    // if (contentDisposition) {
    //   const fileNameMatch = contentDisposition.match(/filename="?(.+)"?/);
    //   if (fileNameMatch && fileNameMatch[1]) {
    //     fileName = fileNameMatch[1].replace(/^[^0-9]*|[^0-9.xlsx]*$/g, "");
    //   }
    // }

    link.setAttribute('download', fileName);
    document.body.appendChild(link);
    link.click();

    // 清理
    document.body.removeChild(link);
    window.URL.revokeObjectURL(downloadUrl);
  } else {
    console.error('导出失败:', error);
    // 这里可以添加错误提示，比如使用Element Plus的ElMessage
    ElMessage.error('文件导出失败');
  }
};

// 事件处理函数
function handleRefresh() {
  console.log('刷新点击');
  // 实际业务代码示例：
  // location.reload(); // 重新加载页面
  // 或调用API刷新数据
}

function handleFile() {
  console.log('文件点击');
  // 示例：触发文件上传
  // document.getElementById('file-input').click();
}

function handleLike() {
  console.log('点赞点击');
  // 示例：切换点赞状态
  const likeBtn = document.querySelector('.icon-like');
  likeBtn.classList.toggle('active');
  // 这里可以添加AJAX请求提交点赞状态
}

function handleDislike() {
  console.log('踩点击');
  // 类似点赞的逻辑
  const dislikeBtn = document.querySelector('.icon-dislike');
  dislikeBtn.classList.toggle('active');
}

function handleCustomerService() {
  console.log('客服点击');
  // 示例：打开客服对话框
  // openChatWindow();
}

function handleMore() {
  console.log('更多操作点击');
  // 示例：显示下拉菜单
  // showDropdownMenu();
}

</script>

<style scoped lang="scss">
@import 'devui-theme/styles-var/devui-var.scss';

.secret-container {
  position: relative;
  //min-height: 600px;
  background: #ffffff;
  padding: 20px;
  margin-top: 16px;
  border-radius: 15px;

  .title {
    color: #191919;
    font-family: HarmonyOS Sans SC;
    font-weight: bold;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0px;
    text-align: left;
  }

  .secret-op {
    position: absolute;
    right: 0;
    top: 0;
  }
}

.error {
  color: $devui-contrast;
}

:deep(.devui-table__row td) {
  padding-top: 16px;
  padding-bottom: 16px;
}

:deep(.devui-tag .devui-tag--default) {
  background-color: #fff;
  border-radius: 12px;
  padding: 4px 8px;
  font-size: 12px;
  line-height: 16px;
  margin-right: 8px;
  border: 1px solid #e3e3ee;
}

.one-line {
  word-break: break-all;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.title {
  font-size: 14px;
  font-weight: 400;
  color: #9a9b9c;
  line-height: 20px;
}

.cur-title {
  font-size: 14px;
  font-weight: 500;
  color: #2d2d2e;
  line-height: 20px;
}

.output-btn {
  border-radius: 16px;
  background: #DFDFDF;


  color: #191919;
  font-family: HarmonyOS Sans SC;
  font-weight: regular;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0px;
  text-align: left;
}

.secret-breadcrumb {
  padding: 7px 20px 12px;
  background: #ffffff;
}

.bubble-bottom-operations {
  margin-top: 16px;
  margin-left: auto;
  display: flex;
  gap: 8px; /* 图标之间的间隔 */
  align-items: center; /* 垂直居中图标 */
  justify-content: end;
  font-size: 14px;
}
</style>
