<template>
  <transition name="msgbox-fade">
    <div class="pub-modal" v-if="visible">
      <div class="mask"></div>
      <div class="modal validate-modal">
        <i class="close-icon" @click="visible = false"></i>
        <div class="validate-title">
          <span>{{resultData.game_id}}</span>
        </div>
        <div class="content">
          <div class="validate-poker-wrapper">
            <section class="player">
              <h3 class="result">
                {{$t(`table.userState[0]`)}}
                <span>{{playerPoint}}</span>
              </h3>
              <ul class="poker-list left">
                <li
                  class="poker-item"
                  :class="[item,index === 0?'left-last':'']"
                  v-for="(item,index) in myPokerClass"
                  :key="index"
                ></li>
              </ul>
            </section>
            <section class="banker">
              <h3 class="result">
                {{$t(`table.userState[1]`)}}
                <span>{{bankerPoint}}</span>
              </h3>
              <ul class="poker-list right">
                <li
                  class="poker-item"
                  :class="[item,index === 2?'right-last':'']"
                  v-for="(item,index) in bankerPokerClass"
                  :key="index"
                ></li>
              </ul>
            </section>

            <div class="validate-result">
              <span class="text">{{$t('table.resultTitle')}}</span>
              <ul class="result-list">
                <li class="result-item">{{$t(`table.winState[${win}]`)}}</li>
                <li class="result-item" v-if="playerPair">{{$t(`table.winState[3]`)}}</li>
                <li class="result-item" v-if="bankerPair">{{$t(`table.winState[4]`)}}</li>
              </ul>
            </div>
          </div>

          <div class="validate-fair-warpper">
            <header>
              <p class="fair-text">{{$t('table.fairTitle')}}</p>
              <i class="icon-question" @click="$showFair"></i>
            </header>
            <section class="fair-main">
              <nav class="fair-nav">
                <div class="item-1">{{$t('table.fairtab1')}}</div>
                <div class="item-2">{{$t('table.fairtab2')}}</div>
                <div class="item-3">{{$t('table.fairtab3')}}</div>
              </nav>
              <ul class="fair-list">
                <li class="fair-item" v-for="(item,index) in fairList" :key="index">
                  <div class="item-1">{{$t(`table.userState[${item.state}]`)}} {{item.index}}</div>
                  <div class="item-2">
                    <a
                      target="_blank"
                      :href="`https://eospark.com/block/${item.blockNum}`"
                      class="link"
                      v-html="item.parseHtml"
                    ></a>
                  </div>
                  <div class="item-3">
                    <a
                      target="_blank"
                      :href="`https://eospark.com/block/${item.blockNum}`"
                      class="link"
                    >{{item.blockNum}}</a>
                  </div>
                </li>
              </ul>
            </section>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import { toPoker, toPokerColour } from "@/util/util.js";

export default {
  name: "validatePopup",
  data() {
    return {
      myPokerClass: [],
      bankerPokerClass: [],
      fairList: [],
      playerPoint: 0,
      bankerPoint: 0,
      win: 0,
      playerPair: false,
      bankerPair: false,
      blockhtml: ""
    };
  },
  computed: {},
  methods: {
    parseBlockId({ blockId, poker }) {
      blockId = encodeURIComponent(blockId);
      //TODO parse blockId to textFlow
      let bigNum = ["a", "b", "c", "d", "e"];
      let val = `${((poker - 1) % 13) + 1}`;
      val = parseInt(val) >= 10 ? bigNum[parseInt(val) - 10] : val;
      let color = `${Math.floor(poker / 13)}`;
      let len = blockId.length;
      let step = 0;
      let result = [];
      while (len >= 0) {
        let char = blockId.charAt(len);

        if (/[0-9a-e]/.test(char) === false) {
          len--;
          continue;
        }

        if (step === 0 && char === val) {
          result.push(len);
          step = 1;
        } else if (step === 1 && char === color) {
          result.push(len);
          step = 2;
          len = -1;
        }
        len--;
      }

      let resultSeatStr = blockId; //占位文本
      let resultStr = result.map(pos => blockId.charAt(pos)); //高亮文本
      let resultSeat = ["!", "@"]; //占位符

      result.forEach((pos, index) => {
        resultSeatStr =
          resultSeatStr.slice(0, pos) +
          resultSeat[index] +
          resultSeatStr.slice(pos + 1);
      });

      let targetLength = 26;
      let length = resultSeatStr.length;
      let endStr = resultSeatStr.slice(length - targetLength);
      let targetStr = `<span>...${endStr}</span>`;

      resultSeat.forEach((seat, index) => {
        targetStr = targetStr.replace(
          seat,
          `</span><span class="mark">${resultStr[index]}</span><span>`
        );
      });
      return targetStr;
    }
  },
  mounted() {
    let { reveal_info } = this.resultData;
    let {
      playerPoint,
      bankerPoint,
      win,
      playerPair,
      bankerPair,
      blockInfo,
      revealBlockNum
    } = reveal_info;

    let player = Array.from(reveal_info.player);
    player.reverse().forEach((value, index) => {
      this.myPokerClass[index] = `poker-${toPoker(value)}-${toPokerColour(
        value
      )}`;
    });

    reveal_info.banker.forEach((value, index) => {
      this.bankerPokerClass[index] = `poker-${toPoker(value)}-${toPokerColour(
        value
      )}`;
    });

    this.playerPoint = playerPoint;

    this.bankerPoint = bankerPoint;

    this.win = win;

    this.playerPair = playerPair;

    this.bankerPair = bankerPair;

    for (
      let i = 0,
        len = Math.max(blockInfo.player.length, blockInfo.banker.length);
      i < len;
      i++
    ) {
      if (blockInfo.player[i] !== undefined) {
        let player = blockInfo.player[i];
        player.index = i + 1;
        player.state = 0;
        player.blockNum = revealBlockNum++;
        player.parseHtml = this.parseBlockId(player);
        this.fairList.push(player);
      }
      if (blockInfo.banker[i] !== undefined) {
        let banker = blockInfo.banker[i];
        banker.index = i + 1;
        banker.state = 1;
        banker.blockNum = revealBlockNum++;
        banker.parseHtml = this.parseBlockId(banker);
        this.fairList.push(banker);
      }
    }
  }
};
</script>

<style lang="scss">
.validate-modal {
  width: px2rem(820);
  border-radius: px2rem(15);
  background-color: #4b3a2a;
  overflow: hidden;
  @media screen and (min-width:1300px) {
    transform: scale(0.75,0.75);
  }
  .close-icon {
    position: absolute;
    right: px2rem(8);
    top: px2rem(8);
    width: px2rem(56);
    height: px2rem(56);
    background: url("../../../assets/but_close1_u.png") no-repeat center;
    background-size: 100%;
    cursor: pointer;
    &:active {
      background-image: url("../../../assets/but_close1_d.png");
    }
  }
  .validate-title {
    height: px2rem(70);
    display: flex;
    justify-content: center;
    align-items: center;
    background: #372617 url("../../../assets/pic_tit.png") no-repeat center;
    background-size: auto px2rem(35);
    span {
      font-size: px2rem(30);
      color: #ffda8a;
    }
  }
  .content {
    padding: px2rem(20) px2rem(15);
  }
  .validate-poker-wrapper {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    height: px2rem(305);
    box-sizing: border-box;
    padding: px2rem(16) px2rem(19);
    border: 2px solid #7c5f44;
    border-radius: px2rem(15);
    overflow: hidden;
  }
  .player,
  .banker {
    box-sizing: border-box;
    width: px2rem(370);
    height: px2rem(195);
    padding: px2rem(20) px2rem(24);
    background-color: #372617;
    border-radius: px2rem(15);
    overflow: hidden;
  }

  .result {
    font-size: px2rem(30);
    font-weight: bold;
    color: #b3875a;

    span {
      font-weight: bold;
      margin-left: px2rem(30);
    }
  }

  .player {
    .result {
      text-align: right;
    }
  }
  .poker-list {
    display: flex;
    margin-top: px2rem(10);
    &.left {
      justify-content: flex-end;
      .poker-item {
        margin-left: px2rem(12);
      }
    }
    &.right {
      .poker-item {
        margin-right: px2rem(12);
      }
    }
    .poker-item {
      width: px2rem(90);
      height: px2rem(120);
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100%;
      &.left-last {
        transform: translate(px2rem(-15), px2rem(15)) rotate(-90deg);
      }
      &.right-last {
        transform: translate(px2rem(15), px2rem(15)) rotate(90deg);
      }
    }
  }
  .validate-result {
    position: relative;
    width: 100%;
    height: px2rem(69);
    margin-top: px2rem(10);
    background-color: #372617;
    line-height: px2rem(69);
    text-align: center;
    border-radius: px2rem(15);
    overflow: hidden;
    .text {
      position: absolute;
      left: px2rem(24);
      top: 50%;
      transform: translate(0, -50%);
      font-size: px2rem(24);
      color: #c09161;
    }

    .result-list {
      display: flex;
      justify-content: center;
      align-content: center;
      font-size: px2rem(36);
      color: #ebc87f;
    }
    .result-item {
      margin: 0 px2rem(15);
    }
  }

  .validate-fair-warpper {
    header {
      display: flex;
      height: px2rem(55);
      align-items: center;
    }
    .fair-text {
      font-size: px2rem(24);
      margin: 0 px2rem(16) 0 px2rem(32);
      color: #b3875a;
    }
    .icon-question {
      width: px2rem(20);
      height: px2rem(20);
      background: url("../../../assets/but_question2_u.png") no-repeat center /
        100%;
      cursor: pointer;
    }

    .fair-main {
      box-sizing: border-box;
      height: px2rem(365);
      padding: px2rem(10);
      background-color: #2b5e38;
      box-shadow: 0 0 px2rem(5) #000;
      border-radius: px2rem(15);
      overflow: hidden;
    }

    .fair-nav {
      display: flex;
      height: px2rem(45);
      border-radius: px2rem(5);
      background-color: #1b4024;
      overflow: hidden;
      font-size: px2rem(24);
      color: #82a586;
      line-height: px2rem(45);
    }

    .item-1 {
      width: px2rem(130);
      text-align: center;
    }

    .item-2 {
      width: px2rem(480);
    }

    .item-3 {
      width: 0;
      flex: 1;
      text-align: center;
    }
    .fair-item {
      display: flex;
      height: px2rem(45);
      line-height: px2rem(45);
      margin-top: px2rem(5);
      font-size: px2rem(24);
      color: #fff;
      background-color: #234a2c;
      border-radius: px2rem(5);
      overflow: hidden;
    }
  }
  .mark{
    color: #ffa531;
  }
  a {
    text-decoration: none;
    color: #ffffff;

    &:hover {
      text-decoration: underline;
    }
  }
}

@media #{$phone} {
  .validate-modal {
    width: px2rem(700);

    .validate-title {
      height: px2rem(52);
    }

    .content {
      padding: px2rem(16) px2rem(10) px2rem(8);
    }

    .validate-poker-wrapper {
      height: px2rem(275);
      padding: px2rem(10);
      border-width: px2rem(2);

      .player,
      .banker {
        width: px2rem(325);
        height: px2rem(185);
        padding: px2rem(10) px2rem(8);
      }

      .validate-result {
        height: px2rem(60);
        margin-top: px2rem(5);
        line-height: px2rem(60);

        .result-list {
          font-size: px2rem(30);
        }
      }

      .poker-list {
        &.left {
          .poker-item {
            margin-left: px2rem(6);
          }
        }
        &.right {
          .poker-item {
            margin-right: px2rem(6);
          }
        }
      }
    }

    .validate-fair-warpper {
      .item-2 {
        width: px2rem(380);
      }
    }
  }
}
</style>
