<template>
  <div class="box-border w-913px border border-[#EEEEEE] rounded-6px border-solid bg-[#FFFFFF] px-30px py-21px">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="我的上传" name="我的上传">
        <uploadTable v-model:type="pageReq.type" v-model="result.list" :refresh="handlerefresh" />
      </el-tab-pane>
      <el-tab-pane label="我的购买" name="我的购买">
        <downloadTable v-model="result.list" />
      </el-tab-pane>
      <el-tab-pane label="收藏夹" name="收藏夹">
        <favoriteTable v-model:type="pageReq.type" v-model="result.list" :refresh="handlerefresh" />
      </el-tab-pane>
      <el-tab-pane label="浏览记录" name="浏览记录">
        <browseTable v-model="result.list" />
      </el-tab-pane>
    </el-tabs>

    <!-- 分页 -->
    <div class="mt-10px flex justify-center">
      <el-pagination
        v-model:current-page="pageReq.pageNum"
        v-model:page-size="pageReq.pageSize"
        :page-sizes="[10, 20, 30]"
        :total="result.total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleClickSize"
        @current-change="handeClickCurrent"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive } from 'vue'

  import { getContentPage, getUserToolBoxPage, getUserFavoritePage, getOwnContentPage } from '~/api/personal-center/index'
  // import { ProjectHistoryResVO } from '~/api/personal-center/types'

  import uploadTable from './components/upload-table.vue'
  import downloadTable from './components/download-table.vue'
  import favoriteTable from './components/favorite-table.vue'
  import browseTable from './components/browse-table.vue'
  import useUserStore from '~/stores/user'
  const userStore = useUserStore()

  const activeName = ref('我的上传')
  const pageReq = reactive({
    pageNum: 1,
    pageSize: 10,
    type: 1, //类型 1 图纸 2 工具箱
  })
  const result = reactive({
    total: 0, //总条数
    list: [] as any[], //列表
  })

  const handleClickSize = (val: number) => {
    pageReq.pageSize = val
    fetchData()
  }

  const handeClickCurrent = (val: number) => {
    pageReq.pageNum = val
    fetchData()
  }

  const fetchData = async () => {
    let res = {} as any
    switch (activeName.value) {
      case '我的上传':
        res = await getOwnContentPage({ ...pageReq, pageNo: pageReq.pageNum }) // 我的上传
        if (res.code === 0) {
          result.total = res.data.total || 0
          result.list = res.data.list || []
        }
        break
      case '我的购买':
        res = await getUserToolBoxPage({ ...pageReq, type: undefined }) // 我的下载
        if (res.code === 0) {
          result.total = res.data.total || 0
          result.list = res.data.list || []
        }
        break
      case '收藏夹':
        res = await getUserFavoritePage({ ...pageReq, pageNo: pageReq.pageNum, userId: userStore.userId }) // 收藏夹
        if (res.code === 0) {
          result.total = res.data.total || 0
          result.list = res.data.list || []
        }
        break
      case '浏览记录':
        res = await getContentPage(pageReq) // 浏览记录
        if (res.code === 0) {
          result.total = res.data.total || 0
          result.list = res.data.list || []
        }
        break
      default:
        break
    }
  }

  const handlerefresh = () => {
    pageReq.pageNum = 1
    fetchData()
  }

  const handleClick = (tab: any) => {
    console.log(tab)
    activeName.value = tab.props.name
    pageReq.pageNum = 1
    result.list = []
    result.total = 0
    fetchData()
  }

  fetchData()
</script>

<style scoped>
  :deep(.el-input__inner) {
    text-align: center !important;
  }
</style>
