<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="scope">
            <div style="display: flex; align-items: center">
              <svg-icon icon-class="bg-document"></svg-icon>
              <span style="margin-left: 10px">{{ scope.row.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="创建人"
          key="createBy"
          prop="createBy"
          align="left"
          width="180"
          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="operation"
          align="center"
          width="180">
          <template #default="scope">
            <el-button link
              type="primary"
              icon="Reading"
              @click="previewReport(scope.row)">预览</el-button>
          </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 userStore = useUserStore()
  const reportViewURL = import.meta.env.VITE_APP_REPORT_PREVIEW_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 previewReport(row) {
    window.open(`${reportViewURL}/${row.id}?token=${getToken()}&tenantId=${userStore.$state.userInfo.deptId}`)
  }

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

</style>