<template>
<c-row>
    <!-- ==================== 参考号、摘要 ==================== -->
    <c-col :span="24">
    <div>
        <c-col :span="24">
            <c-col :span="8"> 
                <el-form-item label="父交易参考号" prop="trdgrp.rec.pntref">
                    <c-input
                        v-model="model.trdgrp.rec.pntref"
                        maxlength="16" 
                        style="width:100%"
                        placeholder="" 
                        disabled
                    ></c-input>
                </el-form-item>
            </c-col>    
            <c-col :span="4">
                <el-form-item label="" label-width="10px">
                    <c-button
                        type="primary;width:10%;" 
                        size="small"
                        @click="onSeainf"
                    ><label style="font-size:12px;">i</label></c-button>
                </el-form-item> 
            </c-col>    
            <c-col :span="12">
                <el-form-item label="父交易摘要" prop="trdgrp.rec.pntnam">
                    <c-input 
                        v-model="model.trdgrp.rec.pntnam" 
                        style="width:100%" 
                        maxlength="40" 
                        placeholder=""
                        disabled
                    ></c-input>
                </el-form-item>
            </c-col>
        </c-col>

        <c-col :span="24">
            <c-col :span="8">
                <el-form-item label="融资参考号" prop="trdgrp.rec.ownref">
                    <c-input
                        v-model="model.trdgrp.rec.ownref"  
                        maxlength="20" 
                        style="width:100%"
                        placeholder=""
                        disabled
                    ></c-input>
                </el-form-item>
            </c-col>
            <c-col :span="4">
                <el-form-item label="" label-width="10px">
                    <c-button
                        type="primary;width:10%" 
                        size="small" 
                        @click="onSeainf"
                    >i</c-button>
                </el-form-item>
            </c-col>
            <c-col :span="12">
                <el-form-item label="摘要" prop="trdgrp.rec.nam">
                    <c-input
                        v-model="model.trdgrp.rec.nam" 
                        style="width:100%" 
                        maxlength="40" 
                        placeholder="" 
                        disabled 
                    ></c-input>
                </el-form-item>
            </c-col>
        </c-col>
    </div>
    </c-col>

    <!-- ==================== 分割线 ==================== -->
    <c-col :span="24">
        <el-form-item label-width="0px">
            <el-divider />
        </el-form-item>
    </c-col>

    <!-- ==================== 融资简要信息 ==================== -->
    <c-col :span="12">
        <c-col :span="24">
            <c-col :span="10">
                <el-form-item label="融资比例" prop="trdgrp.rec.pctfin">
                    <c-input
                        v-model="model.trdgrp.rec.pctfin" 
                        maxlength="5" 
                        style="width:60px"
                        disabled
                    ></c-input>
                </el-form-item>
            </c-col>
            <c-col :span="14">
                <el-form-item label="%" label-width="15px"></el-form-item>
            </c-col>
        </c-col>

        <c-col :span="24">
            <c-amtpanl
                :model="model"
                :span="24"
                :message="{
                    title: '融资金额',
                    cur: 'trdgrp.cbs.max.cur',
                    amt: 'trdgrp.cbs.max.amt',
                }"
            ></c-amtpanl>
            <!--
            <c-col :span="11">
                <el-form-item label="融资金额" prop="trdgrp.cbs.max.cur">
                    <c-select
                        v-model="model.trdgrp.cbs.max.cur"  
                        maxlength="3" 
                        disabled
                        style="width:80px"
                    ></c-select>
                </el-form-item>
            </c-col> 
            <c-col :span="13">
                <el-form-item label="" label-width="10px" prop="trdgrp.cbs.max.amt">
                    <c-input
                        v-model="model.trdgrp.cbs.max.amt"
                        maxlength="16" 
                        style="width:180px"
                        disabled
                    ></c-input>
                </el-form-item>
            </c-col>
            -->    
        </c-col>

        <c-col :span="24">
            <c-amtpanl
                :model="model"
                :span="24"
                :message="{
                    title: '融资余额',
                    cur: 'trdgrp.cbs.opn1.cur',
                    amt: 'trdgrp.cbs.opn1.amt',
                }"
            ></c-amtpanl>
            <!--
            <c-col :span="11">
                <el-form-item label="融资余额" prop="trdgrp.cbs.opn1.cur">
                    <c-select
                        v-model="model.trdgrp.cbs.opn1.cur"  
                        maxlength="3"
                        disabled
                        style="width:80px" 
                    ></c-select>
                </el-form-item>
            </c-col>         
            <c-col :span="13">
                <el-form-item label="" label-width="10px" prop="trdgrp.cbs.opn1.amt">
                    <c-input
                        v-model="model.trdgrp.cbs.opn1.amt"
                        maxlength="16"
                        style="width:180px"
                        disabled
                    ></c-input>
                </el-form-item>
            </c-col>
            -->
        </c-col>

        <c-col :span="24">
            <c-col :span="12">
                <el-form-item label="起息日" prop="trdgrp.rec.stttendat">
                    <c-date-picker
                        v-model="model.trdgrp.rec.stttendat"
                        style="width:100%"
                        type="date"
                        disabled
                    ></c-date-picker>
                </el-form-item>
            </c-col>
            <c-col :span="12">
                <el-form-item label="到期日" prop="trdgrp.rec.matdat" >
                    <c-date-picker
                        v-model="model.trdgrp.rec.matdat" 
                        type="date" 
                        style="width:100%" 
                        disabled
                    ></c-date-picker>
                </el-form-item>
            </c-col> 
        </c-col>
    </c-col>


    <c-col :offset="3" :span="9">
        <c-col :span="24">
            <c-col :span="8">
                <el-form-item label="融资客户" >
                </el-form-item>
            </c-col>
            <c-col :span="16">
                <el-form-item label="参考号" label-width="50px" prop="trdgrp.fip.pts.ref">
                    <c-input
                        v-model="model.trdgrp.fip.pts.ref" 
                        maxlength="16"
                        placeholder=""
                        disabled
                    ></c-input>
                </el-form-item>
            </c-col>
        </c-col>
        <c-col :span="24">
            <!--融资客户名 -->
            <el-form-item label="" label-width="0px" prop="trdgrp.fip.pts.nam">
                <c-input
                    v-model="model.trdgrp.fip.pts.nam" 
                    maxlength="40" 
                    placeholder=""
                    disabled
                    style="width:100%" 
                ></c-input>
            </el-form-item>
        </c-col>

        <c-col :span="24">
            <el-form-item label="融资品种" prop="trdgrp.rec.fintyp">
                <c-input
                    v-model="model.trdgrp.rec.fintyp" 
                    maxlength="3" 
                    placeholder=""
                    disabled
                    style="width:100%" 
                ></c-input>
            </el-form-item>
        </c-col>

        <c-col :span="24">
            <el-form-item label="融资账号" prop="trdgrp.rec.finact"> 
                <c-input
                    v-model="model.trdgrp.rec.finact" 
                    maxlength="21" 
                    placeholder="" 
                    disabled
                    style="width:100%" 
                ></c-input>
            </el-form-item>
        </c-col>
    </c-col>
</c-row>
</template>

<script>
import Amtpanl from "~/views/Public/Amtpanl";

export default {
    components:{
        "c-amtpanl": Amtpanl,
    },

    props:["model","codes"],

    methods:{
        calcWidth () {
            let length = this.$refs.maxlength * 10 + 100
            let width = str(length) + "px"
            return width
        },
    },
}
</script>

<style>
#trtp0_ref{
    width: 100%;
    height: 100%;
    border: 1px solid gray;
    padding: 5px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#trtp0_finInfo{
    width:100%;
    height:100%;
    padding-top:10px;
    padding-bottom:10px;
    display:flex;
    flex-wrap:nowrap;
}


.disabledInput{
    width: self.$refs.maxlength * 10 + 100
}

.mLabel{
    border: 1px;
}

.Input{
    padding: 2px 2px;
}
</style>