<template>
  <div class="app-container">
    <div class="container">
      <!-- 表格数据 -->
      <el-table v-loading="loading"
        :data="reportList">
        <el-table-column label="报表 ID"
          key="id"
          prop="id"
          align="left"
          width="100"
          sortable />
        <el-table-column label="报表名称"
          key="name"
          prop="name"
          align="left"
          sortable>
          <template #default="{ row }">
            <div style="display: flex; align-items: center">
              <svg-icon icon-class="bg-document"></svg-icon>
              <el-link :href="reportBaseDomain + reportShareViewURL + row.previewUrl"
                target="_blank"
                style="margin-left: 10px">{{ row.name }}</el-link>
            </div>
          </template>
        </el-table-column>

        <!-- 操作预览 -->
        <el-table-column label="操作"
          key="operation"
          align="center">
          <template #default="scope">
            <el-button text
              type="primary"
              @click="previewClick(scope)">
              预览
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup
  name="Role">
  import { getQuickbiList } from "@/api"
  import useUserStore from '@/store/modules/user'

  const { proxy } = getCurrentInstance()
  const router = useRouter()
  const userStore = useUserStore()
  const reportBaseDomain = import.meta.env.VITE_APP_REPORT_URL // 基础域名
  const reportViewURL = import.meta.env.VITE_APP_REPORT_PREVIEW_URL // 预览
  const reportShareViewURL = import.meta.env.VITE_APP_REPORT_SHARE_PREVIEW_URL // 分享预览
  const reportEditURL = import.meta.env.VITE_APP_REPORT_EDIT_URL // 新增/编辑
  /*************** 报表列表部分 ****************/
  // 报表搜索
  const queryParams = reactive({
    name: undefined, // 报表名称
    category: undefined, // 报表类目
    pageNum: 1,
    pageSize: 10
  })

  // 获取报表列表
  const loading = ref(true)
  const reportList = ref([])
  const total = ref(0)
  // 查询报表列表
  function getReportList() {
    loading.value = true
    getQuickbiList(queryParams).then(response => {
      console.log(response)
      reportList.value = response.data
      loading.value = false
      // total.value = response.data.total
    })
  }
  getReportList()


  const previewClick = (scope) => {
    const row = scope.row
    console.log(row.previewUrl, row.id)
    router.push({
      path: `/report/quickbi/preview`,
      query: {
        url: row.previewUrl,
        id: row.id
      }
    })
  }
</script>
<style scoped
  lang="scss">
  .app-container {
    overflow-x: auto;
  }

  .container {
    min-width: 600px;
    /* 设置最小宽度确保表格可以横向滚动 */
  }

  /* 移动端适配 */
  @media (max-width: 768px) {
    .app-container {
      overflow-x: scroll;
      -webkit-overflow-scrolling: touch;
      /* iOS 平滑滚动 */
    }

    .container {
      min-width: 500px;
      /* 移动端需要更大的最小宽度 */
    }

    /* 表格样式调整 */
    ::v-deep(.el-table) {
      .el-table__body-wrapper {
        overflow-x: auto;
      }
    }
  }
</style>