<template>
  <div class="step-three g-flex-center">
    <div class="content text-center w-full">
      <img
        src="@/assets/img/chenggong.png"
        style="width: 75px"
        class="mx-auto"
        alt=""
        srcset=""
      />
      <h3 class="font-bold">已成功为您的企业对公账户打款，请输入金额验证。</h3>

      <ElForm ref="formRef" :rules="rules" :model="formModel">
        <CustomizeFormItem label="输入金额" class="form-item" prop="remitMoney">
          <div class="flex items-center w-full">
            <syDialogInput
              type="number"
              placeholder="请输入金额"
              class="assets-input w-full"
              v-model:value="formModel.remitMoney"
            ></syDialogInput>
            <HoverMe :margin-left="35" :margin-top="10">
              <span class="tip">?</span>
              <template #message>
                <div class="tip-msg">
                  系统会为您公司账户打入一笔金额为0.01-0.09
                  元的款项。由于银行操作的原因，打款时间可能
                  需要五分钟，请耐心等待！接受到账通知后，请
                  再次访问此页面填写金额。
                </div>
              </template>
            </HoverMe>
          </div>
        </CustomizeFormItem>
      </ElForm>

      <p class="text-sm text-left">请输入收到的金额您一共有两次机会</p>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ElForm } from "element-plus";
import { syDialogInput } from "cqk-sy-ui";
import { reactive, ref, watch, toRaw } from "vue";
import CustomizeFormItem from "@/components/Form/CustomizeFormItem.vue";
import HoverMe from "@/components/HoverMe/index.vue";

const formRef = ref<InstanceType<typeof ElForm>>();

const state = reactive({
  showTip: false,
  disabled: false,
});

const formModel = reactive({ remitMoney: "" });

const rules = reactive({
  remitMoney: [{ required: true, message: "请输入金额" }],
});

const emit = defineEmits(["update"]);

watch(formModel, () => {
  emit("update", {
    value: toRaw(formModel),
    isValid: Object.keys(formModel).every((key) => {
      return (formModel as any)[key] !== "";
    }),
  });
});
</script>

<style lang="scss" scoped>
.content {
  margin-top: 80px;
  position: relative;
}
.iconbianzu1 {
  font-size: 50px;
  color: #f5a623;
}

.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;
  background: #d1d1d1;
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  transition: 0.5s;
}
h3 {
  margin: 34px auto;
}

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>
