<template>
  <div class="transfer-pass">
    <div class="form">
      <div class="content">
        <img
          src="/images/newProductList/pass.png"
        />
        已选择
        <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">
          <syDialogInput
            v-model:value="formData.to"
            placeholder="填写收币地址"
          />
        </el-form-item>
        <el-form-item
          class="amount-item"
          label="转账数量"
          prop="amount"
          v-if="content.type === 0"
        >
          <div class="amount-item">
            <syDialogInput
              type="number"
              :disabled="amountDisable"
              v-model:value.number="formData.amount"
              placeholder="填写转账数量"
            ></syDialogInput>
            <span class="balance">可转 {{ content.balance }} FT</span>
            <syButton
              class="all-btn"
              mode="elementBtn"
              style="top: 2px"
              type="text"
              @click="allIn"
              >全部</syButton
            >
          </div>
        </el-form-item>
      </el-form>
      <syButton
        @click="submit"
        type="primary"
        :disabled="disabled"
        mode="elementBtn"
        style="margin-top: 18px; margin-bottom: 20px"
        >确定</syButton
      >
    </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 lang="ts">
import { $ajax } from "@/service";
import { debounce, GO_URLS, syButton, syDialogInput } from "cqk-sy-ui";
import { ElMessage, ElButton, ElInput, ElForm, ElFormItem } from "element-plus";
import { defineComponent } from "vue";

export default defineComponent({
  components: {
    ElButton,
    ElInput,
    ElForm,
    ElFormItem,
    syButton,
    syDialogInput,
  },
  props: ["content"],
  data() {
    return {
      formData: {
        to: "",
        amount: "" as any,
      },
      rules: {
        to: [{ required: true, message: "请输入资产名称", trigger: "blur" }],
        amount: [
          { required: true, message: "请输入资产数量", trigger: "blur" },
        ],
      },
      amountDisable: false,
    };
  },
  watch: {
    "content.type": {
      handler(val) {
        if (val === 1) {
          this.formData = {
            ...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 (this: any) {
        const params = Object.assign({}, this.formData, {
          pass_id: this.content.id,
        });
        const res = await $ajax({
          type: "post",
          url: GO_URLS.transfer,
          params,
        });
        if (!res) return;
        this.$emit("update");
        ElMessage.success("转账成功");
        this.$emit("closePopup");
      },
      500,
      false
    ),
    allIn() {
      this.formData.amount = this.content.balance;
    },
  },
});
</script>
<style lang="scss">
.transfer-pass {
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
  }
  input[type="number"] {
    -moz-appearance: textfield;
  }
}
</style>

<style scoped lang="scss">
.transfer-pass {
  background: #ffffff;
  margin-top: -18px;
  .head {
    line-height: 60px;
    font-size: 18px;
    font-weight: 600;
    color: #353535;
    text-align: center;
    border-bottom: 1px solid #f0f1f5;
  }
  .form {
    white-space: nowrap;

    .content {
      height: 56px;
      background: #f8f8f8;
      border-radius: 4px;
      font-size: 14px;
      line-height: 56px;
      color: #a6a6a6;
      display: flex;
      align-items: center;
      margin-bottom: 20px;

      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: 20px;

      .el-form-item__label {
        line-height: 35px;
        &:before {
          margin-right: 10px;
        }
        padding-right: 22px;
      }
      .el-form-item__content {
        .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: 0px;
      }
      .el-input__icon {
        line-height: 35px;
      }
    }
    :deep(.el-button--primary) {
      width: 100%;
      height: 40px;
      line-height: 40px;
      padding: 0;
      //background-color: var(--sy-blue);
    }

    .amount-item {
      position: relative;
      .balance,
      :deep(.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;
      }
      :deep(.all-btn) {
        right: -16px;
        line-height: 35px;
        padding: 0;
      }
    }
  }
  .tip-wrapper {
    font-size: 12px;
    color: #565656;
    line-height: 17px;

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

    .tip {
      margin-bottom: 6px;
    }
  }
}
</style>
