<template>
  <div v-loading="personalLoading" class="main">
    <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">{{
        $t("login.home")
      }}</el-breadcrumb-item>
      <el-breadcrumb-item>{{ $t("login.personal") }}</el-breadcrumb-item>
    </el-breadcrumb> -->

    <!-- 标签页 -->
    <el-row class="tabPage">
      <span class="unread" v-if="unreadNum> 0"  >{{ unreadNum }}</span>
      <span class="unread1" v-if="privateTicket1.length> 0">{{ privateTicket1.length }}</span>
      <el-tabs v-model="activeName" @tab-click="handleClick" style="width:100%">
        <!-- 个人中心资料 -->
        <el-tab-pane  :label="$t(`login.personal`)" class="Individual" name="first1">
          <div style="width:100%;">
          <div class="title">
            {{ $t(`home.PersonalInformation`) }}
            <!-- 修改密码 -->
            <span class="setPersonal" @click="handelPassword"
                  >{{$t(`login.changePassword`)  }}</span
                >
            <!-- 设置 -->
            <!-- <span class="setPersonal" @click="handelSetPersonal">{{
              $t(title)
            }}</span> -->
          </div>
          <el-row>
            <div style="display: flex;">
              <!-- 当前账户等级： -->
              <div class="currentLevel"> <span>{{ $t(`pay.AccountLevel_1`) }}:</span> <span>{{ `${role.level} ${roleName}`}} </span></div>
                <!-- 到期时间 -->
              <div v-if="role.levelExpireDate" class="currentLevel"> <span>{{ $t(`pay.expirationTime`) }}:</span> <span>{{ role.levelExpireDate}} </span></div>
            </div>
            <!-- 个人信息 -->
            <el-row>
              <div style="padding-left: 20px;height: 30px;font-size: 15px;font-weight: 600;margin-top: 10px;"><span >{{$t(`login.registeredName`)}}</span>: <span style="text-transform: none">{{ personalList.userName }}</span></div>
              <div style="padding-left: 20px;font-weight: 600;font-size: 16px;"><span>{{$t(`login.email`)}}</span>: <span style="text-transform: none">{{ personalList.email }}</span></div>
            </el-row>
            <!-- 升级账户      -->
            <el-row>
             
              <ul class="accountList">
                <li
                  class="accountItem"
                  v-for="item in accountLevelList"
                  :key="item.label"
                >
                  <span
                    > <span class="accountTitle">{{$t(`login.AccountLevel`)}}:</span> <span class="grade">{{$t(item.label)  }}</span></span
                  >
                  <span
                    > <span class="expenseTitle">{{$t(`login.expense`)}}: </span><span class="expense">{{ item.charges }}</span></span
                  >
                  <button :class="{modify:item.value >= bthDisabled,modify2:item.value < bthDisabled}"  :disabled="item.value < bthDisabled " @click="handelUpgrade(item)">{{item.value==bthDisabled?$t(`pay.renew`):$t(`login.accountUpgrade`)}}</button>
                </li>
              </ul>
            </el-row>
            <!-- 个人中心资料 -->
            <el-form class="registeredForm" :model="personalList">
               <!-- 余额-->
            
               <el-form-item>
                <hr style="margin-top: 20px;">
                <div style="width: 100%;font-weight: 600;font-size: 15px;">{{ $t("home.balance") }} :</div> 
              
                <div class="balanceBox">               
                <p> <span>USDC </span> <span>{{ balances.usdc || 0}}</span> </p>
                <p> <span>USDT </span> <span>{{ balances.usdt || 0}}</span> </p>
                <p> <span>BUSD </span> <span>{{ balances.busd || 0}}</span> </p>
                <p> <span>{{ $t(`home.totalAmount`) }} </span> <span>{{ balances.total || 0}}</span></p>
              </div>
                <!-- :autosize="{ minRows: 10, maxRows: 10}" -->
                <!-- <el-input
                  disabled
                  style="width: 60%"
                  v-model="personalList.loginCount"
                ></el-input> -->
              </el-form-item>
              <!-- 提现 -->
              <el-button size="small" type="warning" style="padding: 8px 35px;font-family: sans-serif;font-size: 13px;" @click="jumpRecharge(`/Withdrawal`)">{{ $t(`pay.Withdrawal1`) }}</el-button>
              <!-- 充值 -->
              <!-- <el-button size="small" type="warning" style="padding: 8px 35px;font-family: sans-serif;font-size: 13px;" @click="jumpRecharge(`/Recharge`)">{{ $t(`pay.Recharge1`) }}</el-button> -->
              <!-- 提现记录 -->
              <!-- <el-button size="small" type="warning" style="padding: 8px 35px;" @click="jumpRecharge(`/withdrawalRecords`)">{{ $t(`pay.withdrawalRecords`) }}</el-button> -->

              <!-- 用户名 -->
              <!-- <el-form-item>
                <div style="width: 100%; ;">{{ $t("login.registeredName") }}:</div>
                <el-input
                  v-model="personalList.userName"
                  size="small"
                  autocomplete="off"
                  style="width: 60%"
                  disabled
                ></el-input>
              
              </el-form-item> -->
              <!-- 邮箱-->
              <!-- <el-form-item>
                <div style="width: 100%">{{ $t("login.email") }}:</div>
                <el-input
                  disabled
                  v-model="personalList.email"
                  size="small"
                  autocomplete="off"
                  style="width: 60%"
                  :placeholder="$t(`login.placeholderTitle`)"
                ></el-input> -->
                <!-- <span
                  class="modify"
                  v-show="modifyShow"
                  @click="handelModifyEmail"
                  >修改邮箱</span
                > -->
              <!-- </el-form-item> -->
              <!-- <hr style="margin-top: 20px;"> -->

              <!-- 账号等级-->
              <!-- <el-form-item class="accountUpgrade">
                <div style="width: 100%">{{$t(`login.AccountLevel`)}}:</div>
                <el-input
                  disabled
                  v-model="roleName"
                  size="small"
                  autocomplete="off"
                  style="width: 60%"
                  :placeholder="$t(`login.placeholderTitle`)"
                ></el-input>
                <p class="gradeTime">
                  <span>剩余时间:10天</span>
                  <span class="start">开始时间：2022-12-02</span>
                </p>
              </el-form-item> -->
              <!--性别-->
              <!-- <el-form-item>
                <div style="width: 100%">{{ $t("home.loginDate") }}:</div>
                <el-input
                  disabled
                  v-model="personalList.loginDate"
                  size="small"
                  autocomplete="off"
                  style="width: 60%"
                  :placeholder="$t(`login.placeholderTitle`)"
                ></el-input>
              </el-form-item> -->
              <!-- 最近登录Ip-->
              <!-- <el-form-item>
                <div style="width: 100%">{{ $t("home.loginIp") }}:</div>
                <el-input
                  disabled
                  style="width: 60%"
                  v-model="personalList.loginIp"
                ></el-input>
              </el-form-item> -->
              <!-- 登录次数-->
              <!-- <el-form-item>
                <div style="width: 100%">{{ $t("home.loginCount") }}:</div>
                <el-input
                  disabled
                  style="width: 60%"
                  v-model="personalList.loginCount"
                ></el-input>
              </el-form-item> -->
               
            </el-form>
          </el-row>
          <!-- 提现金额弹窗 -->
            <el-dialog
              title="提示"
              :visible.sync="dialogVisible"
              width="30%">                
              <el-form class="registeredForm" :model="WithdrawalList">         
                  <!-- 提现金额 -->
                  <el-form-item>
                    <div style="width: 100%">{{$t(`pay.Withdrawal`)}} :</div>
                    <el-input
                      v-model="WithdrawalList.amount"
                      size="small"
                      autocomplete="off"
                      style="width: 36%"
                      
                    ></el-input>
                  </el-form-item>
                  <!-- 支付币种 -->
                  <el-form-item>
                    <div style="width: 100%">{{$t(`pay.currency`)}}  :</div>
                    <el-select v-model="value" :placeholder="$t(`home.abbr`)">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>  
                    <!-- 邮箱-->
              <el-form-item>
                <div style="width: 100%">{{ $t("login.email") }}:</div>
                <el-input
                  disabled
                  v-model="personalList.email"
                  size="small"
                  autocomplete="off"
                  style="width: 60%"
                  :placeholder="$t(`login.placeholderTitle`)"
                ></el-input>               
              </el-form-item>
                <!-- 验证码 -->
               <el-form-item class="authCode">
                  <span class="mandatoryBox"
                    ><span class="mandatory">*</span>{{ $t("login.authCode") }}</span
                  >
                  <div>
                    <el-input
                      size="small"
                      :placeholder="$t(`login.VerificationCode`)"
                      v-model="WithdrawalList.emailCode"
                      style="width: 60%"
                    ></el-input>
                  </div>
                  <!-- 获取验证码 -->
                  <el-button
                    size="small"
                    :disabled="codeBtn.btnStatus"
                    :class="{ forbban: codeBtn.btnStatus }"                 
                    type="success"
                    class="emailCodeButton"
                    >{{ $t(codeBtn.btnText) }}</el-button
                  >
                </el-form-item>   


            </el-form>             
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
              </span>
            </el-dialog>
        </div>
        </el-tab-pane>
        <!-- 未读留言标签 -->
        <!-- <el-tab-pane :label="$t(`message.unread`)" name="second">
      
          <div   style="width: calc(100vw - 320px)">
          <el-row   style="width: 90%">
            <el-col>
              <h5>{{ $t(`message.unread`) }}</h5>
              <el-table
                class="table"
                :data="tableData0"             
                max-height="250"
                @row-click="handelClickRow"
                style="width: 86%"
              >
                <el-table-column fixed prop="id" :label="$t(`message.num`)">
                </el-table-column>
                <el-table-column
                  fixed
                  prop="msgPage"
                  :label="$t(`message.msgPage`)"
                >
                  <template slot-scope="scope">
                    {{ formatPage(scope.row.msgPage) }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="userDate"
                  :label="$t(`message.submissionTime`)"
                >
                </el-table-column>
                <el-table-column
                  prop="userName"
                  :label="$t(`message.userName`)"
                >
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </div>
         
          <el-row style="width: 90%">
            <el-col>
              <h5>{{$t(`message.submittedTabel`)}}</h5>
              <el-table
                class="table"
                :data="tableData2"              
                max-height="250"
                @row-click="handelClickRow"
             
              >
                <el-table-column fixed prop="id" :label="$t(`message.num`)">
                </el-table-column>
                <el-table-column fixed prop="msgPage" :label="$t(`message.msgPage`)">
                   <template slot-scope="scope">
                    {{ formatPage(scope.row.msgPage) }}
                  </template>

                </el-table-column>
                <el-table-column prop="userDate" :label="$t(`message.submissionTime`)">
                </el-table-column>
                <el-table-column prop="userName" :label="$t(`message.userName`)">
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
         
          <el-row style="width: 90%">
            <el-col>
              <h5>{{$t(`message.processedTabel`)}}</h5>
              <el-table
                class="table"
                :data="tableData1"
             
                max-height="250"
                @row-click="handelClickRow"
              >
                <el-table-column fixed prop="id" :label="$t(`message.num`)">
                </el-table-column>
                <el-table-column fixed prop="msgPage" :label="$t(`message.msgPage`)">
                   <template slot-scope="scope">
                    {{ formatPage(scope.row.msgPage) }}
                  </template>
                </el-table-column>
                <el-table-column prop="userDate" :label="$t(`message.submissionTime`)">
                </el-table-column>
                <el-table-column prop="userName" :label="$t(`message.userName`)">
                </el-table-column>
                <el-table-column prop="responDate" :label="$t(`message.responDate`)">
                   <template slot-scope="scope">
                    {{ handelTime(scope.row.responDate) }}
                  </template>
                </el-table-column>
                <el-table-column prop="responser" :label="$t(`message.responser`)">
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </el-tab-pane> -->
        <!-- 未读工单汇总 -->
        <el-tab-pane :label="$t(`help.unreadWork`)" name="third">
          <!-- 已提交工单列表 -->
          <div style="width:100%">
          <el-row>
            <el-col>
              <h5>{{$t(`help.submittedWork`)}}</h5>
              <el-table
                class="table"
                :data="privateTicket"
                style="width: 90%"
                max-height="250"
                  @row-click="handelPrivateTicket1Row2"
              >
                <el-table-column fixed prop="id" :label="$t(`help.num`)" width="150">
                </el-table-column>
                <el-table-column fixed prop="type" :label="$t(`help.problem`)" >
                </el-table-column>
                <el-table-column prop="title" :label="$t(`help.problemTitle`)">
                </el-table-column>
                <el-table-column prop="userName" :label="$t(`help.userName`)">
                </el-table-column>
                <el-table-column prop="date" :label="$t(`help.submissionTime`)" >
                </el-table-column>
                <el-table-column prop="status" :label="$t(`help.dealWith`)"  >
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
          <!-- 已回复未读工单列表 -->
          <el-row>
            <el-col>
              <h5>{{$t(`help.ReplyUnread`)}}</h5>
              <el-table
                class="table"
                :data="privateTicket1"
                style="width: 90%"
                max-height="250"
                @row-click="handelPrivateTicket1Row"
              >
                <el-table-column fixed prop="id" :label="$t(`help.num`)" width="150">
                </el-table-column>
                <el-table-column fixed prop="type" :label="$t(`help.problem`)" >
                </el-table-column>
                <el-table-column prop="title" :label="$t(`help.problemTitle`)" >
                </el-table-column>
                <el-table-column prop="userName" :label="$t(`help.userName`)">
                </el-table-column>
                <el-table-column prop="date" :label="$t(`help.submissionTime`)" >
                </el-table-column>
                <el-table-column prop="status" :label="$t(`help.dealWith`)" >
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
          <!-- 已处理工单列表 -->
          <el-row>
            <el-col>
              <h5>{{$t(`help.processedTable`)}}</h5>
             <el-table
                class="table"
                :data="privateTicket2"
                style="width: 90%"
                max-height="250"
                  @row-click="handelPrivateTicket1Row2"
              >
                <el-table-column fixed prop="id" :label="$t(`help.num`)" width="150">
                </el-table-column>
                <el-table-column fixed prop="type" :label="$t(`help.problem`)" >
                </el-table-column>
                <el-table-column prop="title" :label="$t(`help.problemTitle`)" >
                </el-table-column>
                <el-table-column prop="userName" :label="$t(`help.userName`)">
                </el-table-column>
                <el-table-column prop="date" :label="$t(`help.submissionTime`)" >
                </el-table-column>
                <el-table-column prop="status" :label="$t(`help.dealWith`)" >
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
           <!-- 已关闭工单列表 -->
          <el-row>
            <el-col>
              <h5>{{$t(`help.closedTable`)}}</h5>
             <el-table
                class="table"
                :data="privateTicket12"
                style="width: 90%"
                max-height="250"
                  @row-click="handelPrivateTicket1Row2"
              >
                <el-table-column fixed prop="id" :label="$t(`help.num`)" width="150">
                </el-table-column>
                <el-table-column fixed prop="type" :label="$t(`help.problem`)" >
                </el-table-column>
                <el-table-column prop="title" :label="$t(`help.problemTitle`)" >
                </el-table-column>
                <el-table-column prop="userName" :label="$t(`help.userName`)">
                </el-table-column>
                <el-table-column prop="date" :label="$t(`help.submissionTime`)" >
                </el-table-column>
                <el-table-column prop="status" :label="$t(`help.dealWith`)" >
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </div>
        </el-tab-pane>
        <!-- 账户权限等级详情 -->
<el-tab-pane :label="$t(`pay.AccountAuthority`)" name="authority">
  <div class="authorityMain">
    <ul class="authorityBox">
      <li>
        <!-- 用户计划 -->
        <div>{{$t(`pay.userPlan`)}}</div>               
        <!-- 账户等级 -->
        <div>{{$t(`pay.AccountLevel`)}}</div>
          <!-- 指标标识 -->
          <div>{{$t(`pay.Refers`)}}</div>
        <!-- 是否需要付费 -->
        <div>{{$t(`pay.WhetherPay`)}}</div>
        <!-- 权限 -->
        <div class="authorityContent">{{$t(`pay.authority`)}}</div>
        <!-- 数据颗粒度 -->
        <div>{{$t(`pay.granularity`)}}</div>
        <!-- 费用 -->
        <div>{{$t(`pay.expense`)}}</div>
      </li>
   
      <li>
        <div>L1</div>
        <!-- 匿名用户 -->
        <div>{{$t(`pay.AnonymousUser`)}}</div>
         <!-- 无 -->
          <!-- 1星 -->
          <div> 
            <el-rate             
            disabled
            v-model="fraction"             
            :max="max"  
            disabled-void-color="rgba(0,0,0,0.3)"
            :colors="['#f7931a', '#f7931a', '#f7931a']"
            score-template="{value}">            
      </el-rate></div>
        <!-- <div>{{$t(`pay.none`)}}</div> -->
        <div>No</div>
        <!-- T1技术指标 -->
        <div class="authorityContent">{{$t(`pay.technicalL1`)}}</div>
        <div>1 day</div>
        <div>0</div>
      </li>
      <li>
        <div>L2</div>
        <!-- 注册用户 -->
        <div>{{$t(`pay.RegisteredUser`)}}</div>
          <!-- 1星 -->
          <div> 
            <el-rate             
            disabled
            v-model="fraction"             
            :max="max"  
            disabled-void-color="rgba(0,0,0,0.3)"
            :colors="['#f7931a', '#f7931a', '#f7931a']"
            score-template="{value}">            
      </el-rate></div>
        <div>No</div>
        <div class="authorityContent">
          <!-- L1技术指标 -->
          <span>{{$t(`pay.technicalL1`)}}</span>
          <!-- L2技术指标 -->
          <span>{{$t(`pay.technicalL2`)}}</span>
        </div>
        <div>1 day</div>
        <div>0</div>
      </li>
      <li>
        <!-- 传入付费用户 -->
        <div  @click="handelUpgrade({amount:10,label:`pay.monthlyPay`})" class="upgradeBox">
          L3(monthly user) <i class="i ishengban-shengji upgrade1"></i>
        </div>
        <!-- 月度付费用户 -->
        <div>{{$t(`pay.monthlyPay`)}}</div>
        <el-rate             
            disabled
            v-model="fraction1"             
            :max="max1"  
            disabled-void-color="rgba(0,0,0,0.3)"
            :colors="['#f7931a', '#f7931a', '#f7931a']"
            score-template="{value}">            
      </el-rate>
        <div>Yes</div>
        <div class="authorityContent">
          <span>{{$t(`pay.technicalL1`)}}</span>
          <span>{{$t(`pay.technicalL2`)}}</span>
          <span>{{$t(`pay.technicalL3`)}}</span>
          <!-- 日报,周报，重大消息订阅 -->
          <span>{{$t(`pay.greatMessage`)}}</span>
          <!-- 自定义指标消息订阅 -->
          <span>{{$t(`pay.customizeMessage`)}}</span>
          <span>Mobile App</span>
          <span>{{$t(`pay.support`)}}</span>
        </div>
        <div>1 day</div>
        <div>10 USDT/10 USDC/10 BUSD</div>
      </li>
      <li>
        <!-- 年度付费用户 -->
        <div  @click="handelUpgrade({amount:100,label:`pay.annualPay`})" class="upgradeBox">L3(annual user) <i class="i ishengban-shengji upgrade1"></i></div>
        <div>{{$t(`pay.annualPay`)}}</div>
        <el-rate             
            disabled
            v-model="fraction1"             
            :max="max1"  
            disabled-void-color="rgba(0,0,0,0.3)"
            :colors="['#f7931a', '#f7931a', '#f7931a']"
            score-template="{value}">            
      </el-rate>
        <div>Yes</div>
        <div class="authorityContent">
          <span>{{$t(`pay.technicalL1`)}}</span>
          <span>{{$t(`pay.technicalL2`)}}</span>
          <span>{{$t(`pay.technicalL3`)}}</span>
          <!-- 日报,周报，重大消息订阅 -->
          <span>{{$t(`pay.greatMessage`)}}</span>
          <!-- 自定义指标消息订阅 -->
          <span>{{$t(`pay.customizeMessage`)}}</span>
          <span>Mobile App</span>
          <span>{{$t(`pay.support`)}}</span>
        </div>
        <div>1 day</div>
        <div>100 USDT/100 USDC/100 BUSD</div>
      </li>
      <li>
        <!-- VIP年度付费用户 -->
        <div  @click="handelUpgrade({amount:500,label:`pay.vipAnnualPay`})"  class="upgradeBox">L4(VIP annual user) <i class="i ishengban-shengji upgrade1"></i></div>
        <div>{{$t(`pay.vipAnnualPay`)}}</div>
        <el-rate             
            disabled
            v-model="fraction2"             
            :max="max2"  
            disabled-void-color="rgba(0,0,0,0.3)"
            :colors="['#f7931a', '#f7931a', '#f7931a']"
            score-template="{value}">            
      </el-rate>
        <div>Yes</div>
        <div class="authorityContent">
         <span>{{$t(`pay.technicalL1`)}}</span>
          <span>{{$t(`pay.technicalL2`)}}</span>
          <span>{{$t(`pay.technicalL3`)}}</span>
          <span>{{$t(`pay.technicalL4`)}}</span>
          <!-- 新币种及新技术指标优先使用 -->
          <span>{{$t(`pay.NewCurrency`)}}</span>
          <!-- 日报,周报，重大消息订阅 -->
          <span>{{$t(`pay.greatMessage`)}}</span>
          <span>{{$t(`pay.customizeMessage`)}}</span>
          <span>Mobile App</span>
          <span>{{$t(`pay.support`)}}</span>
        </div>
        <div>1 day, real time</div>
        <div>500 USDT/500 USDC/500 BUSD</div>
      </li>
    </ul>
  </div>
</el-tab-pane>


      </el-tabs>
    </el-row>

    <!-- 修改密码 -->
    <!-- 重置密码弹窗输入旧邮箱 -->
    <el-dialog
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :append-to-body="true"
      :title="$t(`login.resetPassword`)"
      :visible.sync="dialogPasswordVisible"
      class="passwordBox"
      @close="handelClose"
    >
      <el-form
        class="passwordForm"
        :model="passwordForm"
        @submit.native.prevent
      >
        <el-form-item>
          <span><span class="mandatory">*</span>{{ $t(`login.email`) }}</span>
          <el-input
            :disabled="!!passwordForm.email"
            v-model="passwordForm.email"
            @blur="handelFocus"
            size="small"
            autocomplete="off"
            :placeholder="$t(`login.inputEmail`)"
            @keydown.enter.native="handelResetPasswordEmail"
          ></el-input>
        </el-form-item>

        <!-- <p>{{ $t(`login.inputEmail`) }}</p> -->
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogPasswordVisible = false" size="small">{{
          $t(`login.cancel`)
        }}</el-button>

        <el-button
          v-loading="buttonLoading"
          element-loading-spinner="el-icon-loading"
          type="primary"
          @click="handelResetPasswordEmail"
          size="small"
          >{{ $t(`login.emailVerification`) }}</el-button
        >
      </div>
    </el-dialog>
    <!-- 重置密码填写新密码 -->
    <el-dialog
      :modal-append-to-body="false"
      :title="$t(`login.resetPassword`)"
      :visible.sync="dialogNewPassword"
      :append-to-body="true"
      class="passwordBox"
      :close-on-click-modal="false"
    >
      <el-form class="passwordForm" :model="passwordForm">
        <el-form-item>
          <span><span class="mandatory">*</span>{{ $t(`login.email`) }}</span>
          <el-input
            v-model="passwordForm.email"
            disabled
            size="small"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <!-- 输入旧密码-->
        <el-form-item>
          <span
            ><span class="mandatory">*</span>{{ $t(`login.oldPassword`) }}</span
          >
          <el-input
            v-model="passwordForm.oldPassword"
            size="small"
            show-password
            :placeholder="$t(`login.placeholderTitle`)"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <!-- 输入新密码 -->
        <el-form-item>
          <span
            ><span class="mandatory">*</span>{{ $t(`login.newPassword`) }}</span
          >
          <el-input
            v-model="passwordForm.password"
            size="small"
            show-password
            :placeholder="$t(`login.placeholderTitle`)"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <!-- 确认新密码 -->
        <el-form-item>
          <span
            ><span class="mandatory">*</span
            >{{ $t(`login.ConfirmNewPassword`) }}</span
          >
          <el-input
            v-model="ConfirmNewPassword"
            size="small"
            show-password
            :placeholder="$t(`login.placeholderTitle`)"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item class="authCode">
          <span class="mandatoryBox"
            ><span class="mandatory">*</span>{{ $t("login.authCode") }}</span
          >
          <div>
            <el-input
              size="small"
              :placeholder="$t(`login.VerificationCode`)"
              v-model="passwordForm.resetPwdCode"
            ></el-input>
          </div>
          <p style="margin-top: 2px">{{ $t(`login.emailCode`) }}</p>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogNewPassword = false" size="small">{{
          $t(`login.cancel`)
        }}</el-button>
        <el-button type="primary" @click="handelNewPassword" size="small">{{
          $t(`login.resetPassword`)
        }}</el-button>
      </div>
    </el-dialog>

    <!-- 重置邮箱弹窗 验证旧邮箱 -->
    <el-dialog
      :modal-append-to-body="false"
      title="修改邮箱"
      :visible.sync="dialogEmailVisible"
      :append-to-body="true"
      class="passwordBox"
      :close-on-click-modal="false"
      @close="handelResetEmailClose"
    >
      <el-form class="passwordForm" :model="resetEmail">
        <!-- 密码 -->
        <el-form-item>
          <span
            ><span class="mandatory">*</span>{{ $t(`login.password`) }}</span
          >
          <el-input
            v-model="resetEmail.password"
            size="small"
            :placeholder="$t(`login.PleasePassword`)"
            autocomplete="off"
          ></el-input>
          <p class="warning">{{ $t(`login.PleasePassword`) }}</p>
        </el-form-item>

        <!-- 旧邮箱 -->
        <el-form-item>
          <span
            ><span class="mandatory">*</span>{{ $t(`login.oldEmail`) }}</span
          >
          <el-input
            v-model="resetEmail.oldEmail"
            size="small"
            disabled
            :placeholder="$t(`login.inputEmail`)"
            autocomplete="off"
          ></el-input>
          <p class="warning" v-show="emailWarningShow">
            {{ $t(`login.inputEmail`) }}
          </p>
        </el-form-item>

        <el-form-item class="authCode" style="margin: 0px">
          <span class="mandatoryBox"
            ><span class="mandatory">*</span>{{ $t("login.authCode") }}</span
          >
          <div>
            <el-input
              size="small"
              :placeholder="$t(`login.VerificationCode`)"
              v-model="resetEmail.resetPwdCode"
            ></el-input>
          </div>
          <p class="codeWarning" v-show="codeWarningShow">
            {{ $t(`login.emailCode`) }}
          </p>
          <!-- 邮箱无法接收验证码 -->
          <span
            style="
              display: inline-block;
              color: rgba(0, 0, 0, 0.6);
              font-size: 12px;
              height: 20px;
              line-height: 20px;
            "
            >{{ $t(`login.email2`) }}<span class="representation">{{ $t(`login.Statement`) }}</span></span
          >
        </el-form-item>
        <!-- :disabled="codeBtn.btnStatus"
            :class="{ forbban: codeBtn.btnStatus }"
            @click="handelEmailCode" -->
            <!-- 获取验证码 -->
        <el-button size="small" type="success" class="emailCodeButton"
          >{{ $t(`login.getCode`) }}</el-button
        >
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEmailVisible = false" size="small">{{
          $t(`login.cancel`)
        }}</el-button>
        <el-button type="primary" @click="handelOldEmail" size="small">{{
          $t(`login.submit`)
        }}</el-button>
      </div>
    </el-dialog>

    <!-- 填写新邮箱 -->
    <el-dialog
      :modal-append-to-body="false"
      :title="$t(`login.newEmail2`)"
      :visible.sync="dialogNewEmailVisible"
      :append-to-body="true"
      class="passwordBox"
      :close-on-click-modal="false"
    >
      <el-form class="passwordForm" :model="resetNewEmail">
        <!-- 新邮箱 -->
        <el-form-item>
          <span
            ><span class="mandatory">*</span>{{ $t(`login.newEmail`) }}</span
          >
          <el-input
            v-model="resetNewEmail.newEmail"
            size="small"
            :placeholder="$t(`login.inputEmail`)"
            autocomplete="off"
          ></el-input>
          <p class="warning" v-show="emailWarningShow">
            {{ $t(`login.inputEmail`) }}
          </p>
        </el-form-item>

        <el-form-item class="authCode">
          <span class="mandatoryBox"
            ><span class="mandatory">*</span>{{ $t("login.authCode") }}</span
          >
          <div>
            <el-input
              size="small"
              :placeholder="$t(`login.VerificationCode`)"
              v-model="resetNewEmail.code"
            ></el-input>
          </div>
          <p style="margin-top: 2px" v-show="codeWarningShow">
            {{ $t(`login.emailCode`) }}
          </p>
        </el-form-item>
        <!-- 获取验证码 -->
        <el-button size="small" type="success" class="emailCodeButton"
          >{{ $t("login.getCode") }}</el-button
        >
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogNewEmailVisible = false" size="small">{{
          $t(`login.cancel`)
        }}</el-button>
        <el-button type="primary" @click="handelNewEmail" size="small">{{
          $t(`login.submit`)
        }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import IndexJs from "../personal/index";
import i18n from '../../lang/index'
export default {
  
  metaInfo: {
    meta: [
      {
        name: 'keywords',
        content: 'Coinbus、个人中心、账号管理、余额查询,Personal center, account management, balance inquiry'
      },
      {
        name: 'description',
        content:i18n.t(`seo.personal`),
        // content:window.vm.$t(`seo.personal`)
      }
    ]
  },
  mixins: [IndexJs],

  mounted() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.el-icon-loading {
  margin-top: 15px;
  font-size: 15px;
}
.main {
  padding: 20px;
  width: 90%;
  // outline: 1px solid red;
  margin: 0 auto;
}
.PersonalContent {
  margin-top: 20px;
  padding: 50px;
  // outline: 1px solid red;
  box-shadow: 0px 0px 2px;
}
.setPersonal {
  color: #21a0ff;
  cursor: pointer;
  font-size: 14px;
  margin-left: 10px;
}
.title {
  // outline: 1px solid red;

  padding: 8px 0px;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.6);
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
.table {
  border: 1px solid rgba(0, 0, 0, 0.3);
}
.item1 {
  margin-left: 20px;
}
.modify {
  display: inline-block;
  border-radius: 4px;
  height: 28px;
  border: 1px solid rgba(247, 147, 26, 0.1);
  line-height: 28px;
  padding: 0px 20px;
  font-size: 13px;
  margin-left: 10px;
  cursor: pointer;
  color: teal;
  background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
}
.modify2 {
  display: inline-block;
  border-radius: 4px;
  height: 28px;
  border: 1px solid rgba(247, 147, 26, 0.1);
  line-height: 28px;
  padding: 0px 20px;
  font-size: 13px;
  margin-left: 10px;
  background: #ccc;
  color: rgba(0, 0, 0, 0.6);
  // cursor: pointer;
  // color: teal;
  // background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
}
.modify:hover {
  // background: rgba(247, 147, 26, 0.1);
  //  color: #f7931a;
  color: #000;
}
.accountUpgrade {
  position: relative;

  .upgrade {
    position: absolute;
    right: 33%;
    top: 46px;
    display: inline-block;
    border-radius: 4px;
    height: 28px;
    border: 1px solid rgba(247, 147, 26, 0.1);
    line-height: 28px;
    padding: 0px 20px;
    font-size: 13px;
    margin-left: 10px;
    cursor: pointer;
    background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
    color: teal;
  }
  .upgrade:hover {
    //    background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
    //  color: teal;
    color: #000;
  }
}

.gradeTime {
  width: 60%;
  line-height: 25px;
  // outline: 1px solid red;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.3);
  margin: 0px;
  position: absolute;
  top: 78px;
  .start {
    margin-left: 20px;
  }
}

.passwordBox {
  /* background: #b3c0d1; */
  width: 70%;
  margin: 0 auto;
  z-index: 99998 !important;
}
.passwordForm {
  /* background: #ff6365; */
  margin-top: -40px;
}
.passwordBox p {
  /* outline: 1px solid red; */
  line-height: 15px;
  color: #ff6365;
  margin-top: -5px;
  padding-left: 2px;
  font-size: 12px;
}
.mandatory {
  color: #ff6365;
}
// 重置邮箱
.warning {
  padding-top: 5px;
  // outline: 1px solid red;
}
.accountList {
  // outline: 1px solid red;
  margin-top: 30px;
  .accountItem {
    // outline: 1px solid red;
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    width: 1000px;
    font-size: 15px;
    font-weight: 600;
    //  border: 1px solid red;

    span {
      padding: 0px 10px;
      display: inline-block;
        // width: 200px;
        
    }
    span:nth-of-type(1) {
       width: 380px;
        // border: 1px solid red;
        display: flex;
        align-items: center;
        .accountTitle{
          width: 31%;
          //  border: 1px solid red;
        }
      .grade {
       flex: 1;
        color: #f7931a;
        //  border: 1px solid red;
        // background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
      }
    }
    span:nth-of-type(2) {
      width: 350px;
        // border: 1px solid red;
         display: flex;
        align-items: center;
        .expenseTitle{
          width: 22%;
          //  border: 1px solid red;
        }
      .expense {
        width: 70%;
        color: #f7931a;
       
      
        
      }
    }
  }
}
// 标签页
.tabPage {
  width: 100%;
  margin-top: 20px;
  position: relative;
  // outline: 1px solid red;
  .unread {
    // outline: 1px solid red;

    position: absolute;
    display: inline-block;
    // outline: 1px solid red;
    width: 20px;
    line-height: 20px;
    top: -10px;
    left: 178px;
    border-radius: 50%;
    text-align: center;
    font-size: 10px;
    color: aliceblue;
    background: #ea6767;
    // z-index: -1;
  }
  .unread1 {
    position: absolute;
    display: inline-block;
    // outline: 1px solid red;
    width: 20px;
    line-height: 20px;
    top: -10px;
    left: 300px;
    border-radius: 50%;
    text-align: center;
    font-size: 10px;
    color: aliceblue;
    background: #ea6767;
    // z-index: 99999;
    color: red;
  }
}

.authCode .codeWarning {
  margin-top: 2px;
  margin-bottom: 0px;
  // color: blue;
}
.representation {
  cursor: pointer;
  color: rgba(0, 0, 0, 0.8);
}

.representation:hover {
  color: #f7931a;
}
// 标签页个人中心
.Individual {
  
  margin-top: 10px;
  padding-bottom: 50px;
  
}
.authorityMain {
  // padding: 20px;
  // width: calc(100vw - 320px);
  width:100%;
  // background: firebrick;
  // display: flex;
  // justify-content: center;


}
// 权限详情
.authorityBox {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border: none ;
  // height: 600px;

  display: flex;
  li {
    //  border: 1px solid red;
    width: calc(100% / 6);
    display: flex;
    flex-direction: column;
    font-size: 15px;
    .authorityContent {
      flex: 1;
      // line-height: 300px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      span {
        // outline: 1px solid red;
        display: inline-block;
        width: 100%;
        // height: 50px;
        display: flex;
        justify-content: center;
        flex-wrap: wrap; 
      
        line-height: 30px;
      }
    }
    div {
      border: 1px solid rgba(0, 0, 0, 0.1);
      height: 50px;
      text-align: center;
      line-height: 50px;
    }
  }
}
.upgradeBox {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;

  .upgrade1 {
    font-size: 28px;
    color: #f7931a;
    margin-left: 5px;
  }
}

.forbban {
  // background: rgba(0, 0, 0, 0.2);
  width: 100px;
  text-align: center;
  // padding: 0px 10px;
  // color: #fff;
  // outline: 1px solid  rgba(0, 0, 0, 0.2);
}


// -----------------
.balanceBox{
  // outline: 1px solid red;
    p{  
      padding: 0px;
      margin: 0px;
      display: flex;
      span:nth-of-type(1) {
        // outline: 1px solid red;
        // width: 110px;
        text-align: left;
        font-weight: 600;
        padding: 0px 10px ;
        padding-left: 20px;
      }
      span:nth-of-type(2) {
        // outline: 1px solid red;
        width: 80px;
        text-align: left;
        color: #f7931a;
        font-weight: 600;
      }

    }

    

}


.registeredForm{//禁用框颜色

  ::v-deep .el-input.is-disabled .el-input__inner{
    color: rgba(0,0,0,0.6);
  }

  ::v-deep .el-textarea.is-disabled .el-textarea__inner{
    color: rgba(0,0,0,0.6);
  }

}

// --------当前等级------ 
.currentLevel{
  // outline: 1px solid red; 
  padding-left: 20px;
  margin-top: 20px;
  // line-height: 40px;
  span:nth-of-type(1){
    font-size: 15px;
    font-weight: 600;
    color: #383d71; 
  }
  span:nth-of-type(2){
    font-size: 15px;
    font-weight: 600;
    color: #383d71; 
  }
}
</style>
<style >
</style>