<template>
  <div v-show="visible" class="dialog-layout" >
    <div class="mark"/>
    <div class="dlalog">
      <img v-audio class="close btn" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Rectangle%201175%20copy.png" alt="" @click="visible = false">
      <div class="box">
        <Tab @on-change="(index) => { tabIndex = index}"/>
        <div class="dialog-content">
          <Load style="height: 100%;">
            <!-- 个人资料 -->
            <!-- <Info v-show="tabIndex === 0" :level-current="levelCurrent" :latest-achievement="latestAchievement" /> -->
            <!-- 游戏记录 -->
            <Record v-show="tabIndex === 0" :data="lastGame" />
            <!-- 分数转账表 -->
            <ScoreLog v-show="tabIndex === 1" />
          </Load>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Load from '@/components/layout/load'
import Tab from './tab' // 选项卡
import Info from './info' // 个人资料
import Record from './record' // 个人资料
import ScoreLog from './score-log' // 个人资料
export default {
  components: {
    Load,
    Tab, // 选项卡
    Info,
    Record,
    ScoreLog,
  },
  data() {
    const imagesList = [
      'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/big-sel.png',
      'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/small-nor.png',
      'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/big-nor.png',
      'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Rounded%20Rectangle%2018.png', // 滑块
      'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/last_game%20%E6%8B%B7%E8%B4%9D%202.png', // tabbar背景
      'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Rounded%20Rectangle%2019.png', // tabbar背景
    ]
    return {
      visible: false,
      tabIndex: 0,
      levelCurrent: {},
      latestAchievement: {}, // 个人功绩
      lastGame: [], // 游戏记录
    }
  },
  watch: {
    tabIndex() {
      this.network().lastGame()
    },
  },
  methods: {
    show() {
      this.visible = true
      this.network().levelCurrent()
      this.network().latestAchievement()
    },
    network() {
      return {
        levelCurrent: () => {
          this.$request({
            url: '/api/player/level/current',
            method: 'get',
          }).then(({ data }) => {
            this.levelCurrent = data
          })
        },
        latestAchievement: () => {
          this.$request({
            url: '/api/player/user/latestAchievement',
            method: 'get',
          }).then(({ data }) => {
            this.latestAchievement = data
          })
        },
        lastGame: () => {
          this.$request({
            url: '/api/player/user/lastGame',
            method: 'get',
          }).then(({ rows }) => {
            this.lastGame = rows
          })
        },
      }
    },
  },
}
</script>

<style lang="scss" scoped>

.dialog-layout {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  .mark {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: black;
    opacity: 0.3;
  }

  .dlalog {
    background-image: url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Rounded%20Rectangle%201131.png);
    background-size: 100% 100%;
    width: 620px;
    height: 350px;
    position: relative;
    color: white;
    z-index: 9999;
    .close {
      width: 34px;
      height: 34px;
      position: absolute;
      right: -17px;
      top: -17px;
      z-index: 1;
      border-radius: 100px;
      border: 3px solid white;
    }
    .box {
      margin: 0 22px 00px 24px;
      height: 100%;
      display: flex;
      flex-direction: column;
      .dialog-content {
        background-color: #003649;
        background-image: linear-gradient(#004156, #00212e);
        background-image: linear-gradient(#00212e, #004156);
        padding: 2px;
        flex: 1;
        overflow: auto;
      }
    }
  }
}

</style>
