<template>
  <div class="assets-details-con bg-grey">
    <m-nav-bar title="转账" background="transparent" light />
    <div class="assets-operation-con">
      <div class="card-con">
        <div class="assets-name flex-default">
          <div class="m-icon" />
          <div class="text">
            {{ userAssets.coin === "mallCoin" ? "积分" : userAssets.coin }}
          </div>
        </div>
        <div class="assets-number">
          <div class="tips">可用余额</div>
          <div class="number">
            {{ userAssets.amount }}<text class="unit"></text>
          </div>
        </div>
      </div>
    </div>
    <div class="assets-operation-con" style="margin-top: 10px">
      <div class="card-con">
        <div class="item-info-con flex-default">
          <div class="label">转账地址</div>
          <div class="value flex-default">
            <input
              class="uni-input"
              v-model="ruleForm.otherAddress"
              placeholder="请填写转账地址"
            />
            <!-- <uni-icons type="scan" :size="size" @click="scanCode"></uni-icons> -->
          </div>
        </div>
        <div class="item-info-con flex-default">
          <div class="label">转账数量</div>
          <div class="value flex-default">
            <input
              class="uni-input"
              v-model="ruleForm.amount"
              @input="inputAmount"
              type="number"
              placeholder="请填写转账数量"
            />
          </div>
        </div>
        <!-- 				<div class="item-info-con flex-default">
					<div class="label">
						矿工费
					</div>
					<div class="value flex-default">
						<input class="uni-input" placeholder="请填写矿工费" placeholder-style="color:#AEAEAE"/>
					</div>
				</div> -->
        <div class="item-info-con flex-default">
          <div class="label">备注</div>
          <div class="value flex-default">
            <input
              class="uni-input"
              v-model="ruleForm.remarks"
              placeholder="请填写备注"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="assets-operation-footer">
      <van-button
        :disabled="formVerification"
        block
        @click="submitData"
        type="primary"
      >
        确定
      </van-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        amount: null,
        coin: "BASE",
        otherAddress: "",
        remarks: "",
        isChain: false
      },
      coin: "BASE",
      userAssets: {
        amount: 0
      },
    };
  },
  computed: {
    formVerification() {
      if (
        this.ruleForm.otherAddress &&
        this.ruleForm.amount &&
        this.ruleForm.amount <= this.userAssets.amount
      ) {
        return false;
      } else {
        return true;
      }
    },
  },
  created() {
    let { otherAddress } = this.$route.query;
    if (otherAddress) {
      this.ruleForm.otherAddress = otherAddress;
    }
    this.requestData();
  },
  methods: {
    inputAmount() {
      //小数点后四位
      this.$nextTick(() => {
        this.ruleForm.amount = this.ruleForm.amount.replace(
          /^(\-)*(\d+)\.(\d\d\d\d).*$/,
          "$1$2.$3"
        );
      });
    },
    scanCode() {
      // const host=window.location.host
      // let url="http://sao315.com/w/api/saoyisao?redirect_uri="+host+"/#/pages/user-center/myassets/collection"
      // window.open(this.url)
      // // uni.scanCode({
      // //     success: function (res) {
      // //         console.log('条码类型：' + res.scanType);
      // //         console.log('条码内容：' + res.result);
      // //     }
      // // });
    },
    requestData() {
      this.$showLoading()
      this.$api({
        apiName: "getOwnAsset",
        postData: { coin: this.coin },
        success: (res) => {
          this.userAssets = res;
          // this.getAssetTran()
        },
        complete: this.$hideLoading
      });
    },
    getAssetTran() {
      const obj = {
        amount: 0,
        coin: this.userAssets.coin,
        otherAddress: this.userAssets.address,
        remarks: "",
      };
      this.$api({
        apiName: "getAssetTran",
        postData: obj,
        success: (res) => {
        },
      });
    },
    submitData() {
      this.$showLoading();
      this.$api({
        apiName: "postAssetTran",
        postData: this.ruleForm,
        success: (res) => {
          if (res === "success") {
            this.$toast("转账成功！");
            this.ruleForm = {
              amount: null,
              coin: "",
              otherAddress: "",
              remarks: "",
            };
            this.requestData();
          }
        },
        complete: () => {
          this.$hideLoading();
        },
      });
    },
  },
};
</script>
<style lang="less">
@import "../../../components/css/assets-and-integral.less";
.assets-details-con {
  min-height: 600px;
  position: relative;
  .assets-operation-con {
    margin-top: 65px;
    // width: 100%;
    .card-con {
      background-color: #ffffff;
      padding: 0 26px;
      width: 343px;
      border-radius: 6px;
      margin: 0 auto;
      .assets-name {
        padding: 20px 0;
        .m-icon {
          width: 29px;
          height: 29px;
          background-color: #aeaeae;
          border-radius: 50%;
          margin-right: 11px;
        }
        .text {
          font-size: 16px;
          line-height: 29px;
          font-weight: 700;
        }
      }
      .assets-number {
        padding-bottom: 27px;
        .tips {
          font-size: 11px;
          color: #666666;
          line-height: 16px;
        }
        .number {
          font-size: 26px;
          font-weight: bold;
          line-height: 31px;
          .unit {
            font-size: 15px;
            font-weight: normal;
            margin-left: 5px;
          }
        }
      }
      .item-info-con {
        height: 56px;
        align-items: center;
        border-bottom: 1px solid #f1f1f1;
        .label {
          font-size: 14px;
          width: 76px;
          flex-shrink: 0;
          line-height: 20px;
          height: 20px;
        }
        .value {
          width: calc(~"100% - 76px");
          align-items: center;
          .uni-input {
            line-height: 20px;
            font-size: 14px;
            padding: 0;
            height: 20px;
            flex-shrink: 1;
            &::-webkit-input-placeholder{
              color: #AEAEAE;
            }
          }
          .scan {
            flex-shrink: 0;
          }
        }
      }
    }
  }
  .assets-operation-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 64px;
    background-color: #ffffff;
    z-index: 100;
    button {
      width: 343px;
      height: 40px;
      border-radius: 20px;
      font-size: 16px;
      margin: 12px auto 0;
    }
  }
}
</style>
