<template>
  <div class="search_cont">
    <div class="search_key">
      <van-search
        v-model="search.params.keywords"
        placeholder="请输入游戏关键词"
        shape="round"
        show-action
        autofocus
        clearable
        @search="search.onSearch">
        <template #action>
          <div @click="search.onSearch">搜索</div>
        </template>
      </van-search>
    </div>
    <ul v-if="search.searchList.length > 0">
      <li class="hot-item" v-for="(item,index) in search.searchList" :key="index">
        <img :src="search.prefix + item.logopic" class="game-logo" :onerror="logoErrorFun" alt=""/>
        <div class="detail">
          <div class="top">
            <span class="game_title ellip">{{ item.screen_name }}</span>
            <el-tag size="small" type="success">{{ (item.game_score / 10) > 5 ? '5.0' : (item.game_score /
              10).toFixed(1)
            }}</el-tag>
          </div>
          <div class="desc ellip">{{ item.sketch || '暂无简介' }}</div>
          <el-button type="primary" :disabled="item.download_url === '' ? true : false" @click="downGame(item.download_url)"  class="pcbt" :icon="Download">
            {{ bytesChange(item.size) }}
          </el-button>
        </div>
        <div class="right">
          <van-button size="small" color="#909399" type="success" :disabled="item.download_url === '' ? true : false"  round  @click="downGame(item.download_url)">下载</van-button>
        </div>
        <img :src="search.prefix + item.screenshot" class="game-poster" :onerror="posterErrorFun" alt=""/>
      </li>
      <div class="more-action">
        <el-button v-if="search.params.page*search.params.pagesize < search.total" type="primary" @click="search.loadMore">更多</el-button>
        <el-divider v-else>没有更多了</el-divider>
      </div>
    </ul>
    <van-empty v-else description="暂无数据" />
  </div>
</template>

<script setup lang="ts">
import { onMounted, inject } from 'vue'
// import { useRouter, useRoute } from 'vue-router'
import { useStore } from '@/store'
// import { showSuccessToast, showFailToast } from 'vant'
// import Message from '@/utils/Message'
// import { getGameList } from '@/api/index'
import { bytesChange } from '@/utils/bytesFormatter'
import { Download } from '@element-plus/icons-vue'

const img:any = inject('img')
// const router = useRouter()
// const route = useRoute()
// const { user } = useStore()
const { search } = useStore()
// showSuccessToast('成功文案')
// showFailToast('失败文案')

const posterErrorFun = (event:any) => {
  var imgDom = event.srcElement
  imgDom.src = img('defaultPoster.png')
  imgDom.onerror = null
}
const logoErrorFun = (event:any) => {
  var imgDom = event.srcElement
  imgDom.src = img('default.png')
  imgDom.onerror = null
}
const downGame = (url: string) => {
  // 下载游戏
  window.open(url)
  // window.location.href = url;
}
onMounted(() => {

})

</script>

<style lang="scss" scoped>
.search_cont{
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  background-color: #fff;
  min-height: 40rem;
  .search_key{
    display: none;
  }
  .hot-item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 8rem;
    overflow: hidden;
    margin-bottom: .7rem;
    border-bottom: .01rem solid #ddd;
    box-sizing: border-box;
    padding: .8rem 0;
    width: 100%;
    .game-logo{
      width: 6.5rem;
      height: 6.5rem;
      border-radius: .5rem;
      overflow: hidden;
      flex-shrink: 0;
      margin-right: 2rem;
    }
    .detail{
      // flex: 1;
      width: 25rem;
      .top{
        display: flex;
        align-items: center;
        .game_title{
          display: inline-block;
          margin-right: 0.5rem;
        }
      }
      .desc{
          font-size: 0.7rem;
          color: #666;
          line-height: 1.3rem;
          margin: 0.5rem 0;
        }
    }
    .right{
      height: 100%;
      // display: flex;
      display: none;
      align-items: center;
      justify-content: space-around;
      flex-direction: column;
    }
    .game-poster{
      width: 11rem;
      height: 6.5rem;
      display: block;
    }
  }
  .more-action {
    margin: 1rem auto;
    text-align: center;
  }
}
</style>
