<template>
  <div class="step-three g-flex-center">
    <div class="content">
      <i class="iconfont iconbianzu1"></i>
      <h3 class="font-bold ">已成功为您的企业对公账户打款，请输入金额验证。</h3>
      <div class="flex items-center">
        <syDialogInput
          type="number"
          placeholder="请输入金额"
          class="assets-input"
          v-model:value="remitMoney"
        ></syDialogInput>
        <span
          class="tip"
          @mouseenter="showTip = true"
          @mouseleave="showTip = false"
          >?</span
        >
      </div>
      <p class=" text-sm">请输入收到的金额您一共有两次机会</p>
      <em v-show="showTip === true"></em>
      <div class="tip-msg" v-show="showTip === true">
        系统会为您公司账户打入一笔金额为0.01-0.09
        元的款项。由于银行操作的原因，打款时间可能
        需要五分钟，请耐心等待！接受到账通知后，请 再次访问此页面填写金额。
      </div>
      <syButton
        class="confirm-btn"
        type="primary"
        size="large"
        mode="elementBtn"
        @click="confirm()"
        :disabled="disabled"
        >提交</syButton
      >
    </div>
  </div>
</template>
<script lang="ts">
import { companVerify } from "@/service/Api.service";
import { ElMessage } from "element-plus";
import { syButton, syDialogInput } from "cqk-sy-ui";
import { defineComponent } from "vue";
export default defineComponent({
  components: {
    syButton,
    syDialogInput,
  },
  data() {
    return {
      showTip: false,
      remitMoney: "",
      disabled: false,
    };
  },
  methods: {
    async confirm() {
      this.disabled = true;
      const res = await companVerify(Number(this.remitMoney));
      if (res && res.code === 200) {
        ElMessage({
          message: "打款验证成功。",
          type: "success",
        });
        this.$emit("success");
      } else {
        ElMessage.error(res?.msg);
      }
      this.disabled = false;
    },
  },
});
</script>

<style scoped>
.content {
  width: 650px;
  margin-top: 80px;
  position: relative;
  text-align: center;
}
.iconbianzu1 {
  font-size: 50px;
  color: #f5a623;
}
.assets-input {
  width: 610px;
}
:deep(.confirm-btn) {
  margin-top: 83px;
  width: 120px;
}
.g-flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.tip {
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-left: 10px;
  line-height: 22px;
  text-align: center;
  background: #757def;
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  transition: 0.5s;
}
h3 {
  margin: 34px auto;
}
p {
  width: 630px;
  margin: 9px auto 0;
  text-align: left;
}
.tip-msg {
  width: 256px;
  height: 72px;
  position: absolute;
  right: -226px;
  top: 200px;
  padding: 21px 15px 25px 21px;
  background: #f2f2f2;
  border-radius: 4px;
  font-size: 12px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(121, 125, 132, 1);
  line-height: 17px;
  text-align: left;
}
em {
  display: block;
  border-width: 10px;
  position: absolute;
  top: 180px;
  right: 5px;
  border-style: solid dashed dashed;
  font-size: 0;
  line-height: 0;
  border-color: transparent transparent #f2f2f2;
}
</style>
