<template>
  <div class="app-container">
    <van-nav-bar
      left-arrow
      fixed
      placeholder
      @click-left="$router.back(-1)"
    >
      <template #title>
        <p style="font-weight: bold;">查看交易明细信息</p>
      </template>
    </van-nav-bar>
    <div class="main_box" v-if="form">
      <van-field readonly label="流水号" v-model="form.vchnum" input-align="right" label-width="auto"/>
      <van-field readonly label="交易时间" v-model="form.txndate" input-align="right" label-width="auto"/>
      <van-field label="来往账标识">
        <template #right-icon>
          {{form.direction == '1' ? '来账/汇入':'往账/汇出'}}
        </template>
      </van-field>
      <van-field readonly label="我方账户" v-model="form.actacn" input-align="right" label-width="auto"/>
      <van-field readonly label="对方账号" v-model="form.payeeActacn" input-align="right" label-width="auto"/>
      <van-field readonly label="对方人" v-model="form.payeeToname" input-align="right" label-width="auto"/>
      <van-field readonly label="开户银行" v-model="form.payeeTobank" input-align="right" label-width="auto"/>
      <van-field readonly label="对方行号" v-model="form.payeeToibkn" input-align="right" label-width="auto"/>
      <van-field readonly label="金额" v-model="form.txnamt" input-align="right" label-width="auto"/>
      <van-field readonly label="交易后余额" v-model="form.acctbal" input-align="right" label-width="auto"/>
      <van-field readonly label="用途" v-model="form.useinfo" input-align="right" label-width="auto"/>
      <van-field readonly label="附言" v-model="form.furinfo" input-align="right" label-width="auto"/>
      <van-field readonly label="整合信息" v-model="form.interinfo" input-align="right" label-width="auto"/>
      <van-field readonly label="渠道标识" v-model="form.channelflg" input-align="right" label-width="auto"/>
      <van-field readonly label="记录标识号" v-model="form.transid" input-align="right" label-width="auto"/>
      <van-field readonly label="客户业务编号" v-model="form.insid" input-align="right" label-width="auto"/>
      <van-field readonly label="交易状态码" v-model="form.rsRspcod" input-align="right" label-width="auto"/>
      <van-field readonly label="交易状态内容" v-model="form.rsRspmsg" input-align="right" label-width="auto"/>
      <van-field readonly label="对方行业务编号" v-model="form.payeeTobref" input-align="right" label-width="auto"/>
      <van-field readonly label="被代理行号" v-model="form.mactibkn" input-align="right" label-width="auto"/>
      <van-field readonly label="被代理账号" v-model="form.mactacn" input-align="right" label-width="auto"/>
      <van-field readonly label="被代理账户名" v-model="form.mactname" input-align="right" label-width="auto"/>
      <van-field readonly label="被代理账户开户银行" v-model="form.mactbank" input-align="right" label-width="auto"/>
      <van-field readonly label="可用余额" v-model="form.avlbal" input-align="right" label-width="auto"/>
      <van-field readonly label="冻结金额" v-model="form.frzamt" input-align="right" label-width="auto"/>
      <van-field readonly label="透支额度" v-model="form.overdramt" input-align="right" label-width="auto"/>
      <van-field readonly label="可用透支额度" v-model="form.avloverdramt" input-align="right" label-width="auto"/>
      <van-field readonly label="业务类型" v-model="form.transtype" input-align="right" label-width="auto"/>
      <van-field readonly label="新业务类型" v-model="form.bustype" input-align="right" label-width="auto"/>
      <van-field readonly label="货币名称" v-model="form.trncur" input-align="right" label-width="auto"/>
      <van-field readonly label="费用账户" v-model="form.feeact" input-align="right" label-width="auto"/>
      <van-field readonly label="费用金额" v-model="form.feeamt" input-align="right" label-width="auto"/>
      <van-field readonly label="费用货币" v-model="form.feecur" input-align="right" label-width="auto"/>
      <van-field readonly label="起息日期" v-model="form.valdat" input-align="right" label-width="auto"/>
      <van-field readonly label="凭证类型" v-model="form.vouchtp" input-align="right" label-width="auto"/>
      <van-field readonly label="凭证号码" v-model="form.vouchnum" input-align="right" label-width="auto"/>
      <van-field readonly label="汇率" v-model="form.fxrate" input-align="right" label-width="auto"/>
      <van-field readonly label="商户号" v-model="form.commnum" input-align="right" label-width="auto"/>
    </div>
  </div>
</template>

<script>
import { getRecordDetail} from "@/api/onlineHome/bankAgriculture/recordDetail"; 
  export default {
    name: "paymentAccountDetail",
    data() {
      return {
        showAccountType:false,
        showSubjectId:false,

        minDate: new Date(),
        maxDate: new Date(2025, 10, 1),
        currentDate: new Date(),
        jgList:{},

        accountType:'',
        bankType:'',
        villageAccountType:'',
        taccountId:'',
        accountNo:'',
        managementControlType:'',
        centralBookId:'',
        centralSubjectId:'',
        bankAccountType:'',
        alternateField1:'',
        alternateField2:'',
        alternateField3:'',
        subjectValue:'',
        wfydlx:'',

        wfydlxDictionaries:[],
        jglxDictionaries:[],
        subjectDictionaries:[],
        typeDictionaries:[],
        subjectDeatil:[],

        form:{}
      };
    },
    created() {
      this.getDetail();
    },
    methods: {
      getDetail(){
        getRecordDetail(this.$route.query.id).then((response) => {
          this.form = response.data;
        });
      },
    },
  }
</script>

<style scoped lang="scss">
  .app-container {
    padding: 2% 0;
  }
  .main_title{
    font-size: 0.4rem;
    color: #1D6FE9;
    margin: 0.2rem 6%;
    margin-top: 0;
    position: relative;
  }
  .main_box{
    width: 96%;
    margin: 0 auto;
    border-radius: 6px;
    box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
    overflow: hidden;
    background-color: #FFF;
  }
  .submitButton{
    width: 80%;
    margin: 0 auto;
    background-color: #1D6FE9;
  }

  .addFamily{
    position: absolute;
    top: -2px;
    right: 0;
    border-radius: 50%;
  }
</style>
