<!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="../lib/md5.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" v-if="type === 'manage' || type === ''">
      <div>
        <div class="page_header">
          <span class="page_header_setting" v-if="type === ''">设置交易卫士</span>
          <img src="./images/notice.png" alt="" @click="goAgreementPage">
          <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">{{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. 开启交易卫士后，您将无法在君弘APP等手机软件上登录账号。</div>
            <div>4. 您可以随时关闭交易卫士。</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"
            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="变更记录">
            </el-table-column>
            <el-table-column
              prop="opSite"
              label="操作设备">
            </el-table-column>
          </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">
              <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">
              <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>账户：{{fundid}}</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>
    <!-- 关闭、修改弹窗 -->
    <div v-if="type === 'close' || type === 'trust'" class="sigle_dialog">
      <!-- 关闭、修改 -->
      <div class="trade_guard_dialog sigle_dialog" v-if="!isMacLimit">
        <!-- <div class="dialog-title">{{dialogTitle}}</div> -->
        <div class="dialog-body">
          <div class="trade_guard_dialog_con">
            <div v-if="type=='trust' && activeStep < stepList.length" class="macInfo">将MAC地址{{mac}}加入授信设备</div>
            <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">
              <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">
              <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>账户：{{fundid}}</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>        
        </div>
      </div>
      <!-- 设备超限、二次确认提示 -->
      <div v-else>
        <div class="dialog-box">
          <!-- <div class="dialog-top">
            <div class="dialog-title">
              <span>{{info.title || '富易'}}</span>
            </div>
          </div> -->
          <div>
            <div class="info-tip">
              <span>
                <img src="./images/infoico.png" alt="">
              </span>
              <div class="info-text">{{info.text}}</div>
            </div>
          </div>
          <div class="dialog-footer">
            <button class="btn sure" @click="closeDialog('yesBtn')">{{info.yesText}}</button>
            <button class="btn cancel" @click="closeDialog('noBtn')">{{info.noText}}</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
<script src="./js/index.js"></script>