<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>融资交易-指定合约卖券还款</title>
    <link rel="stylesheet" href="../../lib/element-ui/css/index.css">
    <link rel="stylesheet" href="../../lib/common-style/css/reset.css">
    <link rel="stylesheet" href="../../lib/common-style/css/white.css">
    <link rel="stylesheet" href="./css/index.css">
    <style type="text/css">
        [v-cloak] {
            display: none;
        }
        
        @media print {
            body,
            html,
            .right-page {
                width: 100%;
            }
            .right-table .el-table--border th.gutter:last-of-type {
                display: none !important;
            }
        }
    </style>
    <style type="text/css" media="print">
        .noprint {
            display: none;
        }
    </style>
</head>

<body oncontextmenu="return false" onselectstart="return false" ondragstart="return false" onbeforecopy="return false" oncopy=document.selection.empty()>
    <div id="app" class="app-div" v-cloak :class="configSkin == 'default' ? 'default' : 'white'">
        <div class="left-page noprint">
            <div class="title left-title">
                <div>
                    <span>指定合约卖券还款</span>
                    <i class="el-icon-info" @mouseover="explainShow = !explainShow" @mouseout="explainShow = !explainShow"></i>
                    <div class="icon-explain" v-if="explainShow">委托金额未计算佣金、规费、印花税等相关费用，建议您预留部分冗余。卖券还款所得资金按照账户息费（不局限于所指定合约）、指定合约本金、剩余合约本金的顺序偿还。
                    </div>
                </div>
                <span class="color-span" @click="repay">还款规则</span>
            </div>
            <div class="left-div">
                <div class="input-box">
                    <div class="input-div">
                        <span>还款合约</span>
                        <el-select v-model="hkhyVal" :popper-append-to-body="false" placeholder="请选择" @change="hkhyChange">
                            <el-option v-for="item in hyOptions" :key="item.keyvalue" :label="item.labelname" :value="item.keyvalue">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="input-div">
                        <span>证券代码</span>
                        <el-input v-model="stkcode" placeholder="" maxlength="6" @input="stkcodeChange"></el-input>
                    </div>
                    <span class="input-bottom stkname">{{stkname == '' ? '--' : stkname}}</span>
                    <span class="submkttype-name">{{stktype_name}}</span>
                    <div class="input-div">
                        <span>委托类型</span>
                        <el-select v-model="orderType" :popper-append-to-body="false" placeholder="" @change="ordertypeChange">
                            <el-option v-for="item in wayslist" :key="item.ctype" :label="item.cvalue" :value="item.ctype">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="input-div">
                        <span>委托价格</span>
                        <div class="minus-plus-input" :class="{'focus-border': wtpriceStyle}" v-if="zdyflag">
                            <span class="minus" @click="minusBtn('price')">
                               <i class="el-icon-minus"></i>
                            </span>
                            <el-input type="text" ref="orderpriceRef" v-model="orderpriceNUM" @input="inputInput('price')" @change="priceChange" @focus="pricefocus" @keyup.enter.native="iptEnter($event)" @blur="priceblur" class="inputTag">
                            </el-input>
                            <span class="plus" @click="plusBtn('price')">
                               <i class="el-icon-plus"></i>
                            </span>
                        </div>
                        <div class="minus-plus-input" v-if="sjflag">
                            <span class="minus">
                            <i class="el-icon-minus"></i>
                         </span>
                            <el-input type="text" v-model="orderpriceNUM" disabled></el-input>
                            <span class="plus">
                            <i class="el-icon-plus"></i>
                         </span>
                        </div>
                    </div>
                    <div class="input-div max-qty-div">
                        最大可用数量:&nbsp;{{isNaN(parseInt(max_order_qty)) ? max_order_qty : parseInt(max_order_qty)}}
                    </div>
                    <div class="input-div num-input-box">
                        <span class="field">委托数量</span>
                        <div class="minus-plus-input num-input" :class="{'focus-border': numStyle}">
                            <span class="minus" @click="minusBtn('sellnum')">
                           <i class="el-icon-minus"></i>
                        </span>
                            <el-input type="text" v-model="sellnum" @input="inputInput('sellnum')" @change="sellnumChange" @focus="numfocus" @keyup.enter.native="iptEnter($event)" class="inputTag" @blur="numblur"></el-input>
                            <span class="plus" @click="plusBtn('sellnum')">
                           <i class="el-icon-plus"></i>
                        </span>
                        </div>
                        <div class="sell-ratio">
                            <ul>
                                <li v-for="item in sellratio" :class="{ 'percent-active': percentValue == item.value }" @click="chooseSellpercent(item.value)">{{item.name}}</li>
                            </ul>
                        </div>
                    </div>
                    <div class="operate">
                        <p class="rewrite">
                            <span @click="rewrite">重填</span>
                        </p>
                        <el-button :autofocus="false" class="buttonTag" @keyup.enter.native="iptEnter($event)" :class="{'submit-style': ifSubmit}" @click="order">卖出</el-button>
                    </div>
                    <p class="p-section">需还金额:&nbsp; {{ haveMoney | numForamt}}</p>
                    <p class="p-section">委托金额:&nbsp; {{ orderMoney | numForamt}}</p>
                </div>
            </div>
        </div>
        <div class="right-page">
            <div class="title right-bar noprint">
                <div>
                    <span>两融-融资情况查询</span>
                    <span>查询结果：
                       <span v-if="loadingOk">共 [{{queryList.length > 0 ? queryList.length-1 : 0}}] 笔 记录</span>
                       <span v-else>加载中……</span>
                     </span>
                </div>
                <div>
                    <span class="color-span refresh-btn" @click="refresh">刷新</span>
                    <span class="print" data-title="打印"><img src="./img/print.png" alt="" @click="printTable"></span>
                    <span class="export" data-title="导出"><img src="./img/export.png" alt="" @click="exportTable"></span>
                </div>
            </div>
            <div class="right-table">
                <!--startprint-->
                <el-table id="query-table" ref="queryTable" class="query-table" :data="queryList" :height="queryListHeight" border :highlight-current-row="true" @cell-dblclick="tableDbClick">
                    <div slot="empty">
                        <div v-if="nullData">
                            <div>
                                <img src="../../lib/common-style/images/loading000.gif" alt="" v-if="loadingColor">
                                <img src="../../lib/common-style/images/loadingfff.gif" alt="" v-else>
                            </div>
                        </div>
                        <div v-else>{{error_con}}</div>
                    </div>
                    <el-table-column prop="sys_date" label="发生日期" width="70">
                    </el-table-column>
                    <el-table-column prop="currency" label="币种" width="50">
                        <template slot-scope="scope">
                           {{scope.row.currency | currencyFormat}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="cl_ord_no" label="委托号" width="90">
                    </el-table-column>
                    <el-table-column prop="debts_sno" label="合约编号" width="90">
                    </el-table-column>
                    <el-table-column prop="security_id" label="证券代码" width="60">
                    </el-table-column>
                    <el-table-column prop="security_symbol" label="证券名称" width="70">
                    </el-table-column>
                    <el-table-column prop="f_deal_bal" label="应付融资款金额" width="110">
                        <template slot-scope="scope">
                           {{decimalFormat(scope.row.f_deal_bal)}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="f_deal_avl" label="应付融资款的当前数" width="130">
                        <template slot-scope="scope">
                           {{decimalFormat(scope.row.f_deal_avl)}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="f_exp_cet_intr" label="融资预计利息" width="100">
                        <template slot-scope="scope">
                           {{decimalFormat(scope.row.f_exp_cet_intr)}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="profit_cost" label="浮动盈亏" width="100">
                        <template slot-scope="scope">
                           {{decimalFormat(scope.row.profit_cost)}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="prof_cost_price" label="盈亏成本">
                        <template slot-scope="scope">
                           {{decimalFormat(scope.row.prof_cost_price)}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="end_date" label="到期日期">
                    </el-table-column>
                    <el-table-column prop="sys_date" label="系统日期">
                    </el-table-column>
                    <el-table-column prop="d_stk_bal" label="当前融资数量" width="100">
                        <template slot-scope="scope">
                           {{scope.row.d_stk_bal | qtyFormat}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="credit_repay_unfrz" label="当日归还金额" width="100">
                        <template slot-scope="scope">
                           {{decimalFormat(scope.row.credit_repay_unfrz)}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="stk_repay_unfrz" label="当日归还数量" width="100">
                        <template slot-scope="scope">
                           {{scope.row.stk_repay_unfrz | qtyFormat}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="over_due_fee_unfrz" label="当日偿还逾期利息" width="120">
                        <template slot-scope="scope">
                           {{decimalFormat(scope.row.over_due_fee_unfrz)}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="all_fee_unfrz" label="当日偿还息费总额" width="120">
                        <template slot-scope="scope">
                           {{decimalFormat(scope.row.all_fee_unfrz)}}
                        </template>
                    </el-table-column>
                </el-table>
                <!--endprint-->
            </div>
        </div>
        <div v-if="repayShow">
            <div class="mask"></div>
            <div class="dialog-box repay-box">
                <div class="dialog-top">
                    <div class="dialog-title">
                        <span>还款规则</span>
                    </div>
                    <span class="close-btn" @click="repayShow=false"><i class="el-icon-close"></i></span>
                </div>
                <div class="dialog-body">
                    <iframe src="http://dl.app.gtja.com/public/fy/fyinfo/kchelprule.html" frameborder="0"></iframe>
                </div>
            </div>
        </div>
        <!-- 提示框 -->
        <div v-show="tipShow">
            <div class="mask"></div>
            <div class="dialog-box" v-dialog>
                <div class="dialog-top">
                    <div class="dialog-title">
                        <span>富易</span>
                    </div>
                    <span class="close-btn" @click="tipShow=false"><i class="el-icon-close"></i></span>
                </div>
                <div class="dialog-body">
                    <div class="info-tip">
                        <span>
                           <img src="../../lib/common-style/images/successico.png" alt="" v-if="successOrfail">
                           <img src="../../lib/common-style/images/infoico.png" alt="" v-else>
                        </span>
                        <div class="info-text" v-html="tipTxt">
                            {{tipTxt}}
                        </div>
                    </div>
                </div>
                <div class="dialog-footer">
                    <el-button class="sure" id="closeSure" type="primary" @click="closeBtn">确定</el-button>
                </div>
            </div>
        </div>
        <div v-show="confirmVisible">
            <div class="mask-box"></div>
            <div class="dialog-box confirm-box" v-dialog>
                <div class="dialog-top">
                    <div class="dialog-title">
                        <span>委托确认</span>
                    </div>
                    <span class="close-btn" @click="confirmVisible=false"><i class="el-icon-close"></i></span>
                </div>
                <div class="submit-body">
                    <h3 class="submit-body-title">【{{orderTypeFlag == 'limitPrice' ? '限价' : '市价'}}卖出】</h3>
                    <div class="submit-data" v-if="orderTypeFlag == 'limitPrice'">
                        <p class="submit-p">
                            <span>还款合约:</span>
                            <span>{{hkhyVal}}</span>
                        </p>
                        <p class="submit-p">
                            <span>证券代码:</span>
                            <span>{{stkcode}} {{stkname}}</span>
                        </p>
                        <p class="submit-p">
                            <span>委托价格:</span>
                            <span>{{orderpriceNUM}}元</span>
                        </p>
                        <p class="submit-p">
                            <span>委托数量:</span>
                            <span>{{sellnum}}股</span>
                        </p>
                        <p class="submit-p">
                            <span>委托金额:</span>
                            <span>约{{ orderMoney | numForamt}}</span>
                        </p>
                    </div>
                    <div class="submit-data" v-else>
                        <p class="submit-p">
                            <span>还款合约:</span>
                            <span>{{hkhyVal}}</span>
                        </p>
                        <p class="submit-p">
                            <span>证券代码:</span>
                            <span>{{stkcode}} {{stkname}}</span>
                        </p>
                        <p class="submit-p">
                            <span>委托方式:</span>
                            <span>{{wayslist[wayslist.findIndex(list => list.ctype == orderType)].cvalue}}</span>
                        </p>
                        <p class="submit-p">
                            <span>委托数量:</span>
                            <span>{{sellnum}}股</span>
                        </p>
                    </div>
                </div>
                <div class="dialog-footer submit-footer">
                    <el-button id="sure" class="sure" type="primary" @click="sureSubmit">确定</el-button>
                    <el-button class="cancel" type="primary" @click="confirmVisible=false">取消</el-button>
                </div>
            </div>
        </div>
    </div>
    <script src="../../lib/jquery-1.11.3.min.js"></script>
    <script src="../../lib/vue/vue.min.js"></script>
    <script src="../../lib/vue/axios.min.js"></script>
    <script src="../../lib/element-ui/js/index.js"></script>
    <script src="../../_common/service_fcfg.js"></script>
    <script src="../../_common/fy_client.js"></script>
    <script src="../../_common/service.js"></script>
    <script src="../../_common/service_exports.js"></script>
    <script src="../../_common/lts_result.js"></script>
    <script src="./js/index.js"></script>
</body>

</html>