<template>
  <transition name="msgbox-fade">
    <div class="pub-modal-mask pub-scroll-box" v-if="visible">
      <div class="send-wrap">
        <i class="el-icon-close" @click="visible = false"></i>
        <h3 class="title">发红包</h3>
        <div class="input-item">
          <span class="text" v-if="packetType == 1">单个金额</span>
          <span class="text" v-else>
            <em>拼</em>总金额
          </span>
          <div class="box">
            <input type="number" v-model="money" placeholder="0.00">
            <span class="unit">EOS</span>
          </div>
        </div>
        <!-- <p class="input-tips" v-if="packetType == 1">
          当前为普通红包，<span @click="packetType=2">改为拼手气红包</span>
        </p> -->
        <p class="input-tips" v-if="packetType == 2">
          当前为拼手气红包
        </p>
        <div class="input-item">
          <span class="text">红包个数</span>
          <div class="box">
            <input type="number" v-model="packetNum" placeholder="请填写个数">
            <span class="unit">个</span>
          </div>
        </div>
        <p class="group-user-num">
          本群共{{group.userCounts}}人
        </p>
        <textarea class="words" v-model="word" placeholder="恭喜发财，大吉大利"></textarea>
        <div class="sum">
          {{amountSum}} <span>EOS</span>
        </div>
        <button class="send-btn" @click="sendPacket" :class="{'is-disable': !amountSum}">塞钱进红包</button>
        <p class="bot">未领取的红包，将于24小时后发起退款</p>
      </div>
    </div>
  </transition>
</template>

<script>
import { mapState } from 'vuex'
import NP from 'number-precision'
import { Message } from 'element-ui'

export default {
  name: 'packetSend',
  data () {
    return {
      detailShow: false,
      money: 1,
      packetNum: 1,
      word: '恭喜发财，大吉大利',
      packetType: 2 // 1 => 普通, 2 => 拼手气
    }
  },
  computed: {
    ...mapState([
      'account',
      'group'
    ]),
    amountSum () {
      return NP.times(this.money, this.packetNum)
    }
  },
  methods: {
    async sendPacket () {
      let identity = { authorization: [`${this.account.name}@${this.account.authority}`] }
      let eosAmount = this.amountSum.toFixed(4) + ' EOS'
      let toAccount = 'meechatadmin'
      let memo = {
        type: 'redpack',
        num: this.packetNum,
        memo: this.word,
        sid: this.group.groupId
      }

      if (self !== top) {
        let [ balance ] = await window.postMessager.send({
          action: 'meechat:eosAction',
          data: {
            action: 'getCurrencyBalance',
            param: ['eosio.token', this.account.name, 'EOS']
          }
        })
        let userEos = Number(balance.replace(/\sEOS/, '')).toFixed(4)

        if (this.amountSum > userEos) {
          Message({
            message: '账户EOS不足',
            type: 'error'
          })
          return
        }

        let res = await window.postMessager.send({
          action: 'meechat:eosAction',
          data: {
            action: 'transfer',
            param: [this.account.name, toAccount, eosAmount, JSON.stringify(memo), identity]
          }
        })

        this.visible = false
        console.log(res)
      } else {
        window.EOS.transfer(this.account.name, toAccount, eosAmount, JSON.stringify(memo), identity).then(trx => {
          console.log(trx)
        }).catch(err => {
          console.log(err)
        })
      }
    }
  },
  mounted () {
  }
}
</script>

<style lang="scss" scoped>
@import './style.scss';
</style>
