<script setup lang="tsx">
import { ContentWrap } from '@/components/ContentWrap';
import { reactive } from 'vue';
import { customerInfoTable } from "@/pageComponent/customerInfoTable";
import { ElButton } from 'element-plus'
import { FormSchema } from '@/components/Form';
defineOptions({
    name: 'TransicationInfoAddRecord'
})

//金融机构信息
const financialInstInfor = reactive<FormSchema[]>([
    {
        field: 'pkid',
        label: '金融机构网点代码：',
        component: 'Input',
        componentProps: {},
    },
    {
        field: 'pkid',
        label: '金融机构与客户的关系：',
        component: 'Select',
        componentProps: {},
    },
])

//客户信息
const customerInfo = reactive<FormSchema[]>([
    {
        field: 'pkid',
        label: '客户号：',
        component: 'Input',
        componentProps: {},
    },
    {
        field: 'pkid',
        label: '客户姓名/名称：',
        component: 'Input',
        componentProps: {},
    },
    {
        field: 'pkid',
        label: '客户身份证件/证明文件类型：',
        component: 'Select',
        componentProps: {},
    },
    {
        field: 'pkid',
        label: '客户证件号码：',
        component: 'Input',
        componentProps: {},
    },
    {
        field: 'pkid',
        label: '客户其他身份证件/证明文件类型：',
        component: 'Input',
        componentProps: {},
    },
])

//交易信息
const transactionInfo = reactive<FormSchema[]>([
    {
        field: 'pkid',
        label: '交易代办人姓名：',
        component: 'Input',
        componentProps: {},
    },
    {
        field: 'pkid',
        label: '交易日期：',
        component: 'Select',
        componentProps: {},
    },
    {
        field: 'pkid',
        label: '交易代办人身份证件类型：',
        component: 'Select',
        componentProps: {},
    },
    {
        field: 'pkid',
        label: '金融机构与客户的关系：',
        component: 'Select',
        componentProps: {},
    },
    {
        field: 'pkid',
        label: '业务标识号：',
        component: 'Input',
        componentProps: {},
    },
    {
        field: 'pkid',
        label: '交易代办人其他身份证件/证明文件类型：',
        component: 'Input',
        componentProps: {},
    },
    {
        field: 'pkid',
        label: '交易时间：',
        component: 'Input',
        componentProps: {},
    },
    {
        field: 'pkid',
        label: '交易代办人证件号码：',
        component: 'Input',
        componentProps: {},
    },
    {
        field: 'pkid',
        label: '交易代办人国籍：',
        component: 'Select',
        componentProps: {},
    },
    {
        field: 'pkid',
        label: '涉外收支交易分类与代码：',
        component: 'Input',
        componentProps: {
            disabled:true,
        },
    },
    {
        field: 'pkid',
        label: '资金用途：',
        component: 'Input',
        componentProps: {},
    },
    {
        field: 'pkid',
        label: '资金收付标识：',
        component: 'Select',
        componentProps: {},
    },
    {
        field: 'pkid',
        label: '交易发生地：',
        component: 'Input',
        componentProps: {},
    },
    {
        field: 'pkid',
        label: '账户类型：',
        component: 'Select',
        componentProps: {},
    },
    {
        field: 'pkid',
        label: '交易账户：',
        component: 'Input',
        componentProps: {},
    },
    {
        field: 'pkid',
        label: '交易币种：',
        component: 'Select',
        componentProps: {},
    },
    {
        field: 'pkid',
        label: '交易金额：',
        component: 'Input',
        componentProps: {},
    },
    {
        field: 'pkid',
        label: '交易金额(折人民币)：',
        component: 'Input',
        componentProps: {
            disabled:true
        },
    },
    {
        field: 'pkid',
        label: '交易金额(折美元)：',
        component: 'Input',
        componentProps: {
            disabled:true
        },
    },
    {
        field: 'pkid',
        label: '银行卡类型：',
        component: 'Select',
        componentProps: {},
    },
    {
        field: 'pkid',
        label: '银行卡号码：',
        component: 'Input',
        componentProps: {},
    },
    {
        field: 'pkid',
        label: '交易来源：',
        component: 'Select',
        componentProps: {},
    },
    {
        field: 'pkid',
        label: '银行卡其他类型：',
        component: 'Input',
        componentProps: {},
    },
    {
        field: 'pkid',
        label: '收付款方匹配号类型：',
        component: 'Select',
        componentProps: {},
    },
    {
        field: 'pkid',
        label: '收付款方匹配号：',
        component: 'Input',
        componentProps: {},
    },
    {
        field: 'pkid',
        label: '非柜台交易方式：',
        component: 'Select',
        componentProps: {},
    },
    {
        field: 'pkid',
        label: '其他非柜台交易方式：',
        component: 'Input',
        componentProps: {},
    },
    {
        field: 'pkid',
        label: '非柜台交易方式的设备代码：',
        component: 'Input',
        componentProps: {},
    },
    {
        field: 'pkid',
        label: '银行与支付机构之间的业务交易编码：',
        component: 'Input',
        componentProps: {},
    },
    {
        field: 'pkid',
        label: '开户时间：',
        component: 'Input',
        componentProps: {
            disabled:true
        },
    },
    {
        field: 'pkid',
        label: '交易方式：',
        component: 'Select',
        componentProps: {},
    },
    {
        field: 'pkid',
        label: '销户时间：',
        component: 'Input',
        componentProps: {
            disabled:true
        },
    },
    {
        field: 'pkid',
        label: '交易信息备注：',
        component: 'Select',
        componentProps: {
            disabled:true
        },
    },


])
//对手金融机构信息
const competitorFinance = reactive<FormSchema[]>([
    {
        field: 'pkid',
        label: '对方金融机构网点名称：',
        component: 'Input',
        componentProps: {},
    },
    {
        field: 'pkid',
        label: '对方金融机构网点代码类型：',
        component: 'Select',
        componentProps: {},
    },
    {
        field: 'pkid',
        label: '对方金融机构网点代码：',
        component: 'Input',
        componentProps: {},
    },
    {
        field: 'pkid',
        label: '对方金融机构行政区划代码：',
        component: 'Input',
        componentProps: {},
    },
])

//对手信息
const competitorInfo = reactive<FormSchema[]>([
    {
        field: 'pkid',
        label: '交易对手名称：',
        component: 'Input',
        componentProps: {},
    },
    {
        field: 'pkid',
        label: '交易对手证件类型：',
        component: 'Select',
        componentProps: {},
    },
    {
        field: 'pkid',
        label: '交易对手账户类型：',
        component: 'Select',
        componentProps: {},
    },
    {
        field: 'pkid',
        label: '交易对手证件号码：',
        component: 'Input',
        componentProps: {},
    },
    {
        field: 'pkid',
        label: '交易对手账户：',
        component: 'Input',
        componentProps: {},
    },
    {
        field: 'pkid',
        label: '交易对手其他身份证件/证明文件类型：',
        component: 'Input',
        componentProps: {},
    },
])
//提交信息
const submitInfo = ()=>{
    console.log("提交信息");
}
//保存信息
const confirmInfo = ()=>{
    console.log("保存信息")
}
//下一个
const nextInfo = ()=>{
    console.log("下一条信息")
}
</script>
<template>
  <ContentWrap>
    <customerInfoTable title="交易流水信息" branchName="金融机构信息：" :formSchema="financialInstInfor" />
    <customerInfoTable branchName="客户信息：" :formSchema="customerInfo" />
    <customerInfoTable branchName="交易信息：" :formSchema="transactionInfo" />
    <customerInfoTable branchName="对手金融机构信息：" :formSchema="competitorFinance" />
    <customerInfoTable branchName="对手信息：" :formSchema="competitorInfo" />
    <p class="buttonList">
      <ElButton type="primary" @click="submitInfo">提交</ElButton>
      <ElButton type="primary" @click="confirmInfo">保存</ElButton>
      <ElButton type="primary" @click="nextInfo">下一个</ElButton>
    </p>
  </ContentWrap>
</template>
<style scoped>
    .buttonList{
        text-align: center;
    }
</style>