<template>
  <div class="header">
    <div class="left-block">
      <img class="left-block-bg1" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/Pattern.png" alt="">
      <img src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/logo.png" alt="" class="logo">
      <div class="data">
        {{ time | filterData }}
      </div>
      <div class="time">
        {{ time | filterTime }}
      </div>
    </div>
    <div class="bar">
      <div class="input-box">
        <div class="input-img">
          <img src="https://kuawai.s3.ap-east-1.amazonaws.com/temp/header/gold-coin.png" alt="">
        </div>
        <div class="value">
          {{ userInfo.goldCredit }}
        </div>
      </div>
      <div class="input-box">
        <div class="input-img" style="width: 54px; top: -10px; left: -8px">
          <img src="https://kuawai.s3.ap-east-1.amazonaws.com/temp/header/red-coin.png" alt="">
        </div>
        <div class="value">
          {{ userInfo.redCredit }}
        </div>
      </div>
      <CenterBox class="center-bg"/>
      <div class="profile btn" @click="click().profile()">
        <img v-if="userInfo.avatar" :src="userInfo.avatar | img" alt="" class="profile-img">
        <img v-else src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/head1.png" alt="" class="profile-img">
        <template v-if="userInfo.id">
          <img :src="cardImg[userInfo.playerLevelName]" alt="" class="card-img">
        </template>
        <img v-else src="./static/profile/card.png" alt="" class="card-img">
      </div>
    </div>
    <div class="right-block">
      <div v-audio class="btn exit" @click="click().quit()">
        <img src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/Exit%20Button.png" alt="">
      </div>
      <div class="btn full-screen" @click="click().fullScreen()">
        <img v-audio src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/Full%20Screen%20Button.png" alt="">
      </div>
    </div>
    <Confirm ref="confirm" title="登出" message="您要登出当前账号吗？" @confirm="() => network().quitAccount()"/>
    <Confirm
      ref="outGame"
      :tip="`Location No：${device ? device.assetNumber : ''} - Endless Treasur`"
      title="退出游戏"
      message="机器中所有剩余的积分将自动转回您的钱包。"
      @confirm="() => quitGame()"/>
  </div>
</template>

<script>

import dayjs from 'dayjs'
import screenfull from 'screenfull'
import { mapState } from 'vuex'
import Confirm from '@/components/dialog/confirm'
import CenterBox from './components/center-box'

export default {
  filters: {
    filterData(time) {
      return dayjs(time).format('dddd,DD,MMMM,YYYY')
    },
    filterTime(time) {
      return dayjs(time).format('HH:mm:ss')
    },
  },
  components: {
    Confirm,
    CenterBox,
  },
  data() {
    // 卡片
    const cardImg = {
      Red: 'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/card-Red.png',
      Gold: 'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/card-Gold.png',
      Silver: 'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/card-Silver.png',
      Diamond: 'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/card-Diamond.png',
    }
    return {
      time: new Date(),
      cardImg,
    }
  },
  computed: {
    ...mapState([
      'userInfo',
      'device',
    ]),
  },
  created() {
    this.initTime()
  },
  methods: {
    initTime() {
      this.time = new Date()
      setTimeout(() => {
        this.initTime()
      }, 1000)
    },
    click() {
      return {
        quit: () => {
          const { name } = this.$route
          console.log('quit', name)
          switch (name) {
            case 'index-game': // 如果是游戏页面
              this.$refs.outGame.show()
              break
            case 'index-device':
              this.$refs.confirm.show()
              break
          }
        },
        fullScreen: () => {
          console.log('全屏')
          // 如果不允许进入全屏，发出不允许提示
          if (!screenfull.enabled) {
            this.$message('您的浏览器不能全屏')
            return false
          }
          if (!screenfull.isFullscreen) {
            screenfull.toggle()
          } else {
            screenfull.exit()
          }
        },
        // 个人中心
        profile: () => {
          this.$parent.showUserDialog() // 调用父级弹出个人中心
        },
      }
    },
    network() {
      return {
        quitAccount: () => {
          console.log('退出登录接口')
          this.$request({
            url: '/api/player/logout',
            method: 'post',
          }).then(() => {
            this.$router.replace({ path: '/login' })
          })
        },
      }
    },
    quitGame() {
      const { id } = this.$route.query
      const params = {
        deviceId: id,
      }
      this.$request({
        url: '/api/app/device/quitDevice',
        method: 'get',
        params,
      }).then(({ data }) => {
        console.log('退出游戏页面')
      }).catch(() => {
        if (this.$route.query.redirectUrl) { // 如果有回调地址，返回游戏页面
          location.replace(this.$route.query.redirectUrl)
        } else {
          location.reload()
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.header {
  height: 80px;
  position: relative;
  z-index: 100;
}
.left-block {
  position: absolute;
  left: 0;
  top: 0;
  width: 170px;
  height: 139px;
  background-image: url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/ic_logo_01.png?t=1);
  background-size: 100% 100%;
  z-index: 1;
  .left-block-bg1 {
    position: absolute;
    width: 130px;
  }
  .logo {
    width: 136px;
    margin: 8px 0 0;
  }
  .data {
    color: white;
    font-size: 12px;
    font-weight: 100;
    padding-left: 30px;
    text-transform: uppercase;
    zoom: 0.7;
  }
  .time{
    color: white;
    font-size: 25px;
    margin: 4px 14px;
    font-weight: bolder;
  }
}
.right-block {
  position: absolute;
  right: 0;
  top: 0;
  width: 110px;
  height: 108px;
  background-image: url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/Logout%20Button1.png);
  background-size: 100% 100%;
  box-sizing: border-box;
  z-index: 999;
  .btn {
    box-sizing: border-box;
    opacity: 0.8;
    &:hover{
      opacity: 1;
    }
    &.exit {
      padding-top: 16px;
      padding-left: 50px;
      padding-bottom: 4px;
      height: 50px;
    }
    &.full-screen {
      padding-top: 4px;
      padding-left: 46px;
      height: 50px;
    }
    img {
      height: 30px;
      /* display: none; */
    }
  }
}
.bar {
  padding-left: 170px;
  display: flex;
  height: 78px;
  background-image: url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/Bar%20Background.png);
  background-size: auto 100%;
  background-position: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  .input-box {
    padding-left: 28px;
    position: relative;
    margin-top: 18px;
    margin-left: 16px;
    .input-img {
      position: absolute;
      left: 0;
      top: -6px;
      width: 44px;
      height: 44px;
      img {
        width: 100%;
      }
    }
    .value {
      width: 90px;
      background-image: url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/Vector%20Smart%20Object%20copy%202.png);
      background-size: 100% 100%;
      font-size: 14px;
      padding-right: 8px;
      text-align: right;
      color: white;
      box-sizing: border-box;
      line-height: 32px;
    }
  }
  .center-bg {
    width: 310px;
    height: 76px;
    margin-left: 10px;
  }
  .profile {
    margin-left: 8px;
    width: 180px;
    height: 80px;
    background-image: url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/headBg.png);
    background-size: 100% 100%;
    position: relative;
    .profile-img {
      width: 55px;
      height: 58px;
      position: absolute;
      left: 14px;
      top: 6px;
    }
    .card-img{
      width: 92px;
      height: 58px;
      position: absolute;
      left: 72px;
      top: 7px;
    }
  }
}
</style>
