<comment>
    # 组件注释
</comment>
<template >
    <div style="background: #e7e7e7 ;height: 100vh" class="my">
      <p v-show="false">{{getHistory}}</p>
      <p v-show="false">{{getUser}}</p>

      <div class="bg-w " style="height: 3rem;">
        <div class="centerVertical leftTitle">
          我的
        </div>
      </div>

      <!--头像名字账号-->
      <el-row class="bg-w" >
        <el-col :span="6">
          <div class=" centerHorizontally ">
            <img class="centerVertical" style="border-radius: 50%;width: 2.5rem;height: 2.5rem":src="setImage(User.userHead)">
          </div>
        </el-col>
        <el-col :span="8">
          <div >
            <div class="centerVertical">
              <div style="margin-top: 0.3rem;font-size: 0.8rem">
                {{User.userName}}
              </div>
              <div style="margin-top: 0.3rem;font-size: 0.75rem">
                {{User.userId}}
              </div>
            </div>

          </div>
        </el-col>
      </el-row>
      <!--金豆现金赞-->
      <el-row class="bg-w" style="margin-top: 0.05rem;">
        <el-col style="height: 5rem":span="8" v-for="(value, key, index) in assetInformation">
          <div class="centerHorizontally " style="height: 100%">
            <div class="centerVertical">
              <div>
                {{assetInformation[key].title}}
              </div>
              <div>
                {{assetInformation[key].msg}}
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <!--我的礼包-->
      <el-row class="bg-w" style="margin-top: 0.5rem;">
        <el-col :span="24" style="height: 3rem;">
            <div @click="showToast" class="centerVertical leftTitle">
              我的礼包
            </div>
          <div style="position: absolute;right: 1rem" class="centerVertical">
            ＞
          </div>
        </el-col>
      </el-row>
      <el-row class="bg-w" style="margin-top: 0.5rem;">
        <el-col :span="24" style="height: 8rem;">
            <div class=" leftTitle">
              最近在玩
            </div>
          <div v-show="historyGame.length ==0" class="horizontalSlip centerHorizontally" style="height: 7rem;">
            <div class= "centerVertical">
              最近没有在玩
            </div>
            </div>

          <!--</div>-->
          <div v-show="historyGame.length >0" class="horizontalSlip" style="height: 7rem;">
            <div class="slide-box " style="margin-top: 1rem" >
              <div @click="clickGame(key)" class="slide-item centerHorizontally" v-for="(value, key, index) in historyGame">
                <img class="centerVertical" style="width: 2.5rem;height: 2.5rem" :src="getImage(historyGame[key].gameId.gameImageUrl)">
                <div style="font-size: 1px">
                  {{historyGame[key].gameId.gameTitle}}
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row class="bg-w" style="margin-top: 0.5rem;">
        <el-col :span="24" style="height: 3rem;">
            <div @click="showToast" class="centerVertical leftTitle">
              金豆商城
            </div>
          <div style="position: absolute;right: 1rem" class="centerVertical">
            ＞
          </div>
        </el-col>
      </el-row>
    </div>
</template>

<script>
    //import logo from '../../../static/logo.png'
    export default {
        name: 'my',
        components: {
            //Xgplayer :  () => import('../xgplayer'),
        },
        data() {
            return {
              User : {},
              assetInformation : [
                {
                  title : "金币",
                  msg : 0
                },
                {
                  title : "K币",
                  msg : 0
                },
                {
                  title : "赞",
                  msg : 0
                },
              ],
              historyGame:[
                // {
                //   title : "第1个",
                //   msg : 99,
                //   gameUrl : 2048
                // },
                // {
                //   title : "第2个",
                //   msg : 99,
                //   gameUrl : 2048
                // },
                // {
                //   title : "第3个",
                //   msg : 99,
                //   gameUrl : 2048
                // },
                // {
                //   title : "第一个",
                //   msg : 99,
                //   gameUrl : 2048
                // },
                // {
                //   title : "第一个",
                //   msg : 99,
                //   gameUrl : 2048
                // },
                // {
                //   title : "第一个",
                //   msg : 99,
                //   gameUrl : 2048
                // },
                // {
                //   title : "第一个",
                //   msg : 99,
                //   gameUrl : 2048
                // },
                // {
                //   title : "第一个",
                //   msg : 99,
                //   gameUrl : 2048
                // },
                // {
                //   title : "第一个",
                //   msg : 99,
                //   gameUrl : 2048
                // },
                // {
                //   title : "第一个",
                //   msg : 99,
                //   gameUrl : 2048
                // },
              ]
            }
        },
        //作为子组件的时候应用父组件的时候设定的变量
        props: {},
        //用来观察 方法 对象 变量 有变化 走的回调方法
        watch: {},
        //正常方法
        methods: {
          clickGame(index){
            console.log("点了 什么游戏",index);
            this.utils.goRouterforPathPush(this, {
              path: 'matching',
              query: {data: this.historyGame[index].gameId}
            })
          },
          getImage(url){
           return this.utils.initHttpImageGame(url)
          },
          setImage(url){
           return url
          },
          showToast(){
            this.$emit("showToast");//自定义事件  传递值“子向父组件传值”
          }
        },
        //计算方法
        computed: {
          getHistory() {

            // console.log("网络数据是",this.$store.getters.getGetTableList);
            var list = this.$store.getters.getHistory
            console.log("网络数据是游戏记录", list, (list.data != null));
            if (list.data != null) {
              this.historyGame = list.data
            }

          },
          getUser() {

            // console.log("网络数据是",this.$store.getters.getGetTableList);
            var list = this.$store.getters.getUser
            console.log("网络数据是游戏记录", list, (list.data != null));
            if (list.data != null) {
              this.User = list.data
            }

          },
        },
        //生命周期 渲染html之前 可以初始化数据
        created() {

        },
        //生命周期 渲染html完毕 可以dom操作
        mounted() {

          // setTimeout(function () {
          //   for (var i = 0; i < 5; i++) {
          //       var data = {
          //           title : "第1个",
          //           msg : 99,
          //           gameUrl : 2048
          //       }
          //     this.historyGame.push(data)
          //   }
          // }.bind(this),2000)




        },
        //生命周期 离开这个页面
        destroyed() {

        },
      activated() {
        var sendData = {
          data: {
            userId: this.utils.getAdmin(),
          }
        }
        // this.utils.getListData(this,sendData);
        this.utils.getHistory(this, sendData);
        console.log("又来到这个页面了吗",this.historyGame);

        var sendDataUser = {
          data: {
            userId: this.utils.getAdmin(),
          }
        }
        // this.utils.getListData(this,sendData);
        this.utils.getUser(this, sendDataUser);
      }
    }
</script>

<style scoped>

  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    height: 5rem;

  }
  .mytop{
    background: #3a8ee6;
  }

  .lines {
    border-radius: 4px;
    height: 0.5rem;

  }
  /*白背景*/
  .bg-w{
    background: white;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .leftTitle{
    margin-left: 1rem;
  }
  .horizontalSlip{
    width: 100%;
  }
  /*.el-row{*/
    /*margin-bottom: 0rem*/
  /*}*/
  .slide-box{
    display: -webkit-box;
    overflow-x: scroll;
    -webkit-overflow-scrolling:touch;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .slide-item{
    width: 3.5rem;
    height: 5rem;
    /*border:1px solid #ccc;*/
    margin-right: 1rem;
    /*margin-left: 1rem;*/
  }
</style>
