<template>
  <div class="transfer-pass">
    <div class="form-collection">
      <div class="content">
        <img src="@/assets/img/collection.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">
        <CustomizeFormItem prop="to">
          <syDialogInput
            class="w-full"
            :value="formData.to"
            @update:value="
              (v) => (formData.to = v.replaceAll(/[^0-9a-zA-Z]/g, ''))
            "
            placeholder="填写划转地址"
        /></CustomizeFormItem>
      </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";
import CustomizeFormItem from "@/components/Form/CustomizeFormItem.vue";
import { URLS } from "@/service/URL";

export default defineComponent({
  components: {
    ElButton,
    ElInput,
    ElForm,
    ElFormItem,
    syButton,
    syDialogInput,
    CustomizeFormItem,
  },
  props: ["content", "transferType"],
  data() {
    return {
      formData: {
        to: "",
        amount: "" as any,
      },
      rules: {
        to: [{ 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 === "";
    },
  },
  methods: {
    submit: debounce(
      async function (this: any) {
        if (this.transferType === "picture") {
          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;
        } else if (this.transferType === "album") {
          const res = await $ajax({
            type: "post",
            url: URLS.transferBatch,
            params: {
              batch_num: this.content.batch_num,
              to: this.formData.to,
            },
          });
          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-collection {
    .content {
      height: 56px;
      background: #f8f8f8;
      border-radius: var(--border-radius);
      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-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>
