<template>
  <Dialog
    ref="dialog"
    width="602px"
    height="440px"
  >
    <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.stop="visible = false">
    <div class="bg"/>
    <div class="content">
      <div class="left-box">
        <div class="title">
          {{ data.gameNameEn }}
        </div>
        <div class="game-img">
          <img :src="data.beforeGameImg | img" alt="" class="img">
          <img v-audio src="https://kuawai.s3.ap-east-1.amazonaws.com/gif/play_button00000_iSpt.png" class="start btn" alt="" @click="$emit('start')">
        </div>
        <div class="line">
          50 LINES
        </div>
      </div>
      <div class="right-box">
        <div class="box">
          <div class="item">
            <div class="label">
              机台号
            </div>
            <div class="input" style="margin: 4px 0 0;">
              <UiInput
                :value="data.egmId"
                :bg-height="30"
                :line-height="24"
                :margin-left="0"
                text-align="center"
                bg="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/info_box.png"
                icon="" />
            </div>
          </div>
          <div class="item">
            <div class="label">
              注数
            </div>
            <div class="input">
              <UiInput
                :value="data.playerDenomination"
                :bg-height="30"
                :line-height="24"
                :margin-left="-40"
                text-align="center"
                style="height: 40px;"
                bg="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/info_box.png"
                icon="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/icon.png" />
            </div>
          </div>
          <div class="item">
            <div class="label">
              连线
            </div>
            <div class="input">
              <UiInput
                :value="data.link"
                :bg-height="30"
                :line-height="24"
                :margin-left="-40"
                text-align="center"
                bg="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/info_box.png"
                icon="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/icon_02.png" />
            </div>
          </div>
          <div class="item">
            <div class="label">
              最后出分
            </div>
            <div class="input">
              <UiInput
                :value="data.lastCashOut | filterToFen"
                :bg-height="30"
                :line-height="24"
                :margin-left="-40"
                text-align="center"
                bg="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/info_box.png"
                icon="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/icon_03.png" />
            </div>
          </div>
          <div class="item">
            <div class="label">
              最高投注额(上限)
            </div>
            <div class="input">
              <UiInput
                :value="data.maxBet | filterToFen"
                :bg-height="30"
                :line-height="24"
                :margin-left="-40"
                text-align="center"
                bg="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/info_box.png"
                icon="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/icon_03(1).png" />
            </div>
          </div>
          <div class="item">
            <div class="label">
              最高中奖记录
            </div>
            <div class="input">
              <UiInput
                :value="data.topWinHistory | filterToFen"
                :bg-height="30"
                :line-height="24"
                :margin-left="-40"
                text-align="center"
                bg="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/info_box.png"
                icon="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/icon_04.png" />
            </div>
          </div>
          <div class="item">
            <div class="label">
              会员门槛要求
            </div>
            <div class="input">
              <UiInput
                :value="data.miniMemberLevelName"
                :bg-height="30"
                :line-height="24"
                :margin-left="-40"
                text-align="center"
                bg="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/info_box.png"
                icon="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/icon_06.png" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </Dialog>
</template>

<script>
import Dialog from '@/components/dialog/index'
import UiInput from '@/components/ui/ui-input'
import { mapState } from 'vuex'
import dayjs from 'dayjs'
export default {
  components: {
    Dialog,
    UiInput,
  },
  filters: {
    filterTime(value) {
      return dayjs(value).format('YYYY-MMMM-DD HH:mm:ss')
    },
  },
  props: {
    data: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  data() {
    return {
      visible: false,
    }
  },
  computed: {
    ...mapState([
      'zoom',
      'userInfo',
    ]),
  },
  watch: {
    visible(value) {
      if (value) {
        this.$refs.dialog.show()
      } else {
        this.$refs.dialog.close()
      }
    },
  },
  methods: {
    confirm() {
      this.$emit('confirm')
      this.visible = false
    },
    show() {
      this.visible = true
      console.log('device', JSON.stringify(this.data))
    },
  },
}
</script>

<style lang="scss" scoped>
.bg {
  background-image: url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/pop.png);
  background-size: 100% 100%;
  height: 100%;
  width: 100%;
  position: absolute;
}
.close {
  position: absolute;
  right: -10px;
  top: -4px;
  width: 38px;
  z-index: 10;
  z-index: 100;
}
.content {
  display: flex;
  height: 100%;
  position: relative;
  z-index: 1;
  .left-box{
    flex: none;
    width: 263px;
    /* background-color: rgba(255, 0, 0, 0.346); */
    margin-left: 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    .title {
      font-size: 24px;
      text-shadow: 0px 0px 5px #091538;
      padding: 0px 10px;
      color: #f2ea07;
      font-weight: bold;
      text-align: center;
    }
    .game-img {
      position: relative;
      max-height: 310px;
      .img {
        max-width: 100%;
        max-height: 310px;
        display: block;
        margin: auto;
      }
      .start {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 50px;
        margin-left: -25px;
        margin-top: -25px;
      }
    }
    .line {
      font-size: 22px;
      font-weight: bold;
      color: #f2ea07;
      text-align: center;
      padding: 0 8px 10px;
    }
  }
  .right-box{
    flex: 1;
    margin-right: 26px;
    padding: 40px 25px 30px;
    .box {
      .item {
        .label {
          font-size: 14px;
          line-height: 12px;
          zoom: 0.9;
          color: #080803;
          text-align: center;
          font-weight: bold;
          /* background: red; */
        }
      }
    }
  }
}
</style>
