<template>
  <div class="header">
    <div class="left-block">
      <img src="./static/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="./static/gold-coin.png" alt="">
        </div>
        <div class="value">
          {{ userInfo.goldCredit }}
        </div>
      </div>
      <div class="input-box">
        <div class="input-img" style="width: 54px; top: -12px; left: -8px">
          <img src="./static/red-coin.png" alt="">
        </div>
        <div class="value">
          {{ userInfo.redCredit }}
        </div>
      </div>
      <div class="center-bg"/>
      <div class="profile">
        <img v-if="userInfo.avatar" :src="userInfo.avatar | img" alt="" class="profile-img">
        <img v-else src="./static/profile/profile-pic.png" alt="" class="profile-img">
        <img src="./static/profile/card.png" alt="" class="card-img">
      </div>
    </div>
    <div class="right-block">
      <div class="btn exit" @click="click().quit()">
        <img src="./static/exit-button.png" alt="">
      </div>
      <div class="btn full-screen" @click="click().fullScreen()">
        <img src="./static/full-screen-button.png" alt="">
      </div>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import screenfull from 'screenfull'
import { mapState } from 'vuex'
export default {
  filters: {
    filterData(time) {
      return dayjs(time).format('dddd,DD,MMMM,YYYY')
    },
    filterTime(time) {
      return dayjs(time).format('HH:mm:ss')
    },
  },
  data() {
    return {
      time: new Date(),
    }
  },
  computed: {
    ...mapState([
      'userInfo',
    ]),
  },
  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-id': // 如果是游戏页面
              this.quitGame()
              break
            case 'index':
              this.network().quitAccount()
              break
          }
        },
        fullScreen: () => {
          console.log('全屏')
          // 如果不允许进入全屏，发出不允许提示
          if (!screenfull.enabled) {
            this.$message('您的浏览器不能全屏')
            return false
          }
          if (!screenfull.isFullscreen) {
            screenfull.toggle()
          } else {
            screenfull.exit()
          }
        },
      }
    },
    network() {
      return {
        quitAccount: () => {
          this.$request({
            url: '/api/player/logout',
            method: 'post',
          }).then(() => {
            this.$router.replace({ path: '/login' })
          })
        },
      }
    },
    quitGame() {
      const { id } = this.$route.params
      const params = {
        deviceId: id,
      }
      this.$request({
        url: '/api/app/device/quitDevice',
        method: 'get',
        params,
      }).then(({ data }) => {
        console.log('退出游戏页面')
        this.$router.replace('/')
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.header {
  height: 80px;
  position: relative;
  z-index: 1;
}
.left-block {
  position: absolute;
  left: 0;
  top: 0;
  width: 170px;
  height: 140px;
  background-image: url(./static/left-block-bg.png);
  background-size: 100%;
  z-index: 1;
  .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(./static/right-block-bg.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: 80px;
  background-image: url(./static/bar-background.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: 20px;
    margin-left: 16px;
    .input-img {
      position: absolute;
      left: 0;
      top: -8px;
      width: 44px;
      height: 44px;
      img {
        width: 100%;
      }
    }
    .value {
      height: 28px;
      width: 90px;
      background-image: url(./static/value-bg.png);
      background-size: 100% 100%;
      padding: 6px;
      font-size: 14px;
      padding-right: 8px;
      text-align: right;
      color: white;
      box-sizing: border-box;
    }
  }
  .center-bg {
    background-image: url(./static/bar-content-bg.png);
    background-size: 100% 100%;
    width: 310px;
    height: 76px;
    margin-left: 10px;
  }
  .profile {
    margin-left: 8px;
    width: 180px;
    height: 80px;
    background-image: url(./static/profile/bg.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>
