<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>智能打新</title>
		<link rel="stylesheet" type="text/css" href="../../lib/element-ui/css/index.css">
		<link rel="stylesheet" type="text/css" href="./css/style.css">
	    <script src="../../lib/vue/vue.min.js"></script>
		<script src="../../lib/vue/axios.min.js"></script>
		<script src="../../lib/jquerynew.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/fql.js"></script>
	</head>
	<body>
		<div id="app" :class="configSkin=='default'? 'dark' : 'white'" v-cloak>
            <div @click="globalClick" class="zndx-content">
				<div class="left-content">
					<div class="zndx-title">
						<span>{{isCreditTitle?'两融-智能打新':'智能打新'}}</span>
						<span class="book-icon" @click="toXjxtPage"></span>
					</div>
					<div class="zndx-details">
						<div class="details-title">
							<div class="today">我的今日申购额度</div>
							<i class="tip-icon">
								<div class="hover-info">预约申购前请你确保已开通与待申购新股对应股东账户，且有申购额度（上海10000元市值=1000股，深圳5000元市值=500股，科创板最低10000元市值且5000元市值=500股</div>
							</i>
						</div>
						<div class="hsk">
							<span class="flex-item">沪<span>{{todayLines.shLines}}</span></span>
							<span class="flex-item">深<span>{{todayLines.szLines}}</span></span>
							<span class="flex-item">科<span>{{todayLines.kcbLines}}</span></span>
						</div>
						<div v-if="errorInfo" class="error-info">{{errorInfo}}</div>
						<div class="xg-message-tel">
							<span>新股消息提醒手机号<span class="notice_mobile">{{encryptedMobile}}</span></span>
							<span @click="hrefPersonalInfo" class="change-mobile-no">修改</span>
						</div>
						<div class="appoint-time">
							<span>预约申购报送时间：</span>
							<span @click.stop="selectHour" class="common-select" :class="{'hour-select': isSelectTime}">
								<span class="hour-arrow-wrapper">{{defaultHour}}
									<span @mousedown="changeArrowPosition('h')" @mouseup="resetArrowPosition('h')" class="arrow" :class="{'hour-arrow-bottom':isHourClickArrow}"></span>
								</span>
								<div v-show="isShowHourOption" class="option-wrapper">
									<div @click.stop="confirmHour(item)" v-for="item in defaultHourList" class="option-item">
										<span class="text-dis">{{item}}</span>
									</div>
								</div>
							</span>
							<span @click.stop="selectMinute" class="common-select special-common-select" :class="{'minute-select': !isSelectTime}">
								<span class="hour-arrow-wrapper">{{defaultMinute}}
									<span @mousedown="changeArrowPosition" @mouseup="resetArrowPosition" class="arrow" :class="{'min-arrow-bottom':isMinClickArrow}"></span>
								</span>
								<div v-show="isShowMinuteOption" class="option-wrapper option-minute-wrapper">
									<div @click.stop="confirmMinute(item)" v-for="item in defaultMinuteList" class="option-item">
										<span class="text-dis">{{item}}</span>
									</div>
								</div>
							</span>
						</div>
						<div class="boder-line"></div>
						<div class="list-wrapper">
							<div class="common">
								<span>预约打新风险提示</span>
								<span class="signed-text" @click="observeRiskPrompt">{{signedText}}</span>
								<span v-if="signedErrorText" class="signed-error">{{signedErrorText}}</span>
							</div>
							<div class="common">
								<span>大牛教你巧打新</span>
								<span class="signed-text" @click="observeTeach">查看</span>
							</div>
							<div class="common">
								<span>智能打新介绍</span>
								<span class="signed-text" @click="observeIntroduce">查看</span>
							</div>
						</div>
					</div>
				</div>
				<div class="right-content">
					<div class="select-btn-wrapper">
						<span @click="clickZNDX" class="btn-common" :class="{'btn-dx': isBtnStatus}">智能打新</span>
						<span class="btn-dis"></span>
						<span @click="clickYXCX" class="btn-common btn-yxcx" :class="{'btn-cx': !isBtnStatus}">预约查询</span>
						<span>请确保您的申购账号在新股申购当日有额度：沪市有额度，深市有额度且有持仓，以免废单。</span>
					</div>
					<div v-if="isBtnStatus" class="select-table-btn">
						<span @click="toggleSelection(newStockList)">全选</span>
						<span @click="reverseToggleSelection(newStockList)">反选</span>
						<!-- <span @click="batchToPurchase2">批量预约申购(S)</span> -->
						<span @click="batchToPurchase">批量预约申购(S)</span>
					</div>
					<div v-else class="select-table-btn">
						<span @click="toggleSelection2(appointQueryList)">全选</span>
						<span @click="reverseToggleSelection2(appointQueryList)">反选</span>
						<!-- <span @click="batchCancelPurchase2">批量取消预约(S)</span> -->
						<span @click="batchCancelPurchase">批量取消预约(S)</span>
					</div>
					<div @click.capture="globalTableClick" class="table-wrapper purchase-table" :class="{'show-table': isShowTable==1}">
						<el-table ref="multipleTable" @selection-change="handleSelectionChange" @header-click="clickHeader"
							:data="newStockList" :row-class-name="tableRowClassName" height="100%" :empty-text="emptyTableText"
							style="width: 100%" :cell-class-name="getCellIndex" @cell-click="clickCell" key="YYSG">
							<el-table-column label-class-name="disabledSelection" type="selection">
						  	</el-table-column>
							<el-table-column sortable sort-by="STOCK_NAME_TEXT" label="操作" :resizable="false" class-name="common-column-class">
								<template slot-scope="scope" slot="header">
									<span class="sort-arrow-wrapper">
										<span class="sort-arrow-top" :class="{'hign-lighted':sortClickCount==1}"></span>
										<span class="sort-arrow-bottom"  :class="{'hign-lighted':sortClickCount==2}"></span>
									</span>
									<span>操作</span>
								</template>
								<template slot-scope="scope">
									<div v-if="scope.row.PREBUY_STATUS == 1" @click="toPurchase(scope.row, 1)" style="text-decoration: underline;">预约申购</div>
									<div v-else style="color:#999;">不可预约</div>
								</template>
							</el-table-column>
							<el-table-column sortable prop="STOCK_NAME_TEXT" label="证券名称" :resizable="false">
								<template slot-scope="scope" slot="header">
									<span class="sort-arrow-wrapper">
										<span class="sort-arrow-top" :class="{'hign-lighted':sortClickCount==1}"></span>
										<span class="sort-arrow-bottom"  :class="{'hign-lighted':sortClickCount==2}"></span>
									</span>
									<span>证券名称</span>
								  </template>
							</el-table-column>
							<el-table-column sortable prop="STOCK_CODE" label="申购代码" :resizable="false">
								<template slot-scope="scope" slot="header">
									<span class="sort-arrow-wrapper">
										<span class="sort-arrow-top" :class="{'hign-lighted':sortClickCount==1}"></span>
										<span class="sort-arrow-bottom"  :class="{'hign-lighted':sortClickCount==2}"></span>
									</span>
									<span>申购代码</span>
								</template>
							</el-table-column>
							<el-table-column sortable prop="PURCHASE_DATE" label="发行日期" :resizable="false">
								<template slot-scope="scope" slot="header">
									<span class="sort-arrow-wrapper">
										<span class="sort-arrow-top" :class="{'hign-lighted':sortClickCount==1}"></span>
										<span class="sort-arrow-bottom"  :class="{'hign-lighted':sortClickCount==2}"></span>
									</span>
									<span>发行日期</span>
								</template>
							</el-table-column>
							<el-table-column sortable prop="ISS_PRC" label="申购价格" :resizable="false">
								<template slot-scope="scope" slot="header">
									<span class="sort-arrow-wrapper">
										<span class="sort-arrow-top" :class="{'hign-lighted':sortClickCount==1}"></span>
										<span class="sort-arrow-bottom"  :class="{'hign-lighted':sortClickCount==2}"></span>
									</span>
									<span>申购价格</span>
								</template>
							</el-table-column>
							<el-table-column sortable prop="ACCU_SUB_SHR_MAX" label="申购上限" :resizable="false">
								<template slot-scope="scope" slot="header">
									<span class="sort-arrow-wrapper">
										<span class="sort-arrow-top" :class="{'hign-lighted':sortClickCount==1}"></span>
										<span class="sort-arrow-bottom"  :class="{'hign-lighted':sortClickCount==2}"></span>
									</span>
									<span>申购上限</span>
								</template>
							</el-table-column>
							<el-table-column sortable prop="PURCHASE_NUM" label="申购委托数量" class-name="select-num common-column-class" :resizable="false">
								<template slot-scope="scope" slot="header">
									<span class="sort-arrow-wrapper">
										<span class="sort-arrow-top" :class="{'hign-lighted':sortClickCount==1}"></span>
										<span class="sort-arrow-bottom"  :class="{'hign-lighted':sortClickCount==2}"></span>
									</span>
									<span>申购委托数量</span>
								</template>
								<template slot-scope="scope">
									<div class="sort-wrapper">
										<div @mousedown="changeNum(scope.row.index, scope.column.index, 'add', $event)" @mouseup="stopCountNum($event)" class="sort-top-wrapper">
											<div class="sort-top"></div>
										</div>
										<div @mousedown="changeNum(scope.row.index, scope.column.index, '', $event)" @mouseup="stopCountNum($event)" class="sort-bottom-wrapper">
											<div class="sort-bottom"></div>
										</div>
									</div>
									<div v-if="!(rowIndex == scope.row.index && columnIndex == scope.column.index && isCanClickFlag)" class="pruchase-num-class" :class="{'pruchase-num-selected': isNumSelected}">{{scope.row.PURCHASE_NUM}}</div>
									<input v-else v-focus type="tel" @blur="blurEvent(scope.row.index)" :value="pruchaseNumVal" v-model="pruchaseNumVal"  style="width:100%;outline:none;border-style:none;background:none;">
								</template>
							</el-table-column>
							<el-table-column sortable prop="TYPE" label="类型" :resizable="false">
								<template slot-scope="scope" slot="header">
									<span class="sort-arrow-wrapper">
										<span class="sort-arrow-top" :class="{'hign-lighted':sortClickCount==1}"></span>
										<span class="sort-arrow-bottom"  :class="{'hign-lighted':sortClickCount==2}"></span>
									</span>
									<span>类型</span>
								</template>
							</el-table-column>
							<el-table-column sortable label="新股详情" :resizable="false" class-name="common-column-class">
								<template slot-scope="scope" slot="header">
									<span class="sort-arrow-wrapper">
										<span class="sort-arrow-top" :class="{'hign-lighted':sortClickCount==1}"></span>
										<span class="sort-arrow-bottom"  :class="{'hign-lighted':sortClickCount==2}"></span>
									</span>
									<span>新股详情</span>
								</template>
								<template slot-scope="scope">
									<div @click="observeNewStock(scope.row.STOCK_CODE)" style="text-decoration: underline;">查看</div>
								</template>
							</el-table-column>
							<el-table-column sortable prop="NOTE_TEXT" label="备注" :resizable="false">
								<template slot-scope="scope" slot="header">
									<span class="sort-arrow-wrapper">
										<span class="sort-arrow-top" :class="{'hign-lighted':sortClickCount==1}"></span>
										<span class="sort-arrow-bottom"  :class="{'hign-lighted':sortClickCount==2}"></span>
									</span>
									<span>备注</span>
								</template>
							</el-table-column>
						</el-table>
					</div>
					<div class="table-wrapper cancel-table" :class="{'show-table': isShowTable==2}">
						<el-table ref="multipleTableYYCX" @selection-change="handleSelectionChangeYYCX" @header-click="clickYYCXHeader"
							:data="appointQueryList" :row-class-name="tableRowClassName" height="100%" :empty-text="emptyYYCXTableText"
							style="width: 100%;" :cell-class-name="getCellIndexYYDX" @cell-click="clickCell" key="YYCX">
							<el-table-column label-class-name="disabledSelection" type="selection">
						  	</el-table-column>
							<el-table-column sortable label="操作" :resizable="false" class-name="common-column-class">
								<template slot-scope="scope" slot="header">
									<span class="sort-arrow-wrapper">
										<span class="sort-arrow-top" :class="{'hign-lighted':sortYYCXClickCount==1}"></span>
										<span class="sort-arrow-bottom"  :class="{'hign-lighted':sortYYCXClickCount==2}"></span>
									</span>
									<span>操作</span>
								</template>
								<template slot-scope="scope">
									<div @click="cancelPurchase(scope.row, 1)" style="text-decoration: underline;">{{judgeOperation(scope.row.PRE_STATUS)}}</div>
								</template>
							</el-table-column>
							<el-table-column sortable prop="PRE_STATUS" label="状态" :resizable="false">
								<template slot-scope="scope" slot="header">
									<span class="sort-arrow-wrapper">
										<span class="sort-arrow-top" :class="{'hign-lighted':sortYYCXClickCount==1}"></span>
										<span class="sort-arrow-bottom"  :class="{'hign-lighted':sortYYCXClickCount==2}"></span>
									</span>
									<span>状态</span>
								</template>
								<template slot-scope="scope">
									<div :style="judgeStatus(scope.row.PRE_STATUS, true)">{{judgeStatus(scope.row.PRE_STATUS)}}</div>
								</template>
							</el-table-column>
							<el-table-column sortable prop="STOCK_NAME" label="证券名称" :resizable="false">
								<template slot-scope="scope" slot="header">
									<span class="sort-arrow-wrapper">
										<span class="sort-arrow-top" :class="{'hign-lighted':sortYYCXClickCount==1}"></span>
										<span class="sort-arrow-bottom"  :class="{'hign-lighted':sortYYCXClickCount==2}"></span>
									</span>
									<span>证券名称</span>
								</template>
							</el-table-column>
							<el-table-column sortable prop="STOCK_CODE" label="申购代码" :resizable="false">
								<template slot-scope="scope" slot="header">
									<span class="sort-arrow-wrapper">
										<span class="sort-arrow-top" :class="{'hign-lighted':sortYYCXClickCount==1}"></span>
										<span class="sort-arrow-bottom"  :class="{'hign-lighted':sortYYCXClickCount==2}"></span>
									</span>
									<span>申购代码</span>
								</template>
							</el-table-column>
							<el-table-column sortable prop="PREBUY_DATE" label="发行日期" :resizable="false">
								<template slot-scope="scope" slot="header">
									<span class="sort-arrow-wrapper">
										<span class="sort-arrow-top" :class="{'hign-lighted':sortYYCXClickCount==1}"></span>
										<span class="sort-arrow-bottom"  :class="{'hign-lighted':sortYYCXClickCount==2}"></span>
									</span>
									<span>发行日期</span>
								</template>
							</el-table-column>
							<el-table-column sortable prop="STOCK_PRICE" label="发行价格" :resizable="false">
								<template slot-scope="scope" slot="header">
									<span class="sort-arrow-wrapper">
										<span class="sort-arrow-top" :class="{'hign-lighted':sortYYCXClickCount==1}"></span>
										<span class="sort-arrow-bottom"  :class="{'hign-lighted':sortYYCXClickCount==2}"></span>
									</span>
									<span>发行价格</span>
								</template>
								<template slot-scope="scope">{{scope.row.STOCK_PRICE | fixed}}</template>
							</el-table-column>
							<el-table-column sortable prop="PREBUY_QTY" label="申购委托数量" class-name="common-column-class" :resizable="false">
								<template slot-scope="scope" slot="header">
									<span class="sort-arrow-wrapper">
										<span class="sort-arrow-top" :class="{'hign-lighted':sortYYCXClickCount==1}"></span>
										<span class="sort-arrow-bottom"  :class="{'hign-lighted':sortYYCXClickCount==2}"></span>
									</span>
									<span>申购委托数量</span>
								</template>
								<template slot-scope="scope">
									<div>{{scope.row.PREBUY_QTY == '0'?'满额': scope.row.PREBUY_QTY}}</div>
								</template>
							</el-table-column>
							<el-table-column sortable prop="TIME_PERIOD" label="预约报送时间" :resizable="false">
								<template slot-scope="scope" slot="header">
									<span class="sort-arrow-wrapper">
										<span class="sort-arrow-top" :class="{'hign-lighted':sortYYCXClickCount==1}"></span>
										<span class="sort-arrow-bottom"  :class="{'hign-lighted':sortYYCXClickCount==2}"></span>
									</span>
									<span>预约报送时间</span>
								</template>
							</el-table-column>
							<el-table-column sortable prop="CUACCT_CODE" label="资金账号" :resizable="false" class-name="">
								<template slot-scope="scope" slot="header">
									<span class="sort-arrow-wrapper">
										<span class="sort-arrow-top" :class="{'hign-lighted':sortYYCXClickCount==1}"></span>
										<span class="sort-arrow-bottom"  :class="{'hign-lighted':sortYYCXClickCount==2}"></span>
									</span>
									<span>资金账号</span>
								</template>
							</el-table-column>
							<el-table-column sortable prop="TRDACCT" label="股东账号" :resizable="false" class-name="">
								<template slot-scope="scope" slot="header">
									<span class="sort-arrow-wrapper">
										<span class="sort-arrow-top" :class="{'hign-lighted':sortYYCXClickCount==1}"></span>
										<span class="sort-arrow-bottom"  :class="{'hign-lighted':sortYYCXClickCount==2}"></span>
									</span>
									<span>股东账号</span>
								</template>
							</el-table-column>
							<el-table-column sortable prop="REMARK" label="备注" :resizable="false">
								<template slot-scope="scope" slot="header">
									<span class="sort-arrow-wrapper">
										<span class="sort-arrow-top" :class="{'hign-lighted':sortYYCXClickCount==1}"></span>
										<span class="sort-arrow-bottom"  :class="{'hign-lighted':sortYYCXClickCount==2}"></span>
									</span>
									<span>备注</span>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</div>
			</div>
			<div v-if="isShowTipDialog" id="signed-dialog-wrapper">
				<div class="signed-dialog" ref="tipDialog">
					<div @mousedown="moveTipDialog" class="dialog-title">
						<div class="title">{{tipDialogInfo.title?tipDialogInfo.title:'富易'}}</div>
						<div @click="closeDialog" class="close-btn">×</div>
					</div>
					<div class="dialog-content">
						<div v-if="tipDialogInfo.contentTitle" class="content-title">{{tipDialogInfo.contentTitle}}</div>
						<div class="tip-content-wrapper">
							<div v-if="tipDialogInfo.needTipIcon" class="tip-icon"></div>
							<div v-html="tipDialogInfo.content" class="content-text" :class="{'content-title-class': tipDialogInfo.contentHeight}">
						</div>
						</div>
						<div v-if="tipDialogInfo.doubleBtn" class="dialog-btn">
							<div @click="confirm()" class="common-btn confirm-btn"  :class="{'clear-btn-class':tipDialogInfo.rightBtnText}">确定</div>
							<div @click="cancel" class="common-btn cancel-btn">{{tipDialogInfo.rightBtnText?tipDialogInfo.rightBtnText:'取消'}}</div>
						</div>
						<div v-else class="dialog-btn">
							<div @click="confirm" class="common-btn confirm-btn">确定</div>
						</div>
					</div>
				</div>
			</div>
			<div v-if="isShowConfirmDialog" id="confirm-dialog-wrapper">
				<div class="confirm-dialog" ref="confirmDialog">
					<div @mousedown="moveComfirmDialog" class="dialog-title">
						<div class="title">{{confirmDialogInfo.title?confirmDialogInfo.title:'富易'}}</div>
						<div @click="closeComfirmDialog" class="close-btn">×</div>
					</div>
					<div class="dialog-content" :class="{'text-center': confirmDialogInfo.needCenter}">
						<div class="content-title">{{confirmDialogInfo.contentTitle}}</div>
						<div v-if="confirmDialogInfo.needContent" class="stock-wrapper">
							<div v-for="(item,index) in confirmDialogInfo.stockInfo" class="stock-detail">
								<div v-if="confirmDialogInfo.stockInfo.length == 1 && confirmDialogInfo.status == 'singleSelectInTable'" class="item-stock">{{item | filterStock}}</div>
								<div v-else class="item-stock">{{index+1}}、{{item | filterStock}}</div>
							</div>
						</div>
						<div v-else class="stock-wrapper">
							<div v-for="(item,index) in confirmDialogInfo.stockInfo" class="stock-detail">
								<div v-if="confirmDialogInfo.stockInfo.length == 1 && confirmDialogInfo.status == 'singleSelectInTable'" class="item-stock">{{item | filterCancelStock}}</div>
								<div v-else class="item-stock">{{index+1}}、{{item | filterCancelStock}}</div>
							</div>
						</div>
						<div v-if="confirmDialogInfo.needContent" class="content-time">预约报送时间: {{defaultHour}}{{defaultMinute}}</div>
						<span v-if="confirmDialogInfo.needContent" class="normal-tip">小提示：打新存在破发亏损风险，请审慎参与，并确保您的普通账号在新股申购当日沪市账户有额度，深市账户有额度且有持仓，以免造成废单。申购中签后，为保证缴款顺利，缴款日日初将冻结您账户中本次中签应缴的相应金额，日终结算时您账户中的可用资金将被用于中签缴款。</span>
						<div v-if="confirmDialogInfo.needContent && confirmDialogInfo.showTipZCZ && confirmDialogInfo.showTipKCB" class="risk-tip">您申购的新股包含注册制创业板和科创板标的，请注意投资风险</div>
						<div v-if="confirmDialogInfo.needContent && confirmDialogInfo.showTipZCZ && !confirmDialogInfo.showTipKCB" class="risk-tip">您申购的新股包含注册制创业板标的，请注意投资风险</div>
						<div v-if="confirmDialogInfo.needContent && confirmDialogInfo.showTipKCB && !confirmDialogInfo.showTipZCZ" class="risk-tip">您申购的新股包含科创板标的，请注意投资风险</div>
						<div class="dialog-btn">
							<div @click="confirmComfirmDialog()" class="common-btn confirm-btn">确定</div>
							<div @click="cancelComfirmDialog" class="common-btn">取消</div>
						</div>
					</div>
				</div>
			</div>
		</div>
        <script>
			regLTS('ltscmd', '7301742', '新股申购额度查询');
			reg('t2', '10201078', '客户推送号码查询');
			reg('uc', '12000040', '合同协议签署查询');
			reg('uc', '12002002', '新股预约查询');
			regw('uc_news_service', 'W12005006', '新股发行');
			regw('uc_stock_service', 'W12002001', '新股预约管理');
        </script>
        <script src="./js/index.js"></script>
	</body>
</html>