<script setup lang="tsx">
import { ContentWrap } from '@/components/ContentWrap'
import { ref,reactive } from 'vue'
import { ElTabs,ElTabPane} from 'element-plus';
import {CaseManageInfo} from "@/pageComponent/CaseManageTabList"
import {customerInfoTable} from "@/pageComponent/customerInfoTable"
import {identificationTable} from "@/pageComponent/transcationInfoTable"
import { useRoute } from 'vue-router';  
import { FormSchema } from '@/components/Form'
import { ElButton } from 'element-plus';
// 使用 useRoute 获取当前路由信息  
const route = useRoute();  
  const caseInfo = ref(route || null); 
console.log(caseInfo.value.query,"xinxi ")
defineOptions({
  name: 'CustomerInfo'
})
let ActiveName = ref("1");
const tabChange = ()=>{
    
}
const formSchema = reactive<FormSchema[]>([
  {
    field: 'pkid',
    label: '客户号',
    component: 'Input',
    componentProps: {},
  },
  {
    field: 'pkid',
    label: '客户姓名/名称',
    component: 'Input',
    componentProps: {},
  },
  {
    field: 'pkid',
    label: '客户国籍',
    component:"Select",
  },
  {
    field: 'pkid',
    label: '客户身份证件/证明文件类型',
    component:"Select",
  },
  {
    field: 'pkid',
    label: '客户联系电话',
    component:"Input",
  },
  {
    field: 'pkid',
    label: '客户住址',
    component:"Input",
  },
  {
    field: 'pkid',
    label: '客户类型',
    component:"Select",
  },
  {
    field: 'pkid',
    label: '对私客户职业或对公客户的行业',
    component:"Input",
  },
  {
    field: 'pkid',
    label: '控股股东或实际控制人名称',
    component:"Input",
  },
  {
    field: 'pkid',
    label: '法定代表人姓名',
    component:"Input",
  },
  {
    field: 'pkid',
    label: '控股股东或实际控制人身份证件类型',
    component:"Select",
  },
  {
    field: 'pkid',
    label: '法定代表人身份证件类型',
    component:"Select",
  },
  {
    field: 'pkid',
    label: '控股股东或实际控制人其他身份证件/证明文件类型',
    component:"Input",
  },
  {
    field: 'pkid',
    label: '法定代表人身份证件号码',
    component:"Input",
  },
  {
    field: 'pkid',
    label: '控股股东或实际控制人身份证件号码',
    component:"Input",
  },
  {
    field: 'pkid',
    label: '法定代表人其他身份证件/证明文件类型',
    component:"Input",
  },
  {
    field: 'pkid',
    label: '注册资金',
    component:"Input",
  },
  {
    field: 'pkid',
    label: '客户其他身份证件/证明文件类型',
    component:"Input",
  },

])

const transactionColumn = reactive<FormSchema[]>([
  {
        field: 'custCode',
        label: '业务标识号'
    },
    {
        field: 'custName',
        label: '交易时间'
    },
    {
        field: 'tranOrganname',
        label: '交易机构'
    },
    {
        field: 'tranAcct',
        label: '账号'
    },
    {
        field: 'tranOrganname',
        label: '收付'
    },
    {
        field: 'tranAcct',
        label: '币种'
    },
    {
        field: 'tranOrganname',
        label: '交易金额'
    },
    {
        field: 'tranAcct',
        label: '交易方式'
    },
    {
        field: 'tranOrganname',
        label: '对手名称'
    },
    {
        field: 'tranAcct',
        label: '对手账户'
    },
    {
        field: 'tranOrganname',
        label: '对手机构名称'
    },
    {
        field: 'tranAcct',
        label: '校验状态'
    },
    {
        field: 'tranAcct',
        label: '操作人'
    },
    {
        field: 'tranOrganname',
        label: '操作时间'
    },
    {
        field: 'tranAcct',
        label: '操作'
    },
])

let transactionTableData = reactive([]);

const transactionSearch = reactive<FormSchema[]>([
  {
        field: 'attribute10',
        label: '校验状态',
        componentProps: {},
        component: "Select"
    },
]);

const CaseManage = ref(null);
const testFun = ()=>{
  console.log(CaseManage.value.getsystemUse);
  
}

</script>

<template>
  <ContentWrap class="contentWrap">
    <ElTabs v-model="ActiveName" tab-position="top" type="border-card" @tab-change="tabChange">
      <ElTabPane label="可疑案例甄别" name="1">
        <CaseManageInfo ref="CaseManage" />
      </ElTabPane>
      <ElTabPane label="客户信息" name="2">
        <customerInfoTable title="客户信息( 校验已通过 )" branchName="客户信息：" :formSchema="formSchema" /></ElTabPane>
      <ElTabPane label="交易信息甄别" name="3">
        <p class="buttonList">
          <ElButton type="primary">添加流水</ElButton>
          <ElButton type="primary">明细下载</ElButton>
          <ElButton type="primary">批量校验检查</ElButton>
        </p>
        <identificationTable
          :searchStatus="true" :tableColumns="transactionColumn"
          :dataList="transactionTableData" :SearchSchema="transactionSearch" />
       
      </ElTabPane>
    </ElTabs>
    
    
  </ContentWrap>
    
</template>


<style scoped lang="scss">
.contentWrap{
  width:100%;
  overflow: auto;
}
.buttonList{
  text-align: right;
}
</style>