<!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">
  <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/index.css" v-if="isBlack">
    <link rel="stylesheet" href="./css/white.css" v-else>
    <div class="page">
      <div class="page_header">
        <span class="page_header_setting">设置交易卫士</span>
        <img src="./images/notice.png" alt="">
        <div class="page_header_status" :class="guardStatus !== '0' ? 'page_header_active' : ''">
          <span v-if="guardStatus === '0'">未开启</span>
          <span v-else>已开启</span>
        </div>
        <span class="page_header_text">开启后可通过该一户通或其对应的身份证、资金账号、股东代码在指定设备上登录富易。</span>
        <span class="page_header_log" @click="showLog">查看变更历史</span>
      </div>
      <div class="page_content">
        <div class="page_content_main">
          <div class="page_content_main_left">
            <div class="page_content_main_title">一户通</div>
            <div class="page_content_main_num">{{state.userInfo.USER_CIFACCOUNT}}</div>
            <div class="page_content_main_title">资金账号</div>            
            <div v-if="errMsg">{{errMsg}}</div>
            <div class="page_content_main_list" v-else>
              <div class="page_content_main_num page_content_main_num_left">
                <span v-for="(item,index) in accounts.slice(0,5)" :key="index">{{item.busin_account_new}}</span>
              </div>
              <div class="page_content_main_num page_content_main_num_right" v-if="accounts.length > 5">
                <span v-for="(item,index) in accounts.slice(5)" :key="index">{{item.busin_account_new}}</span>
              </div>
            </div>
          </div>
          <div class="page_content_main_right">
            <div class="page_content_main_right_title">
              <span>{{macTitle}}</span>
              <div v-if="isEdit || guardStatus === '0'">
                <span @click="addMac('self')">添加本机</span>
                <span @click="addMac('newMac')">新增一条</span>
              </div>
            </div>           
            <div class="page_content_main_right_empty" v-if="macList.length < 1 && guardStatus === '0'">
              <div>请点击添加本机或新增一条添加设备</div>
            </div>
            <div class="page_content_main_list page_content_main_padding">
              <div class="page_content_main_num page_content_main_num_left page_content_main_num_margin">
                <span class="page_content_main_num_after"  v-for="(item,index) in macList.slice(0,5)" :key="index" >
                  <i v-if="!isEdit">{{item.deviceNo}}</i>
                  <input v-model="item.deviceNo" @blur="checkMac(item)" v-else></input>
                  <span @click="deleteMac(index)" v-if="isEdit"></span>
                  <i v-if="item.deviceNo === mac"  class="mac">本机</i>
                  <div v-if="!item.isMacValid">MAC地址不合法或存在重复，请仔细检查。</div>
                </span>
              </div>
              <div class="page_content_main_num page_content_main_num_right page_content_main_num_margin" v-if="macList.length > 5">
                <span class="page_content_main_num_after" v-for="(item,index) in macList.slice(5)" :key="index" >
                  <i v-if="!isEdit">{{item.deviceNo}}</i>
                  <input v-model="item.deviceNo" @blur="checkMac(item)" v-else></input>
                  <span @click="deleteMac(index, 'second')" v-if="isEdit"></span>
                  <i v-if="item.deviceNo === mac" class="mac">本机</i>
                  <div v-if="!item.isMacValid">MAC地址不合法或存在重复，请仔细检查。</div>
                </span>
              </div>
            </div>
          </div>
        </div>
        <div class="page_content_btns">
          <span class="page_content_btns_open" v-if="guardStatus === '0'" @click="confirmMac('A')">开启</span>
          <i v-if="errorText" class="errorText">{{errorText}}</i>
          <div class="page_content_btns_manage" v-if="guardStatus !== '0' && !isEdit">
            <span @click="editMac">管理设备</span>
            <span @click="closeTransactionGuard">关闭交易卫士</span>
          </div>
          <div class="page_content_btns_confirm" v-if="isEdit && guardStatus !== '0'">
            <span @click="confirmMac('U')">确认</span>
            <span @click="resetMac">取消</span>
          </div>
        </div>
        <div class="page_content_tips">
          <div>温馨提示：</div>
          <div>1. 您最多可以指定10个设备。</div>
          <div>2. 开通交易卫士的交易账号在非指定设备上登录时，需要关闭交易卫士或者将当前设备放入指定设备列表，才能进行交易。</div>
          <div>3. 您可以随时关闭富易交易卫士。</div>
        </div>
      </div>
    </div>
    <div class="trade_guard_dialog logList" v-if="isLogShow">
      <el-dialog title="指定MAC地址变更记录" :visible.sync="isLogShow" v-if="isLogShow" center width="560px" 
      :close-on-click-modal="false"
      :before-close="handleClose">
        <el-table
          :data="logList"
          :span-method="objectSpanMethod"
          border
          :empty-text="emptyText"
          style="width: 90%; margin: 20px auto 0">
          <el-table-column
            prop="registerDateTime"
            label="变更时间"
            width="180">
          </el-table-column>
          <el-table-column
            prop="deviceNo"
            label="变更后MAC地址">
        </el-table>
        <div style="width:100%; text-align:center; color:#4A90E2">
          <el-button type="text" @click="getMore" v-if="!isFinshed">加载更多</el-button>
        </div>
      </el-dialog>
    </div>
    <div class="trade_guard_dialog">
      <el-dialog :title="dialogTitle" v-if="tradeGuardDialogVisible" :visible.sync="tradeGuardDialogVisible" center width="560px" :close-on-click-modal="false" :before-close="handleTradeGuardDialogClose">
        <div class="trade_guard_dialog_con">
          <div class="trade_guard_dialog_con_line"></div>
          <div class="trade_guard_dialog_con_step">
            <div v-for="(item, index) in stepList" :key="index">
              <div>
                  <span v-if="activeStep<=item.step" :class="activeStep==item.step ? 'active' : ''">{{item.step}}</span>
                  <img src="./images/success_icon.png" alt="" v-else>          
                <div>{{item.stepDesc}}</div>
              </div>
            </div>
          </div>
          <div class="trade_guard_dialog_con_input" v-if="activeStep == 1 && (dialogTitle===titleList[0] || dialogTitle===titleList[2])">
            <div>
              <span>手机号：</span>
              <input type="text" disabled v-model="mobileTel">
              <div>如果您更换了手机号，请至<i @click="modifyTel">网厅</i>修改</div>
            </div>
            <div>
              <span>短信验证码：</span>
              <input type="text" placeholder="请输入短信验证码" :class="isCodeVaild ? '' : 'errorInput'" class="code" v-model="authKey">
              <div class="timer">
                <span v-if="!isTimeShow" @click="getVerificationCode">获取验证码</span>
                <span v-else class="timer_color">{{num}}秒后重发</span>
              </div>
              <i v-if="!isCodeVaild" class="errMsg">验证码错误</i>
            </div>
          </div>
          <div class="trade_guard_dialog_con_input" v-if="(activeStep == 2 && (dialogTitle===titleList[0] || dialogTitle===titleList[2])) || (activeStep == 1  && dialogTitle===titleList[1])">
            <div>
              <span>资金密码：</span>
              <input type="password" placeholder="请输入对应账户的资金密码" :class="isPasswordVaild ? '' : 'errorInput'" class="code" v-model="fundPassword">
              <div class="timer">
                <span @click="resetPassword">忘记密码</span>
              </div>
              <div class="accountName">
                <span>账户：{{remark[0].firstFundid}}</span>                
              </div>
              <i class="errMsg accountMsg" v-if="!isPasswordVaild">{{fundPasswordError}}</i>
            </div>
          </div>
          <div class="trade_guard_dialog_con_input" v-if="activeStep == stepList.length">
            <div class="success">
              <img src="./images/success.png" alt="">
              <span>{{successText}}</span>
            </div>
          </div>
        </div>
        <div class="trade_guard_dialog_btn">
          <span @click="goNext">{{activeStep < stepList.length ? '下一步' : '确定'}}</span>
        </div>
      </el-dialog>
    </div>
  </div>
</body>
</html>
<script src="./js/index.js"></script>