<template>
  <el-form
    ref="formRef"
    :label-width="95"
    :model="formValue"
    :rules="rules"
    label-placement="left"
    style="margin: 40px auto 0 0px"
  >
    <el-form-item label="付款账户" prop="myAccount">
      <el-select v-model="formValue.myAccount" class="w-full" placeholder="请选择付款账户">
        <el-option
          v-for="item in myAccountList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="收款账户" prop="account">
      <el-select v-model="formValue.accountType" class="w-1/5 mr-3" placeholder="请选择">
        <el-option
          v-for="item in accountTypeList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-input v-model="formValue.account" class="flex-1" placeholder="请输入收款账户" />
    </el-form-item>
    <el-form-item label="收款人姓名" prop="name">
      <el-input v-model="formValue.name" placeholder="请输入收款人姓名" />
    </el-form-item>
    <el-form-item label="转账金额" prop="money">
      <el-input v-model="formValue.money" placeholder="请输入转账金额">
        <template #prefix>
          <span class="text-gray-400">￥</span>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="formSubmit(formRef)">下一步</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { ElMessage } from 'element-plus';
  import type { ElForm } from 'element-plus';

  type FormInstance = InstanceType<typeof ElForm>;

  const formRef = ref<FormInstance>();

  const myAccountList = [
    {
      label: 'NaiveUiAdmin@163.com',
      value: 1,
    },
    {
      label: 'NaiveUiAdmin@qq.com',
      value: 2,
    },
  ];

  const accountTypeList = [
    {
      label: '微信',
      value: 1,
    },
    {
      label: '支付宝',
      value: 2,
    },
  ];

  const emit = defineEmits(['nextStep']);

  const formValue = ref({
    accountType: 1,
    myAccount: null,
    account: 'xioama@qq.com',
    money: '1980',
    name: 'Ah jung',
  });

  const rules = {
    name: {
      required: true,
      message: '请输入收款人姓名',
      trigger: 'blur',
    },
    account: {
      required: true,
      message: '请输入收款账户',
      trigger: 'blur',
    },
    money: {
      required: true,
      message: '请输入转账金额',
      trigger: 'blur',
    },
    myAccount: {
      required: true,
      type: 'number',
      message: '请选择付款账户',
      trigger: 'change',
    },
  };

  function formSubmit(formEl: FormInstance | undefined) {
    if (!formEl) return;
    formEl.validate((valid) => {
      if (valid) {
        emit('nextStep');
      } else {
        ElMessage({
          message: '验证失败，请填写完整信息',
          type: 'error',
        });
      }
    });
  }
</script>
