<script setup lang="ts">

const props = defineProps({
  fromWeb:String,
  limit:Number,
  hours:Number
})
interface TopHots{
  id:number,
  times:number,
  word:string,
  lastTime: string,
  fromWeb: {
    id: number,
    name: string,
    fromUrl: string,
    searchUrl: string
  }
}
const rawData:TopHots[] = await $fetch(`https://data.zziyu.cn/hot/top/${props.fromWeb}?limit=${props.limit}&hours=${props.hours}`)
const data:TopHots[] = []
rawData.forEach(d=>{
  let newD= d;
  let aDate = new Date(Date.parse(d.lastTime))
  newD.lastTime=aDate.toLocaleString()
  data.push(newD)
})
const router = useRouter()
const gotoWeb = (row, column, cell, event)=>{
  // console.log(row.fromWeb.searchUrl+row.word)
  window.open(row.fromWeb.searchUrl+row.word,"_blank")
}
</script>

<template>
      <client-only>
        <el-table :data="data" style="width: 90%;max-width: 600px;margin: 10px;margin-bottom: 15px" :table-layout="'fixed'" @cell-click="gotoWeb">
          <el-table-column prop="word" :label="props.fromWeb+'热搜'" width="180" />
          <el-table-column prop="lastTime" label="最后上榜" width="180" />
          <el-table-column prop="times" label="上榜次数" />
        </el-table>
      </client-only>
</template>

<style scoped>

</style>