<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../../lib/common-style/css/reset.css">
  <link rel="stylesheet" href="../../lib/element-ui/css/index.css">
  <link rel="stylesheet" href="./css/dialog.css">
  <script src="../../lib/vue/vue.min.js"></script>
  <script src="../../lib/element-ui/js/index.js"></script>
  <script src="../../lib/vue/axios.min.js"></script>
  <script src="../../lib/jquery-1.11.3.min.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>
  <script src="./js/dataFile.js"></script>

  <title>权证行权</title>
</head>
<body>
  <div id="app">
    <link rel="stylesheet" href="./css/default.css" v-if="isDefault">
    <link rel="stylesheet" href="./css/white.css" v-else>
    <div class="warrant-exercise-form">
      <div class="warrant-exercise-form-title">权证行权</div>
      <div class="warrant-exercise-form-content">
        <el-form ref="form" :model="formData" label-width="80px">
          <el-form-item label="股东代码">
            <el-select v-model="formData.secuid">
              <el-option v-for="(item, index) in formData.secuidList" :key="index" :label="item.secuid" :value="item.secuid"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="行权代码">
            <el-input v-model="formData.stkcode" @input="validateInput('stkcode')" maxlength="6"  ref="stkcodeInput" @change="getStkInfo"  @keyup.enter.native="nextFocus($event, 'stkcodeInput')"></el-input>
          </el-form-item>
          <el-form-item label="证券名称" class="stkname-form-item">
            <span>{{formData.stkname}}</span>
          </el-form-item>
          <el-form-item label="行权价格">
            <el-input v-model="formData.price" @change="changePrice" @input="validateInput('price')" ref="priceInput" @keyup.enter.native="nextFocus($event, 'priceInput')"></el-input>
          </el-form-item>
          <el-form-item class="qty-form-item">
            <span>可用数量：{{ableQty}}</span>
          </el-form-item>
          <el-form-item label="行权数量">
            <el-input v-model="formData.qty" @input="validateInput('qty')" ref="qtyInput" @keyup.enter.native="nextFocus($event, 'qtyInput')"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="submit-btn" @click="showConfirmDialog">申报</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>    
    <div class="confirm-dialog" v-if="isConfirmDialogShow">
      <el-dialog title="权证行权确认" :visible.sync="isConfirmDialogShow" v-if="isConfirmDialogShow" width="310px" 
      :close-on-click-modal="false"
      :before-close="handleClose">
        <div>
          <div class="submit-confirm">确认提交以下委托？</div>
          <div class="submit-title">【权证行权】</div>
          <div class="submit-data">
            <p class="submit-p">
              <span>行权代码：</span>
              <span>{{formData.stkcode}}</span>
            </p>
            <p class="submit-p">
              <span>证券名称：</span>
              <span>{{formData.stkname}}</span>
            </p>
            <p class="submit-p">
              <span>行权价格：</span>
              <span>{{formData.price}}</span>
            </p>
            <p class="submit-p">
              <span>行权数量：</span>
              <span>{{formData.qty}}</span>
            </p>
            <div class="submit-footer">
              <el-button class="sure" type="primary" @click="confirm">确定</el-button>
              <el-button class="cancel" type="primary" @click="handleClose">取消</el-button>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
    <div v-show="isTipShow">
      <div class="mask"></div>
      <div class="dialog-box" v-dialog>
          <div class="dialog-top">
              <div class="dialog-title">
                  <span>{{tipTitle}}</span>
              </div>
              <span class="close-btn" @click="closeDialog"><i class="el-icon-close"></i></span>
          </div>
          <div class="dialog-body">
              <div class="info-tip">
                  <span>
                     <img src="./img/infoico.png" alt=""  v-if="isImgShow">
                  </span>
                  <div class="info-text" :class="!isImgShow?'txt-padding':''" v-html="tipTxt">
                      {{tipTxt}}
                  </div>
              </div>
          </div>
          <div class="dialog-footer">
              <el-button class="sure" id="closeSure" type="primary" @click="closeDialog">确定</el-button>
          </div>
      </div>
    </div>
  </div>
  
</body>
</html>

<script src="./js/index.js"></script>