<template>
  <div class="personal">
    <div class="titleBox">
        <i class="iconfont icon-gerenzhongxin ic"></i>
        <h2 >{{$t(`personal.personalCenter`)}}</h2>
    </div>
   <section class="loginInformation">
    <ul>
        <li class="one">
            <div class="title">
                <i class="iconfont icon-yonghu ic"></i>
                <span>{{$t(`personal.userName`)}}</span>
            </div>
            <span class="text">lx497681109</span>
        </li>
        <li>
            <div class="title">
                <i class="iconfont icon-youxiang ic"></i>
                <span>{{$t(`personal.mailbox`)}}</span>
            </div>
            <span class="text">497681109@qq.com</span>
        </li>
        
        <li >
            <div class="title">
                <i class="iconfont icon-shouji1 ic"></i>
                <span>{{$t(`personal.phoneNumber`)}}</span>
            </div>
            <span class="text">
                {{$t(`personal.mobilePhoneInstructions`)}}
            </span>
            <span class="addPhone" @click="handelAddPhone"> {{$t(`personal.add`)}}</span>

        </li>
        
        
    </ul>

   </section>

   <section class="loginTable">
    <h2> {{$t(`personal.loginHistory`)}}</h2>
      <ul>
        <li class="title">
            <span>{{$t(`personal.time`)}}</span>
            <span>{{$t(`personal.loginResults`)}}</span>
            <span>IP</span>
            <span>{{$t(`personal.position`)}}</span>
            <span>{{$t(`personal.equipment`)}}</span>   
        </li>
        <li>
            <span>2024-06-06 14:52</span>
            <span>Success</span>
            <span>43.228.226.14,43.228.226.14</span>
            <span>Hong Kong Hong Kong</span>
            <span>Mozilla/5.0 (Windows NT 10.0; Win64; x64)</span>   
        </li>
        <li>
            <span>2024-06-06 14:52</span>
            <span>Success</span>
            <span>43.228.226.14,43.228.226.14</span>
            <span>Hong Kong Hong Kong</span>
            <span>Mozilla/5.0 (Windows NT 10.0; Win64; x64)</span>   
        </li>
        <li>
            <span>2024-06-06 14:52</span>
            <span>Success</span>
            <span>43.228.226.14,43.228.226.14</span>
            <span>Hong Kong Hong Kong</span>
            <span>Mozilla/5.0 (Windows NT 10.0; Win64; x64)</span>   
        </li>
        <li>
            <span>2024-06-06 14:52</span>
            <span>Success</span>
            <span>43.228.226.14,43.228.226.14</span>
            <span>Hong Kong Hong Kong</span>
            <span>Mozilla/5.0 (Windows NT 10.0; Win64; x64)</span>   
        </li>
        <li>
            <span>2024-06-06 14:52</span>
            <span>Success</span>
            <span>43.228.226.14,43.228.226.14</span>
            <span>Hong Kong Hong Kong</span>
            <span>Mozilla/5.0 (Windows NT 10.0; Win64; x64)</span>   
        </li>
        <li>
            <span>2024-06-06 14:52</span>
            <span>Success</span>
            <span>43.228.226.14,43.228.226.14</span>
            <span>Hong Kong Hong Kong</span>
            <span>Mozilla/5.0 (Windows NT 10.0; Win64; x64)</span>   
        </li>

      </ul>
   </section>

   <el-dialog
    title="添加手机号码"
    :visible.sync="dialogVisible"
    width="30%"
    :before-close="handleClose">
    <span>手机号码用于修改登录密码，开启维护人员密码，添加/修改付款地址，开启双重验证。请为您的帐户添加一个手机号码，以提高帐户的安全性。</span>
    <el-form
        :model="params"
        status-icon
        class="demo-ruleForm"
      >
        <el-form-item>
          <p class="loginTitle"></p>
        </el-form-item>
        <el-form-item prop="phone">
          <el-input         
            prefix-icon="el-icon-mobile-phone"
            v-model="params.phone"
            autocomplete="off"
            placeholder="手机号码"
          ></el-input>
      
        </el-form-item>
   
        <el-form-item prop="code">
          <div class="verificationCode">
            <el-input
              type="text"
              prefix-icon="el-icon-chat-line-square"
              v-model="params.code"
              autocomplete="off"
              placeholder="短信验证码"
            ></el-input>
            <el-button class="codeBtn" :disabled="btnDisabled" @click="handelCode">{{ bthText }}</el-button>
          </div>
        </el-form-item>
  
      </el-form>
   
   
    <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">{{$t(`personal.nextStep`)}}</el-button>
    </span>
    </el-dialog>

  </div>
</template>

<script>
import IndexJs from "./index"
export default {
  mixins:[IndexJs]
}
</script>

<style lang="scss" scoped>
    .personal{
        width: 100%;
        padding: 20PX;
        height: 100%;
        .titleBox{
        display: flex;
        align-items: center;
       h2{
        color: #36246F;
       }
        }
        .ic{
            font-size: 1.8em;
          margin-right: 5PX;
          color: #36246F;
          font-weight: 600;
    }
    .loginInformation{
        width: 98%;
        border: 1PX solid rgba(0,0,0,0.1);
        height: 30%;
        ul{
            width: 100%;
            height: 100%;
            padding: 0PX 30PX;
            .one{
                border:none;
            }
            li{
                position: relative;
                list-style: none;
                width: 100%;
                height: 28%;
                display: flex;
                align-items: center;
                border-top:1PX solid rgba(0,0,0,0.1);
                .title{
                    width: 15%;
                    display: flex;
                    align-items: center;
                    font-size: 1.2em;
                    i{
                        font-size: 1em;
                    }
                }
                .text{
                    color: rgba(0,0,0,0.5);
                }
            }
            .addPhone{
                color: #429FFF;
                position: absolute;
                right: 20PX;
                top: 30PX;
                cursor: pointer;
            }
        }
    }
    .loginTable{
        width: 98%;       
        padding: 20PX 0PX;
        ul{
            width: 100%;
            height:600PX;
            padding:0PX;
            border: 1PX solid rgba(0,0,0,0.1);
            border-radius: 8PX;
            overflow: hidden;
            .title.title{
                background: #EBEEF3;
            }
            li{
                list-style: none;
                height: 13%;
              
                display: flex;
                justify-content: space-between;
                align-items: center;
                span{
                    width: calc(100% / 5);
                    text-align: center;
                }
            }

            li:nth-child(odd) {
            background-color: #F8F9F8; /* 奇数行的背景色 */
            }
            
            /* 选择偶数行的li元素，并设置背景色 */
            li:nth-child(even) {
            background-color: #FFF; /* 偶数行的背景色 */
            }
        }
    }
    }
    .verificationCode {
  display: flex;
  .codeBtn {
    font-size: 13PX;
    margin-left: 2PX;
  }
}
</style>