<template>
  <div class="app-container">
    <div class="container">
      <el-form :model="queryParams"
        ref="queryRef"
        inline
        label-width="68px"
        v-show="showSearch">
        <el-form-item label="报表名称"
          prop="name">
          <el-input v-model="queryParams.name"
            placeholder="搜索报表名称"
            clearable
            style="width: 240px"
            @input="getReportList" />
        </el-form-item>
        <el-form-item label="报表类目"
          prop="category">
          <el-select v-model="queryParams.category"
            placeholder="选择报表类目"
            clearable
            filterable
            @change="getReportList"
            style="width: 240px">
            <el-option v-for="item in categoryList"
              :label="item.name"
              :value="item.id" />
          </el-select>
        </el-form-item>
      </el-form>

      <!-- 表格数据 -->
      <el-table v-loading="loading"
        :data="reportList">
        <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="categoryName"
          prop="categoryName"
          align="left"
          width="120"
          sortable />
        <el-table-column label="创建人"
          key="createBy"
          prop="createBy"
          align="left"
          width="120"
          sortable />
        <el-table-column label="创建时间"
          prop="createTime"
          align="left"
          width="180"
          sortable>
          <template #default="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="是否被分享"
          key="hasShare"
          prop="hasShare"
          align="center"
          width="120"
          sortable>
          <!-- 使用 tag 标记颜色 -->
          <template #default="{ row }">
            <el-tag :type="row.hasShare === 1 ? 'success' : 'danger'">{{ row.hasShare === 1 ? '是' : '否' }}</el-tag>
          </template>
        </el-table-column>
        <!-- 操作预览 -->
        <el-table-column label="操作"
          key="operation"
          align="center"
          width="120">
          <template #default="scope">
            <el-tooltip content="复制报表地址">
              <el-button text
                type="primary"
                icon="Share"
                v-copyText="reportBaseDomain + reportShareViewURL + scope.row.previewUrl"
                v-copyText:callback="copyTextSuccess" />
            </el-tooltip>

          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getReportList" />
    </div>
  </div>
</template>

<script setup
  name="Role">
  import { getReportListByUserAPI, selReportCategoryAPI } from "@/api"
  import { getToken } from '@/utils/auth'
  import useUserStore from '@/store/modules/user'

  const { proxy } = getCurrentInstance()
  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 showSearch = ref(true)
  const queryParams = reactive({
    name: undefined, // 报表名称
    category: undefined, // 报表类目
    pageNum: 1,
    pageSize: 10
  })
  // 获取设置报表类目下拉菜单
  const categoryList = ref([])
  const getCategoryList = () => {
    selReportCategoryAPI().then(res => {
      categoryList.value = res.data;
    })
  }
  getCategoryList()

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

  // 点击某行报表
  function copyTextSuccess() {
    proxy.$modal.msgSuccess('链接已复制到剪切板')
  }

</script>
<style scoped
  lang="scss"></style>