<!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">
    <link rel="stylesheet" href="./css/index.css">
	<link rel="stylesheet" href="./css/risk.css">
    <style type="text/css">
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body oncontextmenu="return false" onselectstart="return false" ondragstart="return false" onbeforecopy="return false" oncopy=document.selection.empty()>
    <div id="batch-app" v-cloak>
      <risk-tip :risktip-obj="riskObj"></risk-tip>
        <!-- 批量卖出编辑页 -->
        <div v-show="editShow">
            <div class="mask"></div>
            <div class="dialog-box edit-box">
                <div class="dialog-body edit-dialog-body">
                    <div class="edit-left">
                        <div class="edit-left-top">
                            <div class="module-title">
                                <span></span>
                                <span>委托数量</span>
                            </div>
                            <div class="order-number">
                                持仓股的A股股票
                                <i class="tip-color">(除科创板外)</i>全部卖出
                            </div>
                        </div>
                        <div class="edit-left-bottom">
                            <div class="module-title">
                                <span></span>
                                <span>委托方式</span>
                            </div>
                            <div class="orderway-div">
                                <span>类型：</span>
                                <el-select v-model="orderType" placeholder="" @change="ordertypeChange">
                                    <el-option v-for="item in typeOptions" :key="item.keyvalue" :label="item.labelname" :value="item.keyvalue">
                                    </el-option>
                                </el-select>
                            </div>
                            <div class="order-way" v-if="orderType == 'market_way'">
                                <div class="orderway-div">
                                    <span>上海：</span>
                                    <el-select v-model="shOrder" placeholder="">
                                        <el-option v-for="item in shOptions" :key="item.keyvalue" :label="item.labelname" :value="item.keyvalue">
                                        </el-option>
                                    </el-select>
                                </div>
                                <div class="orderway-div">
                                    <span>深圳：</span>
                                    <el-select v-model="szOrder" placeholder="">
                                        <el-option v-for="item in szOptions" :key="item.keyvalue" :label="item.labelname" :value="item.keyvalue">
                                        </el-option>
                                    </el-select>
                                </div>
                            </div>
                            <div class="order-way" v-if="orderType == 'limit_way'">
                                <div class="orderway-div orderprice-div">
                                    <span style="margin-right: 4px;">价格：</span>
                                    <el-select v-model="tenPrice" placeholder="" class="ten-price-select" :class="{'disabled-input-text': ftime < 929}" @change="tenpriceChange" @visible-change="clickprice">
                                        <el-option v-for="item in priceOptions" :key="item.keyvalue" :label="item.labelname" :value="item.keyvalue" :disabled="ifDisabled">
                                        </el-option>
                                    </el-select>
                                    <el-select v-model="floatvalue" placeholder="" class="ten-price-select" @change="floatChange">
                                        <el-option v-for="item in floatOptions" :key="item.keyvalue" :label="item.labelname" :value="item.keyvalue">
                                        </el-option>
                                    </el-select>
                                    <div v-if="floatvalue !== 'no'">
                                        <el-input class="ratio-input" type="text" v-model="floatRatio" @input="inputRatio" @change="ratioChange"></el-input> %
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="risk-div">
                            <p>风险提示：</p>
                            <p class="risk-p">1.批量卖出不能确保全部成交，其操作风险较大，您应谨慎操作并对由此产生的风险和损失承担责任；</p>
                            <p class="risk-p">2.<span class="red-color">创业板股票无涨跌幅价格期间仅支持限价委托</span>，若选择市价委托将委托失败；</p>
                            <p class="risk-p">3.限价委托方式下，<span class="red-color">委托价格与设置委托价格档位时行情软件揭示价格可能存在差异</span>，此外<span class="red-color">委托价格不会根据设定价格档位自动刷新</span>。</p>
                        </div>
                    </div>
                    <div class="edit-right">
                        <div class="title-refresh">
                           <div>
                              <span class="icon-block"></span>
                              <span>批量卖出股票</span>
                              <span class="risk-btn" @click="riskBtn">风险揭示</span>
                           </div>
                           <div class="">
                              <span>行情刷新时间: {{refresh_time}}</span>
                              <span class="refresh-btn" @click="hqRefresh">刷新</span>
                           </div>
                        </div>
                        <div class="sellstks-table">
                            <el-table ref="sellTable" :data="stklist" :height="stkListHeight" border :row-class-name="rowClass" :cell-class-name="cellClass" :highlight-current-row="true" @selection-change="stkSelection">
                                <div slot="empty">
                                    <div v-if="nullData">
                                        <div>
                                            <img src="../../lib/common-style/images/loadingfff.gif" alt="">
                                        </div>
                                    </div>
                                    <div v-else>{{error_con}}</div>
                                </div>
                                <el-table-column fixed type="selection" :selectable='checkboxT' width="40">
                                </el-table-column>
                                <el-table-column fixed prop="stkcode" label="证券代码">
                                </el-table-column>
                                <el-table-column fixed prop="stkname" label="证券名称" width="86">
                                </el-table-column>
                                <el-table-column prop="stkavl" label="可用数量" width="100">
                                </el-table-column>
                                <el-table-column prop="orderprice" label="委托价格" v-if="orderType == 'limit_way'">
                                </el-table-column>
                                <el-table-column prop="last_price" label="最新价">
                                    <template slot-scope="scope">
                                       {{toDecimal(scope.row.last_price)}}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="proincome" label="浮动盈亏" width="140">
                                    <template slot-scope="scope">
                                       <span :class="[parseFloat(scope.row.proincome) > 0 ? 'red-color' : 'green-color']">{{scope.row.proincome}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="ykratio" label="盈亏比例(%)" width="100">
                                    <template slot-scope="scope">
                                       <span :class="[parseFloat(scope.row.ykratio) > 0 ? 'red-color' : 'green-color']">{{scope.row.ykratio}}</span>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
                <div class="dialog-footer edit-dialog-footer">
                    <div class="all-choose">
                        <el-checkbox v-model="allChecked" @change="allChoose">全选</el-checkbox>
                    </div>
                    <div>
                        <span style="margin-right: 10px;color: #666;">已选中{{choosednum}}只</span>
                        <el-button class="sure" type="primary" @click="showSelltip">{{orderType == 'market_way' ? '市价' : '限价'}}卖出</el-button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 限价委托风险提示 -->
        <div v-show="limitTipShow">
            <div class="mask selltip-mask"></div>
            <div class="dialog-box limit-box">
                <div class="dialog-top">
                    <div class="dialog-title limit-dialog-title">
                        <span>限价委托风险提示</span>
                    </div>
                    <span class="close-btn" @click="cancelLimitTip">
               <i class="el-icon-close"></i>
            </span>
                </div>
                <div class="dialog-body limit-dialog-body">
                    <p>限价委托方式存在以下风险：</p>
                    <p class="red-color">1.由于网络传输等原因可能导致行情数据延迟，您的委托价格与设置委托价格档位时行情软件揭示价格可能存在差异</p>
                    <p>（如设置委托价格为买一价，此时行情软件揭示的买一价和委托价格不一致）</p>
                    <p><span class="red-color">2.委托价格不会自动根据您设置的委托价格档位刷新</span>（如设置委托价格为买一价，系统不会根据买一价变动自动刷新委托价格）</p>
                    <p class="red-color">3.若您的委托价格档位上浮或下浮比例超出涨跌停价格范围，将导致委托失败</p>
                    <div class="agree-checkbox">
                        <el-checkbox v-model="agreeRisk">我自行承担由此可能导致的一切风险和损失</el-checkbox>
                    </div>
                </div>
                <div class="dialog-footer selltip-dialog-footer">
                    <el-button class="sure" type="primary" @click="closeLimitTip">确定</el-button>
                    <el-button class="cancel" type="primary" @click="cancelLimitTip">取消</el-button>
                </div>
            </div>
        </div>
        <!-- 是否选中提示 -->
        <div v-show="nullTipShow">
            <div class="mask selltip-mask"></div>
            <div class="dialog-box selltip-box">
                <div class="dialog-top">
                    <div class="dialog-title selltip-dialog-title">
                        <span>提示</span>
                    </div>
                    <span class="close-btn" @click="nullTipShow=false">
                  <i class="el-icon-close"></i>
               </span>
                </div>
                <div class="dialog-body selltip-dialog-body">
                    <p>{{selltipTxt}}</p>
                </div>
                <div class="dialog-footer selltip-dialog-footer">
                    <div v-if="choosedStk">
                        <el-button class="sure" type="primary" @click="sellSubmit">确定</el-button>
                        <el-button class="cancel" type="primary" @click="nullTipShow=false">取消</el-button>
                    </div>
                    <div v-else>
                        <el-button class="sure" type="primary" @click="nullTipShow=false">确定</el-button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 确认是否卖出 -->
        <div v-show="selltipShow">
            <div class="mask selltip-mask"></div>
            <div class="dialog-box confirm-box">
                <div class="dialog-top">
                    <div class="dialog-title confirm-dialog-title">
                        <span>批量卖出委托确认</span>
                    </div>
                    <span class="close-btn" @click="selltipShow=false">
                     <i class="el-icon-close"></i>
                  </span>
                </div>
                <div class="dialog-body confirm-dialog-body">
                    <p>即将以{{orderType == 'market_way' ? '市价' : '限价'}}卖出以下全部证券，请确认是否委托？</p>
                    <div class="submit-table">
                        <el-table ref="confirmTable" :data="detailArr" height="266" border :cell-class-name="confirmCellClass">
                            <el-table-column prop="" label="序号" width="50">
                                <template slot-scope="scope">
                              <span>{{scope.$index + 1}}</span>
                           </template>
                            </el-table-column>
                            <el-table-column prop="stkcode" label="证券代码">
                            </el-table-column>
                            <el-table-column prop="stkname" label="证券名称">
                            </el-table-column>
                            <el-table-column prop="" label="交易类别">
                                <template slot-scope="scope">
                              <span>普通卖出</span>
                           </template>
                            </el-table-column>
                            <el-table-column prop="orderPriceType" label="委托价格" width="140" v-if="orderType == 'market_way'">
                                <template slot-scope="scope">
                                  <span>{{scope.row.market | ordertype(scope.row.orderPriceType)}}</span>
                                 </template>
                            </el-table-column>
                            <el-table-column prop="orderprice" label="委托价格" width="120" v-if="orderType == 'limit_way'">
                            </el-table-column>
                            <el-table-column prop="stkavl" label="委托数量" width="100">
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <div class="dialog-footer confirm-dialog-footer">
                    <div class="confirm-footer-div" v-if="choosedStk">
                        <span>共{{choosednum}}只</span>
                        <div>
                            <el-button class="cancel" type="primary" @click="selltipShow=false">取消</el-button>
                            <el-button class="sure" type="primary" @click="sellSubmit">确定</el-button>
                        </div>
                    </div>
                    <div v-else>
                        <el-button class="sure" type="primary" @click="selltipShow=false">确定</el-button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 卖出后返回结果 -->
        <div v-show="resultTip">
            <div class="mask selltip-mask"></div>
            <div class="dialog-box resulttip-box">
                <div class="dialog-top">
                    <div class="dialog-title selltip-dialog-title">
                        <span>提示</span>
                    </div>
                    <span class="close-btn" @click="resultTip=false">
                  <i class="el-icon-close"></i>
               </span>
                </div>
                <div class="dialog-body resultTip-dialog-body body1" v-if="failed_num == 0">
                    <div v-if="resultOk">
                        <p>您的委托已提交</p>
                        <p>
                            成功<span>{{success_num}}</span>笔，失败<span>{{failed_num}}</span>笔
                        </p>
                    </div>
                    <div v-html="error_result_con" v-else>{{error_result_con}}</div>
                </div>
                <div class="dialog-body resultTip-dialog-body body2" v-else>
                    <div v-if="resultOk">
                        <p>您的委托已提交</p>
                        <p>
                            成功<span>{{success_num}}</span>笔，失败<span>{{failed_num}}</span>笔，请至当日委托查看详情。
                        </p>
                        <p>
                            最近一笔委托失败原因：{{orderResult.errdetail}}
                        </p>
                    </div>
                    <div v-html="error_result_con" v-else>{{error_result_con}}</div>
                </div>
                <div class="dialog-footer selltip-dialog-footer">
                    <el-button class="sure" type="primary" @click="resultTip=false">确定</el-button>
                </div>
            </div>
        </div>
    </div>
    <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>
    <script src="./js/risktip.js"></script>
</body>

</html>