<template>
  <settingLayout>
    <NoTokenTip v-if="NoToken" />
    <div v-else class="mint-setting">
      <a href="https://www.yuque.com/matataki/matataki">{{ $t('fan-ticket-user-manual') }} ></a>
      <div v-loading="loading" class="form-container">
        <div class="mint-info">
          <span class="mint-setting-label black">{{ $t('has-been-issued') }}：</span>
          <span class="mint-setting-num">{{ mintDetail.count }}</span> 
          <span class="mint-setting-symbol">{{ $t('times') }}</span> 
          <span class="mint-setting-num">{{ mintDetail.totalSupply.toLocaleString() }}</span> 
          <span class="mint-setting-symbol">{{ token.symbol }}</span> 
        </div>
        <div
          v-loading="amountUpperLimit"
          class="mint-form"
          :element-loading-text="$t('the-number-of-additional-issuances-has-reached-the-upper-limit')"
          element-loading-spinner="el-icon-warning"
          element-loading-background="rgba(0, 0, 0, 0.4)"
        >
          <el-input v-model="form.amount" :placeholder="$t('number-of-additional-issuances-the-total-issuance-is-up-to-100-million')" class="mint-setting-input" />
          <el-button 
            type="primary" 
            class="mint-setting-btn" 
            plain
            :disabled="amountUpperLimit"
            @click="minetokenMint"
          >
            {{ $t('issuance-immediately') }}
          </el-button>
        </div>
      </div>
      <el-divider class="colla-splitline" />
      <p class="colla-help">
        {{ $t('manual-additional-issuance-rules') }}：<br>
        1. {{ $t('the-maximum-issuance-limit-is-100-million') }}<br>
        2. {{ $t('after-the-first-issuance-is-successful-you-can-immediately-operate-the-manual-additional-issuance') }}<br>
        <!-- 2. 每次增发后需要等待10天可再次增发<br> -->
        <!-- 3. 发行者可以设置将每次增发Fan票的一定比例自动转入直通车中<br> -->
      </p>
    </div>
  </settingLayout>
</template>

<script>
import settingLayout from '@/components/token/liquidity_setting.vue'
import NoTokenTip from '@/components/NoTokenTip.vue'

export default {
  components: {
    settingLayout,
    NoTokenTip
  },
  data() {
    return {
      loading: false,
      form: {
        amount: null
      },
      NoToken: false,
      mintDetail: {
        count: 0,
        totalSupply: 0,
      },
      token: {}
    }
  },
  computed: {
    // mint amount already upper limit
    amountUpperLimit() {
      if (this.mintDetail.totalSupply >= 100000000) {
        return true
      }
      return false
    }
  },
  watch: {
  },
  created() {
    this.getMintDetail()
  },
  methods: {
    async getMintDetail() {
      this.loading = true
      const result = await this.$API.getMintDetail()
      const tokenDetail = await this.$API.tokenDetail()
      if (tokenDetail.code === 0) {
        this.token = tokenDetail.data.token
      }
      if (result.code === 0) {
        this.NoToken = false
        this.mintDetail = {
          count: result.data.count,
          totalSupply: this.$utils.fromDecimal(result.data.total_supply)
        }
      } else {
        this.NoToken = true
      }
      this.loading = false
    },
    async minetokenMint() {
      this.$message('正在增发中，请稍等片刻。')
      this.loading = true
      const res = await this.$API.minetokenMint({
        amount: this.$utils.toDecimal(this.form.amount)
      })
      this.loading = false
      if (res.code === 0) {
        this.$message({ showClose: true, message: res.message, type: 'success'})
        this.getMintDetail()
      } else {
        this.$message({ showClose: true, message: res.message, type: 'error' })
      }
    },
    resetForm() {
      this.form.amount = null
    }
  }
}
</script>

<style lang="less" scoped>
.mint-setting {
  a {
    columns: #542DE0;
  }
  .form-container {
    max-width: 500px;
    margin-top: 20px;
  }
  &-label {
    font-size: 14px;
    color: #333333;
    line-height: 40px;
  }
  &-num {
    font-size: 30px;
    font-weight: bolder;
    color: #000000;
    margin-left: 20px;
  }
  &-symbol {
    font-size: 14px;
    color: #B2B2B2;
  }
  &-div {
    font-size: 30px;
    font-weight: 100;
  }
  .black {
    color: #000000;
  }
  .gray {
    color: #B2B2B2;
  }
  .mint-form, .mint-info {
    padding: 20px;
  }
}
.colla-splitline {
  max-width: 500px;
}
.colla-help {
  font-size: 14px;
  font-weight: 400;
  color: #333333;
  line-height: 30px;
}
</style>
<style lang="less">
.mint-setting {
  .mint-setting-input {
    margin-right: 20px;
    width: 250px;
  }
  .mint-setting-btn {
    width: 100px;
  }
}
</style>
