<template>
  <div class="sit-list-container">
    <div class="sit-list">
      <div
        class="sit"
        v-for="(sit, key) in sitList"
        :key="key"
        @click="sitDown(sit)"
      >
        <div class="default"
             v-show="!sit.player">
          <i>sit</i>
        </div>
        <div class="sit-player"
             v-if="sit.player">
          <div class="player"
               :class="{fold: sit.player.status === -1}">
            <div class="count-down"
                 v-show="actionUserId === sit.player.userId">{{time}}
            </div>
            <div class="user-name"
                 v-show="sit.player.nickName">
              {{ sit.player.nickName }}
            </div>
            <div class="icon iconfont icon-user-avatar"></div>
            <div class="counter"
                 :class="{isAction: actionUserId === sit.player.userId,
                  'close-time-out': time > 0 && time < 10 && actionUserId === sit.player.userId }"
                 v-show="sit.player.counter || sit.player.actionCommand === 'allin'">
              {{ sit.player.counter }}
            </div>
            <div class="action-size"
                 v-show="sit.player.actionSize > 0">
              {{ sit.player.actionSize }}
            </div>
            <div class="action-command"
                 v-show="sit.player.actionCommand">
              {{ sit.player.actionCommand }}
            </div>
            <div class="type"
                 v-show="sit.player.type">
              {{ sit.player.type }}
            </div>
            <div class="hand-card"
                 v-show="!!!currPlayer || (sit.player.userId !== currPlayer.userId
            && sit.player.handCard
            && sit.player.handCard.length !== 0)">
              <cardList :cardList="sit.player.handCard"
                        :valueCards="valueCards"></cardList>
            </div>
            <div class="card-style"
                 v-show="!!!currPlayer || (sit.player.userId !== currPlayer.userId
            && sit.player.handCard
            && sit.player.handCard.length !== 0)">
              {{PokeStyle(sit.player.handCard)}}
            </div>
          </div>
          <div class="cards"
               v-show="showHandCard(sit)">
            <div class="hand-card">
              <cardList :cardList="handCard"
                        :valueCards="valueCards"></cardList>
            </div>
            <div class="ready"
                 v-show="handCard && handCard.length === 0">ready
            </div>
            <div class="card-style"
                 v-if="commonCard && commonCard.length > 0">{{PokeStyle()}}
            </div>
          </div>
          <div class="win"
               v-show="sit.player.income">
            <!--            <span>win!</span>-->
            <span>{{`+${sit.player.income}`}}</span>
          </div>
        </div>
      </div>
    </div>
    <BuyIn :showBuyIn.sync="showBuyIn"
           :min="0"
           :max="roomConfig.smallBlind * 2000"
           @buyIn='buyIn'></BuyIn>
  </div>
</template>

<script lang="ts">
  import { Component, Prop, Watch, Vue } from 'vue-property-decorator';
  import { IPlayer } from '@/interface/IPlayer';
  import { ILinkNode } from '@/utils/Link';
  import ISit from '@/interface/ISit';
  import cardList from './CardList.vue';
  import BuyIn from '@/components/BuyIn.vue';
  import { PokerStyle } from '@/utils/PokerStyle';
  import map from '../utils/map';
  import {IRoom} from '@/interface/IRoom';

  @Component({
    components: {
      cardList,
      BuyIn,
    },
  })
  export default class SitList extends Vue {
    @Prop() private msg!: string;
    @Prop() private currPlayer!: IPlayer;
    @Prop() private commonCard!: string[];
    @Prop() private sitLink!: ILinkNode<ISit>;
    @Prop() private handCard!: string[];
    @Prop() private winner!: IPlayer[][];
    @Prop() private isPlay!: boolean;
    @Prop() private roomConfig!: IRoom;
    @Prop() private actionUserId!: string;
    @Prop() private valueCards!: string;
    @Prop({ default: 30, type: Number }) private time!: number;

    private sitLinkNode: any = '';
    private showBuyIn = false;
    private currSit!: ISit;

    @Watch('sitLink')
    private getSit(val: ILinkNode<ISit>) {
      this.sitLinkNode = val;
    }

    private buyIn(size: number) {
      this.showBuyIn = false;
      this.currPlayer.counter += Number(size);
      this.$emit('buyIn', Number(size));
      this.sitDown(this.currSit);
    }

    private showHandCard(sit: ISit) {
      return sit.player?.userId === this.currPlayer?.userId;
    }

    private PokeStyle(cards: string[]) {
      if (this.commonCard.length === 0) {
        return '';
      }
      const commonCard = this.commonCard || [];
      let handCard = this.handCard || [];
      if (cards) {
        handCard = cards;
      }
      const card = [...handCard, ...commonCard];
      const style = new PokerStyle(card, this.roomConfig.isShort);
      return style.getPokerStyleName();
    }

    get handCardString() {
      return this.mapCard(this.handCard);
    }

    get hasSit() {
      return !!this.sitList.find((s) => s.player && s.player.userId === this.currPlayer?.userId);
    }

    private mapCard(cards: string[]) {
      return map(cards);
    }

    private sitDown(sit: ISit) {
      if (!sit.player && (!this.isPlay || !this.hasSit)) {
        if (this.currPlayer.counter <= 0) {
          this.showBuyIn = true;
          this.currSit = sit;
          return;
        }
        let sitNode = this.sitLinkNode;
        for (let i = 0; i < 9; i++) {
          if (sitNode) {
            const next = sitNode.next;
            if (sitNode.node.player?.nickName === this.currPlayer?.nickName) {
              delete sitNode.node.player;
            }
            sitNode = next as ILinkNode<ISit>;
          }
        }
        for (let i = 0; i < 9; i++) {
          if (sitNode) {
            const next = sitNode.next;
            if (sit.position === sitNode.node.position) {
              sitNode.node.player = this.currPlayer as IPlayer;
              this.$emit('update:sitLink', sitNode);
              this.$emit('sit', sitNode);
              break;
            }
            sitNode = next as ILinkNode<ISit>;
          }
        }
      }
    }

    get sitList() {
      const sitMap: ISit[] = [];
      if (this.sitLinkNode) {
        let link = this.sitLinkNode;
        for (let i = 0; i < 9; i++) {
          if (
            link.node.player &&
            link.node.player.userId === this.currPlayer?.userId
          ) {
            this.sitLinkNode = link;
            break;
          }
          const next = link.next;
          link = next as ILinkNode<ISit>;
        }
        let sitNode = this.sitLinkNode;
        for (let i = 0; i < 9; i++) {
          const next = sitNode.next;
          sitMap.push(sitNode.node);
          sitNode = next as ILinkNode<ISit>;
        }
        console.log('sit', sitMap);
        return sitMap;
      }
      return [];
    }

    private mounted() {
      this.sitLinkNode = this.sitLink;
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped
       lang="less">
  .sit-list-container {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    height: 100vh;
    width: 100vw;

    .sit-list {
      position: relative;
      width: 100vw;
      height: 620 / 6.67vh;
      padding: 10px;
      margin: 0 15px;
      box-sizing: border-box;

      .sit {
        position: absolute;
        font-size: 12px;

        .default {
          i {
            width: 45 / 3.75vw;
            height: 45 / 3.75vw;
            border-radius: 50%;
            border: 1px solid #bababa;
            display: block;
            font-style: normal;
            font-size: 20px;
            line-height: 45 / 3.75vw;
            color: #fff;
          }
        }

        .player {
          position: relative;

          .icon {
            width: 45 / 3.75vw;
            height: 45 / 3.75vw;
            font-size: 45px;
            line-height: 45 / 3.75vw;
            border-radius: 50%;
            margin-bottom: 2px;
          }

          .user-name {
            color: #fff;
          }

          .count-down {
            height: 7vh;
            line-height: 9vh;
            width: 12vw;
            position: absolute;
            left: 0;
            top: 14px;
            color: #fff;
            font-weight: 700;
            font-size: 20px;
            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.3), transparent);
          }

          .counter {
            background-color: rgba(0, 0, 0, 0.6);
            color: #fff;
            font-weight: 600;
            font-size: 12px;
            border-radius: 2px;

            &.isAction {
              box-shadow: 0px 0px 6px 4px;
            }

            &.close-time-out {
              animation: 300ms timeOut infinite;
            }
          }

          .action-command {
            top: 15 / 6.67vh;
            left: 45 / 3.75vw;
            padding: 1px 8px;
            border-radius: 9px;
            color: #ffffff;
            background-color: #2c3e50;
            text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.3);
            position: absolute;
          }

          .card-style {
            color: #fff;
          }

          .type {
            background-color: #fff;
            color: #2b2b2b;
            border-radius: 50%;
            padding: 2px;
            width: 15 / 3.75vw;
            height: 15px;
            line-height: 16px;
            position: absolute;
            top: 53 / 6.67vh;
            left: 38 / 3.75vw;
            font-size: 12px;
            transform: scale(0.8);
          }

          .action-size {
            background: rgba(0, 0, 0, 0.3) url("../assets/gold.svg") center left no-repeat;
            background-size: contain;
            border-radius: 2px;
            padding: 1px 4px 1px 12px;
            text-align: center;
            min-width: 35 / 3.75vw;
            color: #fff;
            font-weight: 600;
            position: absolute;
            top: 35 / 6.67vh;
            left: 40 / 3.75vw;
          }

          &.fold {
            opacity: 0.4;
          }
        }

        .hand-card {
          position: absolute;
          top: 1vh;
        }

        &:nth-child(1) {
          left: 100 / 3.75vw;
          top: 460 / 6.67vh;

          .action-command {
            left: -22 / 3.75vw;
          }

          .type {
            left: -16 / 3.75vw;
          }

          .action-size {
            top: -5 / 6.67vh;
            left: 57 / 3.75vw;
            padding-right: 15px;
            text-align: right;
          }
        }

        &:nth-child(2) {
          left: 0;
          top: 330 / 6.67vh;
        }

        &:nth-child(3) {
          left: 0;
          top: 210 / 6.67vh;
        }

        &:nth-child(4) {
          left: 0;
          top: 100 / 6.67vh;
        }

        &:nth-child(5) {
          left: 75 / 3.75vw;
          top: 0;
        }

        &:nth-child(6) {
          left: 240 / 3.75vw;
          top: 0;
        }

        &:nth-child(7) {
          left: 296 / 3.75vw;
          top: 100 / 6.67vh;
        }

        &:nth-child(8) {
          left: 296 / 3.75vw;
          top: 210 / 6.67vh;
        }

        &:nth-child(9) {
          left: 296 / 3.75vw;
          top: 330 / 6.67vh;
        }

        &:nth-child(6),
        &:nth-child(7),
        &:nth-child(8),
        &:nth-child(9) {
          .action-command {
            left: -22 / 3.75vw;
          }

          .type {
            left: -16 / 3.75vw;
          }

          .action-size {
            background-position: right;
            left: -40 / 3.75vw;
            padding-left: 1px;
            padding-right: 17px;
            text-align: right;
          }

          .hand-card {
            left: -3vh;
            top: 0;
          }
        }

        .cards {
          position: absolute;
          left: 52 / 3.75vw;
          top: 20 / 6.67vh;
          min-width: 60 / 3.75vw;
          min-height: 60 / 6.67vh;
          line-height: 60 / 6.67vh;

          .ready {
            font-size: 14px;
            display: inline-block;
            vertical-align: middle;
          }

          .card-style {
            position: absolute;
            color: #fff;
            font-size: 14px;
            bottom: -48px;
            width: 60 / 3.75vw;
            text-align: center;
            font-weight: 700;
          }
        }

        .win {
          position: absolute;
          z-index: 8;
          left: 0;
          top: 4vh;
          font-size: 20px;
          color: rgba(255, 209, 0, 0.99);
          font-weight: 600;
          animation: fadeOut 4s forwards;
          background-image: linear-gradient(to top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
        }
      }
    }

    @-webkit-keyframes fadeOut /* Safari 与 Chrome */ {
      0% {
        transform: translate3d(2px, 0, 0);
        opacity: 1;
      }
      30% {
        transform: translate3d(2px, 0, 0);
        opacity: 1;
      }
      to {
        transform: translate3d(2px, -15px, 0);
        opacity: 0;
      }
    }
    @-webkit-keyframes timeOut /* Safari 与 Chrome */ {
      0% {
        box-shadow: none;
      }
      100% {
        box-shadow: 0px 0px 6px 4px;
      }
    }
  }
</style>
