<template>
  <div class="left-list">
    <div class="list-part">
      <span style="margin-bottom: 1rem;display: block;">今日热游</span>
      <ul v-if="gameHot.length">
        <li class="hot-item" v-for="(item,index) in gameHot" :key="index">
          <img :src="prefix + item.screenshot" class="game-poster" :onerror="posterErrorFun" alt=""/>
          <div class="detail">
            <div class="top">
              <span class="game_title ellip">{{ item.screen_name }}</span>
              <el-tag  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>

          </div>
          <div class="action" @click="downGame(item.download_url, item.download_url === '')" :style="item.download_url === ''? 'cursor:not-allowed;':'cursor: pointer;'">
            <img :src="img('download.png')" alt=""/>
            <div class="size">{{ bytesChange(item.size) }}</div>
          </div>
        </li>
      </ul>
      <el-empty v-else :image-size="200" />
    </div>
    <div class="list-part">
      <span style="margin-bottom: 1rem;display: block;">推荐游戏</span>
      <ul v-if="gameRecommand.length">
        <li class="hot-item" v-for="(item,index) in gameRecommand" :key="index">
          <img :src="prefix + item.screenshot" class="game-poster" :onerror="posterErrorFun" alt=""/>
          <div class="detail">
            <div class="top">
              <span class="game_title ellip">{{ item.screen_name }}</span>
              <el-tag  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>

          </div>
          <div class="action" @click="downGame(item.download_url, item.download_url === '')" :style="item.download_url === ''? 'cursor:not-allowed;':'cursor: pointer;'">
            <img :src="img('download.png')" alt=""/>
            <div class="size">{{ bytesChange(item.size) }}</div>
          </div>
        </li>
      </ul>
      <el-empty v-else :image-size="200" />
    </div>
  </div>
  <div class="right-action">
    <div v-if="user.isQingQue" class="action-item service">
      <el-icon><service /></el-icon>
      <div>客服qq：2885393309</div>
    </div>
    <div class="action-item">
      <div class="service">
        <el-icon><user-filled /></el-icon>
        <div>个人中心</div>
      </div>
      <el-divider />
      <div v-if="user.isLogin" class="money">
        <el-card shadow="hover" @click="router.push('/coin_type2')">
          <div class="service">
            <el-icon><wallet /></el-icon>
            <div>{{ user.profile.ecoinName + '余额:' + (user.profile.ecoin / 100).toFixed(2) }}</div>
          </div>
        </el-card>
        <el-card shadow="hover" @click="router.push('/coin_type1')">
          <div class="service">
            <el-icon><money /></el-icon>
            <div>{{ user.profile.ncoinName + '余额:' + (user.profile.ncoin / 100).toFixed(2) }}</div>
          </div>
        </el-card>
        <el-card shadow="hover" @click="router.push('/order')">
          <div class="service">
            <el-icon><tickets /></el-icon>
            <div>我的订单</div>
          </div>
        </el-card>
        <el-card shadow="hover" @click="router.push('/my_game')">
          <div class="service">
            <el-icon><present /></el-icon>
            <div>我的游戏</div>
          </div>
        </el-card>
        <el-card shadow="hover" @click="router.push('/settings')">
          <div class="service">
            <el-icon><setting /></el-icon>
            <div>账号设置</div>
          </div>
        </el-card>
      </div>
      <div v-else class="money" @click="login">
        <el-card shadow="hover">请登录</el-card>
      </div>
    </div>
    <div class="action-item">
      <div class="service">
        <el-icon><collection-tag /></el-icon>
        <div>热门标签</div>
      </div>
      <el-divider />
      <el-button v-for="(item,index) in tagArr" round :key="index" type="primary" size="small" style="margin-bottom: .3rem;" @click="toCate(item.id)">{{ item.name }}</el-button>
    </div>
    <div class="action-item">
      <div class="service">
        <el-icon><trophy-base /></el-icon>
        <div>排行榜</div>
      </div>
      <el-divider />
      <ul v-if="gameRecommand.length">
        <li class="rank-item" v-for="(item,index) in gameRecommand" :key="index">
          <el-tag size="small" round>{{ index+1 }}</el-tag>
          <img :src="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>
          </div>
        </li>
      </ul>
      <el-empty v-else :image-size="200" />

    </div>
  </div>
  <div class="mob-page">
    <van-swipe v-if="listSwiper.length" class="my-swipe" indicator-color="white" :autoplay="5000">
      <van-swipe-item v-for="item in listSwiper" :key="item.game_id" class="swiper-item">
        <img class="swiper-item-img" :src="prefix + item.screenshot" :onerror="posterErrorFun" />
        <div class="game-card ">
          <div class="ellip" style="color: #fff;">{{ item.screen_name }}</div>
          <van-button type="primary" size="small"  round :disabled="item.download_url === ''"  @click="downGame(item.download_url, item.download_url === '')">下载</van-button>
        </div>
      </van-swipe-item>
    </van-swipe>
    <van-swipe v-else class="my-swipe" indicator-color="white" :autoplay="5000">
      <van-swipe-item class="swiper-item">
        <img class="swiper-item-img" :src="img('defaultPoster.png')" :onerror="posterErrorFun" />
      </van-swipe-item>
    </van-swipe>
    <div class="menu">
      <van-grid column-num="4">
        <van-grid-item icon="filter-o" text="分类" to="/cate" />
        <van-grid-item icon="aim" text="我的游戏" to="/my_game" />
        <van-grid-item icon="completed" text="订单中心" to="/order" />
        <van-grid-item icon="setting-o" text="设置" to="/settings" />
      </van-grid>
    </div>
    <div class="games">
      <h3 class="list-title">今日热游</h3>
      <ul v-if="gameHot.length">
        <li class="rank-item" v-for="(item,index) in gameHot" :key="index">
          <img :src="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>
          </div>
          <van-button type="primary" :disabled="item.download_url === ''" size="small" round   @click="downGame(item.download_url, item.download_url === '')">下载</van-button>
        </li>
      </ul>
      <van-empty v-else description="暂无数据" />
    </div>
    <div class="games">
      <h3 class="list-title">推荐游戏</h3>
      <ul v-if="gameRecommand.length">
        <li class="rank-item" v-for="(item,index) in gameRecommand" :key="index">
          <img :src="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>
          </div>
          <van-button type="primary" :disabled="item.download_url === ''" size="small" round   @click="downGame(item.download_url, item.download_url === '')">下载</van-button>
        </li>
      </ul>
      <van-empty v-else description="暂无数据" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, inject } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useStore } from '@/store'
import { showFailToast } from 'vant'
import { getIndexGameHot, getIndexGameRecommand, getGameTag } from '@/api/index'
import { bytesChange } from '@/utils/bytesFormatter'

const img:any = inject('img')
const router = useRouter()
const route = useRoute()
const { user } = useStore()
// showSuccessToast('成功文案')
// showFailToast('失败文案')
const gameHot: any = ref([])
const gameRecommand: any = ref([])
const prefix = ref<string>('')
const isLoading = ref<boolean>(true)
const tagArr = ref<any[]>([])
const listSwiper: any = ref([])

const login = () => {
  user.loginFormVisible = true
}
onMounted(async() => {
  getIndexGameHot().then(res => {
    console.log('热门游戏', res.data)
    if (res.data.code === 200 && res.data.data) {
      gameHot.value = [...res.data.data.lists]
      prefix.value = res.data.data.prefix
      isLoading.value = false
      listSwiper.value = res.data.data.lists.splice(0, 5)
    }
  }).catch(err => {
    showFailToast(err.data.msg)
  })

  getIndexGameRecommand().then(res => {
    console.log('推荐游戏', res.data.data)
    if (res.data.code === 200 && res.data.data) {
      gameRecommand.value = res.data.data.lists
      prefix.value = res.data.data.prefix
      isLoading.value = false
    }
  }).catch(err => {
    showFailToast(err.data.msg)
  })
  getGameTag().then(res => {
    // console.log('标签', res);
    tagArr.value = res.data.data
  })
  if ('tologin' in route.query && route.query.tologin === '1') {
    user.loginFormVisible = true
  }
})
const logoErrorFun = (event:any) => {
  var imgDom = event.srcElement
  imgDom.src = img('default.png')
  imgDom.onerror = null
}
const posterErrorFun = (event:any) => {
  var imgDom = event.srcElement
  imgDom.src = img('defaultPoster.png')
  imgDom.onerror = null
}
const toCate = (id:number) => {
  router.push({
    path: '/cate',
    query: {
      tag_id: id
    }
  })
}
const downGame = (url: string, disabled:boolean) => {
  if (disabled) return
  // 下载游戏
  window.open(url)
  // window.location.href = url;
}
</script>

<style lang="scss" scoped>
#main{
  .main-wrap{
    .left-list{
      width: 36rem;
      box-sizing: border-box;
      overflow: hidden;
      .list-part{
        margin-bottom: 1rem;
        background-color: #fff;
        padding: 1.1rem 1rem;
        box-sizing: border-box;
      }
      .hot-item{
        height: 6.5rem;
        display: flex;
        align-items: center;
        margin-bottom: 1rem;
        // overflow: hidden;
        width: 100%;
        position: relative;
        .game-poster{
          height: 100%;
          width: 11rem;
          flex-shrink: 0;
        }
        .top{
          display: flex;
          align-items: center;
        }
        .detail{
          margin-left: 2rem;
          width: 15rem;
          .game_title{
            display: inline-block;
            margin-right: .5rem;
          }
          .desc{
            font-size: 0.7rem;
            color: #666;
            line-height: 1.3rem;
            margin: .5rem 0;
          }
        }
        &:hover .action{
            transform: translateX(-5rem);
        }
        .action{
          position: absolute;
          right: -6rem;
          top: 0;
          width: 5rem;
          height: 6.5rem;
          background-color: rgba($color: #99ccff, $alpha: .5);
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          transition: all 200ms ease;
          img{
            width: 2.5rem;
          }
          .size{
            font-size: .5rem;
            margin-top: .5rem;
            color: #856c6c;
          }

        }
      }
    }
    .right-action{
      width: 18rem;
      box-sizing: border-box;
      .action-item{
        background-color: #fff;
        padding: 1rem;
        box-sizing: border-box;
        margin-bottom: 1rem;
      }
      .service{
        display: flex;
        align-items: center;
        >div{
          padding-left: .5rem;
          font-size: .8rem;
        }
      }
      .money{
        font-size: .8rem;
      }
      .rank-item{
        display: flex;
        align-items: center;
        height: 3rem;
        margin-bottom: .5rem;
        width: 100%;
        justify-content: space-between;
        .game-logo{
          width: 3rem;
          height: 3rem;
          flex-shrink: 0;
          margin: 0 .5rem;
        }
        .top{
          margin-bottom: .2rem;

        }
        .game_title{
          font-size: .8rem;
        }
        .desc{
          width: 10rem;
          font-size: .6rem;
        }
      }
    }
    .mob-page{
      display: none;
      padding:10px 15px;
      box-sizing: border-box;
      background: radial-gradient(circle at 0 -10%,#dcf4f7,rgba(220,244,247,0) 50%),radial-gradient(circle at 100% 10%,#e8ebfc,rgba(232,235,252,0) 50%);
      // background-image: linear-gradient(#dcf4f7, #EBEEFD, #F5F9FF);
      min-height: calc(100vh - 60px);
      .my-swipe{
        height: 140px;
        overflow: hidden;
        border-radius: 5px;
        width: 100%;
        .swiper-item{
          position: relative;
          .game-card{
            position: absolute;
            right: 5px;
            bottom: 5px;
            // width: 46px;
            text-align: center;
            height: 46px;
          }
        }
        .swiper-item-img{
          height: 140px;
          width: 100%;
        }
      }
      .menu{
        margin-top: 10px;
      }
      .games{
        padding: 15px 5px;
        box-sizing: border-box;
        background-color: #EBEEFD;
        border-radius: var(--logo-radius);
        margin-top: 10px;
        --van-button-small-padding:15px;
        .list-title{
          font-size: 14px;
          margin-bottom: 10px;
        }
        .rank-item{
          display: flex;
          align-items: center;
          margin-bottom: 5px;
          justify-content: space-between;
          img{
            width: 18.13vw;
            height: 18.13vw;
            border-radius: var(--logo-radius);
            background-color: #fff;
          }
          .detail{
            width: 50vw;
            .top{
              display: flex;
              align-items: center;
              font-size: 14px;
              margin: 5px 0;
              .game_title{
                margin-right: 5px;
              }
            }
            .desc{
              color: rgba(0,0,0,0.4);
            }
          }
        }
      }
    }
  }
}
</style>
