<template>
  <div class="transfer-pass">
    <div class="head">资产转账</div>
    <div class="form">
      <div class="content">
        <img src="../../assets/images/newProductList/pass.png" alt="">
        已选择 <span class="pass-name" :title="content.name">{{content.name}}</span>
        <span class="pass-type">{{content.type === 1 ? 'NFT' : 'FT'}}</span>
      </div>
      <el-form :rules="rules" :model="formData">
        <el-form-item label="收币地址" prop="to">
          <el-input v-model="formData.to" placeholder="填写收币地址"/>
        </el-form-item>
        <el-form-item class="amount-item" label="转账数量" prop="amount" v-if="content.type === 0">
          <div class="amount-item">
            <el-input type="number" :disabled="amountDisable" v-model.number="formData.amount" placeholder="填写转账数量"></el-input>
            <span class="balance">可转 {{content.balance}} FT</span>
            <el-button class="all-btn" type="text" @click="allIn">全部</el-button>
          </div>
        </el-form-item>
      </el-form>
      <el-button @click="submit" type="primary" :disabled="disabled">确定</el-button>
    </div>
    <div class="tip-wrapper">
      <p class="title">提示</p>
      <p class="tip">1、因区块链交易会有延迟，转账时间约1~10分钟</p>
      <p class="tip">2、提币前请务必确认转账地址是否正确</p>
    </div>
  </div>
</template>

<script>
import {debounce} from "@/utils/tool/debounce";
import {GO_URLS} from "../../config/URLS";

export default {
  name: "TransferPass",
  props: ['content'],
  data() {
    return {
      formData: {
        to: '',
        amount: ''
      },
      rules: {
        to: [
          { required: true, message: '请输入通证名称', trigger: 'blur' },
        ],
        amount: [
          { required: true, message: '请输入通证数量', trigger: 'blur' }
        ],
      },
      amountDisable: false
    }
  },
  watch: {
    'content.type': {
      handler(val) {
        if (val === 1) {
          this.$set(this.formData, 'amount', 1)
        }
      },
      immediate: true
    }
  },
  computed: {
    disabled() {
      return this.formData.to === '' ||
          Number(this.formData.amount) <= 0 ||
          this.formData.amount === ''
    },

  },
  methods: {
    submit: debounce(async function() {
      const params = Object.assign(
          {},
          this.formData,
          {pass_id: this.content.id}
      )
      const res = await this.$ajax({
        type: "post",
        url: GO_URLS.transfer,
        params
      });
      if (!res) return;
      this.$emit('update');
      this.$message.success('转账成功');
      this.$emit('closePopup');
    }, 500, false),
    allIn() {
      this.formData.amount = this.content.balance;
    }
  }
}
</script>

<style scoped lang="less">
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

.transfer-pass {
  width: 592px;
  background: #FFFFFF;
  border-radius: 4px;
  .head {
    line-height: 60px;
    font-size: 18px;
    font-weight: 600;
    color: #353535;
    text-align: center;
    border-bottom: 1px solid #F0F1F5;
  }
  .form {
    padding: 17px 37px 10px 38px;

    .content {
      width: 517px;
      height: 56px;
      background: #F8F8F8;
      border-radius: 4px;
      font-size: 14px;
      line-height: 56px;
      color: #A6A6A6;
      display: flex;
      align-items: center;
      margin-bottom: 14px;

      img {
        width: 30px;
        height: 30px;
        margin-left: 22px;
        margin-right: 11px;
      }

      .pass-name {
        color: #000000;
        margin-left: 20px;
        width: 320px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .pass-type {
        margin-left: auto;
        margin-right: 23px;
        color: #353535;
      }
    }

    /deep/.el-form-item {
      margin-bottom: 17px;

      .el-form-item__label {
        line-height: 35px;
        &:before {
          margin-right: 10px;
        }
        padding-right: 22px;
      }
      .el-form-item__content {
        height: 35px;
        line-height: 35px;

        .el-input {
          width: 420px;
          height: 35px;
          line-height: 35px;
          input::-webkit-outer-spin-button,
　　      input::-webkit-inner-spin-button { -webkit-appearance: none; }
　　      input[type="number"]{ -moz-appearance: textfield; }

          .el-input__inner {
            height: 35px;
            line-height: 35px;
          }
        }
      }
      .el-form-item__error {
        padding-left: 94px;
      }
      .el-input__icon {
        line-height: 35px;
      }
    }
    /deep/.el-button--primary {
      width: 100%;
      height: 40px;
      line-height: 40px;
      padding: 0;
      //background-color: #3f79fe;
    }

    .amount-item {
      position: relative;
      .balance, .all-btn {
        position: absolute;
        font-size: 14px;
        font-weight: normal;
      }
      .balance {
        right: 50px;
        line-height: 16px;
        top: 10px;
        color: #e2e2e2;
        padding-right: 12px;
        border-right: 1px solid #e2e2e2;
      }
      .all-btn {
        right: 9px;
        line-height: 35px;
        padding: 0;
      }
    }

  }
  .tip-wrapper {
    padding: 0 40px 60px 38px;
    font-size: 12px;
    color: #565656;
    line-height: 17px;

    .title {
      color: #FF6268;
      margin-bottom: 8px;
    }

    .tip {
      margin-bottom: 6px;
    }
  }
}

</style>
