<script setup lang="tsx">
import { ContentWrap } from '@/components/ContentWrap'
import { ref, reactive } from 'vue'
import { ElTabs, ElTabPane } from 'element-plus'
import { useRoute } from 'vue-router';
import { customerInfoTable } from '@/pageComponent/customerInfoTable'
import { identificationTable } from '@/pageComponent/transcationInfoTable';
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: 'CustomerIdentification'
})
//当前活跃的activeName<List>
let ActiveName = reactive({
    activeName: "1",
    customerIdentActiveName: "11",
    relateInfoActiveName: "21",
    transactionActiveName:"31"
})
/*---------------------------------客户识别start-----------------------------------*/
//客户概况
const customer = reactive<FormSchema[]>([
    {
        field: 'custPptype',
        label: '客户号：',
        componentProps: {},
        component: 'Input'
    },
    {
        field: 'custPptype',
        label: '客户名称：',
        componentProps: {},
        component: 'Input'
    },
    {
        field: 'custPptype',
        label: '客户身份证件/证明文件类型：',
        componentProps: {},
        component: 'Select'
    },
    {
        field: 'custPptype',
        label: '客户证件号码：',
        componentProps: {},
        component: 'Input'
    },
    {
        field: 'custPptype',
        label: '客户国籍：',
        componentProps: {},
        component: 'Select'
    },
    {
        field: 'custPptype',
        label: '客户类型：',
        componentProps: {},
        component: 'Select'
    },
    {
        field: 'custPptype',
        label: '民族',
        componentProps: { disabled: true, },
        component: 'Select'
    },
    {
        field: 'custPptype',
        label: '性别：',
        componentProps: {},
        component: 'Select'
    },
    {
        field: 'custPptype',
        label: '证件起始日期：',
        componentProps: {},
        component: "DatePicker"
    },
    {
        field: 'custPptype',
        label: '证件到期日期：',
        componentProps: {},
        component: 'DatePicker'
    },
    {
        field: 'custPptype',
        label: '职业或行业：',
        componentProps: {},
        component: 'Select'
    },
])
//通讯信息
const communication = reactive<FormSchema[]>([
    {
        field: 'custPptype',
        label: '通讯地址：',
        componentProps: {},
        component: 'Input'
    },
    {
        field: 'custPptype',
        label: '客户手机号码：',
        componentProps: {},
        component: 'Input'
    },
    {
        field: 'custPptype',
        label: '客户固定电话：',
        componentProps: {},
        component: 'Input'
    },
])
//其他信息
const other = reactive<FormSchema[]>([
    {
        field: 'custPptype',
        label: '法人代表人姓名：',
        componentProps: {},
        component: 'Input'
    },
    {
        field: 'custPptype',
        label: '法人代表人证件类型：',
        componentProps: {},
        component: 'Select'
    },
    {
        field: 'custPptype',
        label: '法人代表人证件号码：',
        componentProps: {},
        component: 'Input'
    },
    {
        field: 'custPptype',
        label: '其他补充信息：',
        componentProps: {},
        component: 'Input'
    },
])
//修改信息
const editInfo = () => {

}

const customerSurveyColumn1 = reactive([
    {
        field: 'selection',
        type: 'selection',
        fixed: true
    },
    {
        field: 'custCode',
        label: '业务背景'
    },
    {
        field: 'custName',
        label: '资金来源与去向'
    },
    {
        field: 'tranOrganname',
        label: '资金用途'
    },
    {
        field: 'tranAcct',
        label: '实际经营业务'
    },
]);
const customerSurveyColumn2 = reactive([
    {
        field: 'selection',
        type: 'selection',
        fixed: true
    },
    {
        field: 'custCode',
        label: '行业状况分析'
    },
    {
        field: 'custName',
        label: '经营状况分析'
    },
    {
        field: 'tranOrganname',
        label: '财务状况分析'
    },
]);
const customerSurveyColumn3 = reactive([
    {
        field: 'selection',
        type: 'selection',
        fixed: true
    },
    {
        field: 'custCode',
        label: '名称'
    },
    {
        field: 'custName',
        label: '证件号码'
    },
    {
        field: 'tranOrganname',
        label: '证件类型'
    },
    {
        field: 'tranAcct',
        label: '证件到期日'
    },
    {
        field: 'tranAcct',
        label: '联系方式'
    },
]);

const customerSurveyTableData1 = reactive([]);
const customerSurveyTableData2 = reactive([]);
const customerSurveyTableData3 = reactive([]);

const riskEventSearchSchema = reactive<FormSchema[]>([
    {
        field: 'attribute10',
        label: '创建日期：',
        componentProps: {},
        component: "DatePicker"
    },
    {
        field: 'attribute10',
        label: '失效日期：',
        componentProps: {},
        component: "DatePicker"
    },
    {
        field: 'attribute10',
        label: '风险类型：',
        componentProps: {},
        component: "Select"
    }
])
const riskEventColumn = reactive([
    {
        field: 'selection',
        type: 'selection',
        fixed: true
    },
    {
        field: 'custCode',
        label: '事件编号'
    },
    {
        field: 'custCode',
        label: '事件简述'
    },
    {
        field: 'custCode',
        label: '风险类型'
    },
    {
        field: 'custCode',
        label: '创建人'
    },
    {
        field: 'custCode',
        label: '创建时间'
    },
    {
        field: 'custCode',
        label: '失效时间'
    },
])
const riskEventTableData = reactive([]);

const InveConclusion = reactive<FormSchema[]>([
    {
        field: 'custPptype',
        label: '客户识别日期：',
        componentProps: {},
        component: "DatePicker"
    },
    {
        field: 'custPptype',
        label: '识别类型：',
        componentProps: {},
        component: 'Select'
    },
    {
        field: 'custPptype',
        label: '客户识别结论：',
        componentProps: {
            type: "textarea"
        },
        component: 'Input'
    },
])
//保存客户识别-调查结论
const confirmInveConclusion = () => {

}

/*---------------------------------客户识别end-----------------------------------*/

/*---------------------------------相关信息start-----------------------------------*/
//客户信息
const customerInfo = reactive<FormSchema[]>([
    {
        field: 'custPptype',
        label: '客户号：',
        componentProps: { disabled: true, },
        component: 'Input'
    },
    {
        field: 'custPptype',
        label: '客户名称：',
        componentProps: { disabled: true, },
        component: 'Input'
    },
    {
        field: 'custPptype',
        label: '营业执照号：',
        componentProps: { disabled: true, },
        component: 'Input'
    },
    {
        field: 'custPptype',
        label: '营业执照到期日：',
        componentProps: { disabled: true, },
        component: 'Input'
    },
    {
        field: 'custPptype',
        label: '客户类型：',
        componentProps: { disabled: true, },
        component: 'Select'
    },
])
const companyInfo = reactive<FormSchema[]>([
    {
        field: 'custPptype',
        label: '机构信用代码证：',
        componentProps: { disabled: true, },
        component: 'Input'
    },
    {
        field: 'custPptype',
        label: '机构信用代码有效期：',
        componentProps: { disabled: true, },
        component: 'Input'
    },
    {
        field: 'custPptype',
        label: '国税登记证号：',
        componentProps: { disabled: true, },
        component: 'Input'
    },
    {
        field: 'custPptype',
        label: '国税登记证到期日：',
        componentProps: { disabled: true, },
        component: 'Input'
    },
    {
        field: 'custPptype',
        label: '地税登记证号：',
        componentProps: { disabled: true, },
        component: 'Input'
    },
    {
        field: 'custPptype',
        label: '地税登记证到期日：',
        componentProps: { disabled: true, },
        component: 'Input'
    },
    {
        field: 'custPptype',
        label: '注册资金：',
        componentProps: { disabled: true, },
        component: 'Input'
    },
    {
        field: 'custPptype',
        label: '注册资金币种：',
        componentProps: { disabled: true, },
        component: 'Input'
    },
    {
        field: 'custPptype',
        label: '基本账号：',
        componentProps: { disabled: true, },
        component: 'Input'
    },
    {
        field: 'custPptype',
        label: '基本账号归属行：',
        componentProps: { disabled: true, },
        component: 'Input'
    },
    {
        field: 'custPptype',
        label: '基本账号归属网点：',
        componentProps: { disabled: true, },
        component: 'Input'
    },
    {
        field: 'custPptype',
        label: '经营范围：',
        componentProps: { disabled: true, },
        component: 'Input'
    },
    {
        field: 'custPptype',
        label: '职业/行业：',
        componentProps: { disabled: true, },
        component: 'Select'
    },
    {
        field: 'custPptype',
        label: '企业类型：',
        componentProps: { disabled: true, },
        component: 'Select'
    },
    {
        field: 'custPptype',
        label: '主管业务：',
        componentProps: { disabled: true, },
        component: 'Input'
    },
    {
        field: 'custPptype',
        label: '法人代表：',
        componentProps: { disabled: true, },
        component: 'Input'
    },
    {
        field: 'custPptype',
        label: '法人代表证件类型：',
        componentProps: { disabled: true, },
        component: 'Select'
    },
    {
        field: 'custPptype',
        label: '法人代表证件号码：',
        componentProps: { disabled: true, },
        component: 'Input'
    },
])

//账户信息
const accountInfoColumn = reactive([
    {
        field: 'custCode',
        label: '客户号'
    },
    {
        field: 'custName',
        label: '账户'
    },
    {
        field: 'tranOrganname',
        label: '开户机构'
    },
    {
        field: 'custCode',
        label: '账户类型'
    },
    {
        field: 'custName',
        label: '账户状态'
    },
    {
        field: 'tranOrganname',
        label: '开户日期'
    },
    {
        field: 'tranOrganname',
        label: '销户日期'
    },
])
const accountInfoTableData = reactive([]);

//案例信息
const caseInfoColumn = reactive([
    {
        field: 'custCode',
        label: '案例编号'
    },
    {
        field: 'custName',
        label: '案例日期'
    },
    {
        field: 'tranOrganname',
        label: '案例规则'
    },
    {
        field: 'custCode',
        label: '机构名称'
    },
    {
        field: 'custName',
        label: '客户号'
    },
    {
        field: 'tranOrganname',
        label: '客户名称'
    },
    {
        field: 'tranOrganname',
        label: '交易次数'
    },
    {
        field: 'tranOrganname',
        label: '交易金额'
    },
]);
const caseInfoTableData = reactive([]);

//风险评级信息
const riskRateInfoColumn = reactive([
    {
        field: 'custName',
        label: '机构'
    },
    {
        field: 'tranOrganname',
        label: '客户号'
    },
    {
        field: 'custCode',
        label: '客户名称'
    },
    {
        field: 'custCode',
        label: '评估得分'
    },
    {
        field: 'custCode',
        label: '风险等级'
    },
    {
        field: 'custCode',
        label: '评级日期'
    },
]);
const riskRateInfoTableData = reactive([]);

//历史识别信息
const historyIdentifyColumn = reactive([
    {
        field: 'custName',
        label: '结论编号'
    },
    {
        field: 'tranOrganname',
        label: '调查机构'
    },
    {
        field: 'custCode',
        label: '识别类型'
    },
    {
        field: 'custName',
        label: '调查结论'
    },
    {
        field: 'tranOrganname',
        label: '调查途径'
    },
    {
        field: 'custCode',
        label: '结论有效期'
    },
    {
        field: 'tranOrganname',
        label: '调查日期'
    },
    {
        field: 'custCode',
        label: '调查人'
    },
]);
const historyIdentifyTableData = reactive([]);
/*---------------------------------相关信息end-----------------------------------*/

/*---------------------------------交易信息start-----------------------------------*/
//按交易渠道
const transactionChannelColumn = reactive<FormSchema[]>([
    {
        field: 'custName',
        label: '交易渠道'
    },
    {
        field: 'tranOrganname',
        label: '笔数'
    },
    {
        field: 'tranOrganname',
        label: '金额'
    },
    {
        field: 'tranOrganname',
        label: '笔数占比'
    },
    {
        field: 'tranOrganname',
        label: '金额占比'
    },
])
const transactionChannelTableData = reactive([])
//按交易行
const trandingCompanyColumn = reactive<FormSchema[]>([
    {
        field: 'custName',
        label: '交易行'
    },
    {
        field: 'tranOrganname',
        label: '笔数'
    },
    {
        field: 'tranOrganname',
        label: '金额'
    },
    {
        field: 'tranOrganname',
        label: '笔数占比'
    },
    {
        field: 'tranOrganname',
        label: '金额占比'
    },
]);
const trandingCompanyTableData = reactive([]);
//按按结算方式
const paymentTypeColumn = reactive<FormSchema[]>([
    {
        field: 'custName',
        label: '结算方式'
    },
    {
        field: 'tranOrganname',
        label: '笔数'
    },
    {
        field: 'tranOrganname',
        label: '金额'
    },
    {
        field: 'tranOrganname',
        label: '笔数占比'
    },
    {
        field: 'tranOrganname',
        label: '金额占比'
    },
]);
const paymentTypeTableData = reactive([]);
//按交易对手
const counterpartyColumn = reactive<FormSchema[]>([
    {
        field: 'custName',
        label: '对手名称'
    },
    {
        field: 'custName',
        label: '对手账号'
    },
    {
        field: 'tranOrganname',
        label: '笔数'
    },
    {
        field: 'tranOrganname',
        label: '金额'
    },
    {
        field: 'tranOrganname',
        label: '笔数占比'
    },
    {
        field: 'tranOrganname',
        label: '金额占比'
    },
]);
const counterpartyTableData = reactive([]);
//按资金链
//资金流入
const capitalInflowColumn = reactive<FormSchema[]>([
    {
        field: 'custName',
        label: '资金转入客户号'
    },
    {
        field: 'custName',
        label: '资金转入客户名称'
    },
    {
        field: 'tranOrganname',
        label: '资金转入交易行'
    },
    {
        field: 'tranOrganname',
        label: '资金转入金融机构所在地'
    },
    {
        field: 'tranOrganname',
        label: '交易日期'
    },
    {
        field: 'tranOrganname',
        label: '交易金额'
    },
    {
        field: 'tranOrganname',
        label: '币种'
    },
    {
        field: 'tranOrganname',
        label: '交易方式'
    },
]);
const capitalInflowTableData = reactive([]);
//资金流出
const capitalOutflowColumn = reactive<FormSchema[]>([{
        field: 'custName',
        label: '资金转出客户号'
    },
    {
        field: 'custName',
        label: '资金转出客户名称'
    },
    {
        field: 'tranOrganname',
        label: '资金转出交易行'
    },
    {
        field: 'tranOrganname',
        label: '资金转出金融机构所在地'
    },
    {
        field: 'tranOrganname',
        label: '交易日期'
    },
    {
        field: 'tranOrganname',
        label: '交易金额'
    },
    {
        field: 'tranOrganname',
        label: '币种'
    },
    {
        field: 'tranOrganname',
        label: '交易方式'
    },
]);
const capitalOutflowTableData = reactive([]);
const capitalSechma = reactive<FormSchema[]>([
{
        field: 'attribute10',
        label: '起始日期：',
        componentProps: {},
        component: "DatePicker"
    },
    {
        field: 'attribute10',
        label: '结束日期：',
        componentProps: {},
        component: "DatePicker"
    },
]);
/*---------------------------------交易信息end-----------------------------------*/
</script>

<template>
  <ContentWrap class="contentWrap">
    <ElTabs v-model="ActiveName.activeName" tab-position="top" type="border-card">
      <ElTabPane label="客户识别" name="1">
        <ElTabs v-model="ActiveName.customerIdentActiveName" tab-position="top" type="border-card">
          <ElTabPane label="客户信息维护" name="11">
            <customerInfoTable branchName="客户概况：" :formSchema="customer" />
            <customerInfoTable branchName="通讯信息：" :formSchema="communication" />
            <customerInfoTable branchName="其他信息：" :formSchema="other" />
            <p class="buttonList">
              <ElButton type="primary" @click="editInfo">修改</ElButton>
            </p>
          </ElTabPane>
          <ElTabPane label="客户调查" name="12">
            <identificationTable
              :searchStatus="false" :tableColumns="customerSurveyColumn1"
              :dataList="customerSurveyTableData1" />
            <identificationTable
              :searchStatus="false" :tableColumns="customerSurveyColumn2"
              :dataList="customerSurveyTableData2" />
            <identificationTable
              :searchStatus="false" :tableColumns="customerSurveyColumn3"
              :dataList="customerSurveyTableData3" />
          </ElTabPane>
          <ElTabPane label="风险事件" name="13">
            <identificationTable
              :searchStatus="true" :tableColumns="riskEventColumn"
              :SearchSchema="riskEventSearchSchema" :dataList="riskEventTableData" />
          </ElTabPane>
          <ElTabPane label="调查结论" name="14">
            <customerInfoTable :formSchema="InveConclusion" />
            <p class="buttonList">
              <ElButton type="primary" @click="confirmInveConclusion">保存</ElButton>
            </p>
          </ElTabPane>
        </ElTabs>
      </ElTabPane>
      <ElTabPane label="相关信息" name="2">
        <ElTabs v-model="ActiveName.relateInfoActiveName" tab-position="top" type="border-card">
          <ElTabPane label="客户信息" name="21">
            <customerInfoTable branchName="客户概况：" :formSchema="customerInfo" />
            <customerInfoTable branchName="公司信息：" :formSchema="companyInfo" />
          </ElTabPane>
          <ElTabPane label="账户信息" name="22">
            <identificationTable
              :searchStatus="false" :tableColumns="accountInfoColumn"
              :dataList="accountInfoTableData" />
          </ElTabPane>
          <ElTabPane label="案例信息" name="23">
            <identificationTable
              :searchStatus="false" :tableColumns="caseInfoColumn"
              :dataList="caseInfoTableData" />
          </ElTabPane>
          <ElTabPane label="风险评级信息" name="24">
            <identificationTable
              :searchStatus="false" :tableColumns="riskRateInfoColumn"
              :dataList="riskRateInfoTableData" />
          </ElTabPane>
          <ElTabPane label="历史识别信息" name="25">
            <identificationTable
              :searchStatus="false" :tableColumns="transactionChannelColumn"
              :dataList="transactionChannelTableData" />
          </ElTabPane>
        </ElTabs>
      </ElTabPane>
      <ElTabPane label="交易分析" name="3">
        <ElTabs v-model="ActiveName.transactionActiveName" tab-position="top" type="border-card">
          <ElTabPane label="按交易渠道" name="31">
            <h4>按交易渠道：</h4>
            <identificationTable
              :searchStatus="false" :tableColumns="historyIdentifyColumn"
              :dataList="historyIdentifyTableData" />
            <p class="allTotal">交易总笔数：0笔    交易总金额：0元</p>
          </ElTabPane>
          <ElTabPane label="按交易行" name="32">
            <h4>按交易行：</h4>
            <identificationTable
              :searchStatus="false" :tableColumns="trandingCompanyColumn"
              :dataList="trandingCompanyTableData" />
            <p class="allTotal">交易总笔数：0笔    交易总金额：0元</p>
          </ElTabPane>
          <ElTabPane label="按结算方式" name="33">
            <h4>按结算方式：</h4>
            <identificationTable
              :searchStatus="false" :tableColumns="paymentTypeColumn"
              :dataList="paymentTypeTableData" />
            <p class="allTotal">交易总笔数：0笔    交易总金额：0元</p>
          </ElTabPane>
           
          <ElTabPane label="交易对手" name="34">
            <h4>交易对手：</h4>
            <identificationTable
              :searchStatus="false" :tableColumns="counterpartyColumn"
              :dataList="counterpartyTableData" />
            <p class="allTotal">交易总笔数：0笔    交易总金额：0元</p>
          </ElTabPane>
          <ElTabPane label="资金链" name="35">
            <h4>资金流入：</h4>
            <identificationTable
              :searchStatus="true" :tableColumns="capitalInflowColumn"
              :dataList="capitalInflowTableData" :SearchSchema="capitalSechma" />
            <h4>资金流出：</h4>
            <identificationTable
              :searchStatus="false" :tableColumns="capitalOutflowColumn"
              :dataList="capitalOutflowTableData" />
          </ElTabPane>
        </ElTabs>
      </ElTabPane>
    </ElTabs>
  </ContentWrap>

</template>


<style scoped lang="scss">
.contentWrap {
    width: 100%;
    overflow: auto;
}

.buttonList {
    text-align: center;
}
</style>