<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>
        <i class="el-icon-question" @click="helpShow = true"></i>
        <h3 class="title">发红包</h3>
        <p class="redpacket-tips" :class="{'hidden': !tips}">{{tips}}</p>
        <div class="main-box">
          <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.number="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.number="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 || !packetNum, 'loading': isLoading}">
            <i v-if="isLoading" class="el-icon-loading"></i> 塞钱进红包
          </button>
        </div>
        <p class="bot">未领取的红包，将于24小时后发起退款</p>
      </div>
      <div class="help-wrap" v-show="helpShow">
        <i class="el-icon-close" @click="helpShow = false"></i>
        <h3 class="title">帮助</h3>
        <div class="content">
          <div class="item">
            1. 发出的红包均为拼手气红包，抢得的
            红包金额随机；一次最多发100个红包；
          </div>
          <div class="item">
            2. 发红包时可选择币种；抢到的红包金额
            直接转账到对应币种的绑定账户；若未绑
            定账户，则所得币种余额在绑定账户后即
            刻转账；
          </div>
          <div class="item">
            3. MeeChat会从每次发出红包的金额中收
            取2%的手续费，用于支付上链成本
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import { mapState } from 'vuex'
import { Message } from 'element-ui'
import NP from 'number-precision'
import EosHelper from '@/util/eosHelper.js'

export default {
  name: 'packetSend',
  data () {
    return {
      helpShow: false,
      money: 1,
      packetNum: 1,
      word: '恭喜发财，大吉大利',
      tips: '',
      isLoading: false,
      packetType: 2 // 1 => 普通, 2 => 拼手气
    }
  },
  computed: {
    ...mapState([
      'account',
      'group'
    ]),
    amountSum () {
      return this.money
    }
  },
  watch: {
    money (val) {
      if (val > 200) {
        this.money = 200
        this.showTip('总金额 不能多于 200 EOS')
      }

      if (val && val / this.packetNum < 0.01) {
        this.money = NP.times(this.packetNum, 0.01)
        this.showTip('单个红包最小为 0.01 EOS')
      }
    },
    packetNum (to, from) {
      if (this.money && NP.divide(this.money, to) < 0.01) {
        this.packetNum = from
        this.showTip('单个红包最小为 0.01 EOS')
      }
      if (to > 100) {
        this.packetNum = 100
        this.showTip('红包个数最大为 100 个')
      }
    }
  },
  methods: {
    showTip (msg, timeout = 3000) {
      this.tips = msg
      setTimeout(() => {
        this.tips = ''
      }, timeout)
    },
    async sendPacket () {
      if (this.money < 0.1) {
        this.showTip('总金额 不能少于 0.1 EOS')
        return false
      }

      let eosAmount = this.amountSum.toFixed(4) + ' EOS'
      let toAccount = 'meechatadmin'
      let memo = {
        type: 'redpack',
        num: this.packetNum,
        memo: this.word,
        sid: this.group.groupId
      }

      this.isLoading = true

      let [balance] = await EosHelper.getCurrencyBalance('eosio.token', this.account.name, 'EOS')
      if (balance) {
        let userEos = Number(balance.replace(/\sEOS/, '')).toFixed(4)
        if (this.amountSum > userEos) {
          Message({
            message: '账户EOS不足',
            type: 'error'
          })
          this.isLoading = false
          return
        }

        let ret = EosHelper.transfer(this.account.name, toAccount, eosAmount, JSON.stringify(memo), this.account.authority)
        ret.then((res) => {
          this.visible = false
        }).catch(msg => {
          if (msg.type === 'signature_rejected') {

          } else {
            if (typeof msg === 'string') {
              msg = JSON.parse(msg)
            }

            let details = msg.error.details
            Message({
              message: details[0].message,
              type: 'error'
            })
          }
        }).finally(() => {
          this.isLoading = false
        })
      } else {
        Message({
          message: '网络太差~ 请重试',
          type: 'error'
        })
        this.isLoading = false
      }
    }
  },
  mounted () {
  }
}
</script>

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