<template>
<view class="s-game-cell" @click="onClick(gData.gameId)">
  <view class="left-part">
    <image
        :src="gData.icon"
        mode="aspectFill"
    ></image>
  </view>
  <view class="right-part">
    <view class="title-view">
      <text>{{gData.name}}</text>
    </view>
    <view class="sub-title-view">
      <text>{{gData.subName}}</text>
    </view>
    <view class="tags-view">
      <uni-tag class="game-tag" v-for="tag in gData.tags" :text="tag.name" :inverted="!tag.fill" :type="tag.type"></uni-tag>
    </view>
    <view class="price-view">
      <view class="price">¥{{gData.price}}</view>
      <view class="price-raw">
        <text>¥{{gData.originPrice}}</text>
        <text v-if="gData.priceCountry">({{gData.priceCountry}})</text>
      </view>
      <uni-tag :text="gData.cutOff+'%折扣'" type="error"></uni-tag>
    </view>
  </view>
</view>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { IGameInfo } from '@/modules/gameinfo'

declare module 'vue/types/vue' {
  interface Vue {
    gData?: IGameInfo
  }
}

@Component({
  name: 'GameSmallCell',
  props: ['gData'],
})
export default class extends Vue{
  private tagList: string[] = ['t1', 't2']

  onClick(s: string) {
    console.log('on click: ', s)
    this.$emit("cellClicked", s)
  }
}
</script>
<style>
  .s-game-cell{
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 5px;
  }
  uni-image{
    height: auto;
  }
  .left-part{
    width: 25%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .left-part image {
    width: 25vw;
    --width: 100%;
    height: calc(25vw * 3 / 4);
  }
  .right-part {
    width: 75%;
    margin-left: 5px;
  }
  .title-view{
    font-size: 26rpx;
  }
  .sub-title-view {
    font-size: 22rpx;
    color: #999999;
  }
  .price-view {
    width: 100%;
    font-size: 24rpx;
    color: #999;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .price-view .price{
    color: red;
    font-size: 28rpx;
  }
  .price-view .price-raw {
    font-size: 18rpx;
    margin: auto;
  }
  .tags-view {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 5px 0;
    height: 16px;
  }
  .game-tag text {
    padding: 2px 5px!important;
    font-size: 20rpx!important;
  }
  uni-tag {
    margin-right: 5px;
    font-size: 20rpx!important;
  }
  .uni-tag {
    margin-right: 5px;
  }
</style>
