<template>
  <div class="personalMiningBox" v-loading="securityLoading">
    <section v-if="$isMobile" class="Mining">
      <div class="Delete">
        <el-button  class="delBth" @click="deleteSelected" :disabled="!this.checkedItems[0]" >{{$t(`personal.delete`)}}</el-button>
        <el-button class="bth" @click="addTo">{{$t(`personal.add`)}}  <i class="iconfont icon-youjiantou1 arrow"></i></el-button>
      </div>

      <div class="tableBox">
        <div class="tabTitle">
          <div class="checkbox">
            <el-checkbox  v-model="checkAll" @change="handleCheckAllChange"></el-checkbox>
          </div>
          <span class="miningAccount" :title="$t(`personal.miningAccount`)">{{$t(`personal.miningAccount`)}}</span>
          <span  class="currency" :title="$t(`personal.currency`)">{{$t(`personal.currency`)}}</span>
          <!-- <span class="addr"   :title="$t(`personal.walletAddress`)">{{$t(`personal.walletAddress`)}}</span> -->
          <!-- <span class="remarks"  :title="$t(`personal.remarks`)">{{$t(`personal.remarks`)}}</span> -->
          <span  class="operation" :title="$t(`personal.operation`)">{{$t(`personal.operation`)}}</span>
      </div>
        <el-collapse accordion>     
              <el-collapse-item   :name="item.hash" v-for="item in newAccountList" :key="item.account">
                  <template slot="title">
                    <el-checkbox-group class="checkbox" v-model="checkedItems" @change="handleCheckedCitiesChange" >
                          <el-checkbox  class="addressBox" :label="item.id" v-model="checkedItems"> <br> </el-checkbox>
                        </el-checkbox-group>
                      <div class="collapseTitle">                
                        <span class="account"> {{item.ma }}</span>
                        <span class="currency2" :title="item.pool"><img style="width:20PX" :src="item.img" alt="coin" loading="lazy"> {{ item.pool }} </span>
                        <span  class="operation"  @click="bindWallet(item)"  > {{$t(`personal.modify`)}} </span>
                        <span class="police" @click="jumpAlerts(item)"> {{$t(`alerts.alarmMove`)}}</span>
                   
                      </div>                
                </template>

                <section class="content">
                        <div >
                          <p>{{$t(`personal.miningAccount`)}} :</p>
                          <p>{{item.ma }}</p>
                        </div>
                        <div class="remarks">                      
                          <p>{{$t(`personal.currency`)}} :</p>
                          <p>{{ item.pool }}   </p>
                        </div>
                        <div class="remarks">                      
                          <p>{{$t(`personal.walletAddress`)}} :</p>
                          <p>{{ item.addr }}   <span class="copy" @click="clickCopy(item)">{{$t(`personal.copy`)}}</span></p>
                        </div>
                        <div class="remarks">
                          <p>{{$t(`personal.remarks`)}} :</p>
                          <p>{{ item.remark }}</p>
                        </div>
                      </section>


    
              </el-collapse-item>
   
           </el-collapse>
      </div>


    </section>
    <section  v-else  style="   padding: 18PX;">
      <el-row>
     
        <div class="headTitle"> 
          <el-col :xs="24" :sm="24" :md="16" :lg="18" :xl="18">
          <div class="titleBox">
            <i class="iconfont icon-kuanggong1 "></i>
            <h2>{{$t(`personal.miningAccount`)}}</h2>
            <div class="inputItem">
                <el-select class="input" clearable  size="mini"  ref="screen" @change="changeScreen(screenCurrency)" v-model="screenCurrency" :placeholder="$t(`personal.screen`)">
                          <el-option
                            v-for="item in currencyList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            <div style="display: flex;align-items: center;">
                              <img :src="item.imgUrl" style="float: left;width:20PX;"/>
                              <span style="float: left;margin-left:5PX"> {{item.label }}</span>
                            </div>
                          </el-option>
                        </el-select>

            </div>
        </div>
      </el-col>
            <el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="6">
              <div class="Delete">
                <el-button  class="delBth" @click="deleteSelected" :disabled="!this.checkedItems[0]" >{{$t(`personal.delete`)}}</el-button>
                <el-button class="bth" @click="addTo">{{$t(`personal.add`)}}  <i class="iconfont icon-youjiantou1 arrow"></i></el-button>
              </div>

            </el-col>
        
    </div>
  </el-row>     


    <div class="tableBox">
      <div class="tabTitle">
        <div class="checkbox">
          <el-checkbox  v-model="checkAll" @change="handleCheckAllChange"></el-checkbox>
        </div>
        <span class="miningAccount" :title="$t(`personal.miningAccount`)">{{$t(`personal.miningAccount`)}}</span>
        <span  class="currency" :title="$t(`personal.currency`)">{{$t(`personal.currency`)}}</span>
        <span class="addr"   :title="$t(`personal.walletAddress`)">{{$t(`personal.walletAddress`)}}</span>
        <span class="remarks"  :title="$t(`personal.remarks`)">{{$t(`personal.remarks`)}}</span>
        <span  class="operation" :title="$t(`personal.operation`)">{{$t(`personal.operation`)}}</span>
      </div>
      <ul class="tabelList">
       <!-- <li class="tabTitle">
        <div class="checkbox">
          <el-checkbox  v-model="checkAll" @change="handleCheckAllChange"></el-checkbox>
        </div>
        <span class="miningAccount" :title="$t(`personal.miningAccount`)">{{$t(`personal.miningAccount`)}}</span>
        <span  :title="$t(`personal.currency`)">{{$t(`personal.currency`)}}</span>
        <span class="addr"   :title="$t(`personal.walletAddress`)">{{$t(`personal.walletAddress`)}}</span>
        <span class="remarks"  :title="$t(`personal.remarks`)">{{$t(`personal.remarks`)}}</span>
        <span  :title="$t(`personal.operation`)">{{$t(`personal.operation`)}}</span>
      </li> -->
      <li v-for="item in newAccountList" :key="item.account">  
       
        <el-checkbox-group class="checkbox" v-model="checkedItems" @change="handleCheckedCitiesChange" >
           <el-checkbox  class="addressBox" :label="item.id" v-model="checkedItems"> <br> </el-checkbox>
        </el-checkbox-group>
    
        <span class="miningAccount" :title="item.ma">  {{item.ma }}</span>
        <!-- <span class="poolCL" :title="item.pool"> <img style="width:20PX" :src="item.img" alt="">  {{ item.pool }}</span> -->
        <span class="currency" :title="item.pool"><img style="width:20PX" :src="item.img" alt="coin" loading="lazy"> {{ item.pool }} </span>
        <span class="addr" :title="item.addr">{{ item.addr }} </span>
        <span class="remarks" :title="item.remark">{{ item.remark }}</span>
        <div class="operationBox">
          <span  class="operation"  @click="bindWallet(item)"  > {{$t(`personal.modify`)}} </span>
          <span class="alerts"></span>
          <!-- <el-dropdown click="alerts">
            <span class="el-dropdown-link">
              {{ $t(`alerts.more`) }}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="jumpAlerts(item)">  {{ $t(`alerts.alarmNotification`) }}</el-dropdown-item>              
            </el-dropdown-menu>
          </el-dropdown> -->
        </div>
     
      </li>
  </ul>
    </div>
  </section>
        <!-- 未开启安全验证 -->
        <el-dialog           
           :visible.sync="dialogVerification"
           width="30%"
           :close-on-click-modal="false"
           >
            <section class="dialogBox">
           <div class="title" style="font-size: 1.3em;">{{$t(`personal.Tips`)}}</div>
            <div class="verificationPrompt">{{$t(`personal.enableVerificationDescription`)}}</div>
           <el-button class="dialogBth" style="padding: 10PX 10%;" type="primary" @click="jumpVerification">{{$t(`personal.goOpenIt`)}}</el-button>
      
         </section>
    </el-dialog>

        <el-dialog
         
          :visible.sync="dialogVisible"
          width="45%"
          @close="handelAddClose"
          :close-on-click-modal="false"
          >
           <section class="dialogBox">
          <div class="title" style="font-size:1.3em">{{$t(`personal.addMiningPool`)}}</div>
            <div class="inputBox"> 
              <div class="inputItem">
                <span class="title" >{{$t(`personal.accountName`)}}</span>
                <el-input class="input" v-model="AccountParams.ma" :placeholder="$t(`personal.account`)"></el-input>
                <p class="accountFormat">{{ $t(`personal.accountFormat`) }}</p>
              </div>

              <div class="inputItem">
                <span class="title" >{{$t(`personal.walletAddress`)}}</span>
                <el-input class="input" v-model="AccountParams.balance" :placeholder="$t(`personal.pleaseEnter`)"></el-input>
              </div>
              <div class="inputItem">
                <span class="title"  > {{$t(`personal.poolSelection`)}}</span>
                <el-select class="input"  ref="select" @change="changeSelection(AccountParams.coin)" v-model="AccountParams.coin" :placeholder="$t(`personal.select`)">
                
                    <el-option
                      v-for="item in currencyList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                      <div style="display: flex;align-items: center;">
                        <img :src="item.imgUrl" style="float: left;width:20PX;"/>
                        <span style="float: left;margin-left:5PX"> {{item.label }}</span>
                      </div>
                    </el-option>
                  </el-select>

              </div>
              <div class="inputItem" v-if="isItBound">
                 <span class="title" >{{$t(`personal.oneTimePassword`)}}</span>
                 <el-input class="input" type="number" v-model="AccountParams.code" placeholder="000000"></el-input>
               </div>
              <div class="inputItem">
                <span class="title" >{{$t(`personal.remarks2`)}}</span>
                <el-input class="input" v-model="AccountParams.remarks"  :placeholder="$t(`personal.pleaseEnter`)"></el-input>
              </div>
            </div>
          <el-button style="width:30%;font-size: 1.1em;" :loading="addMinerLoading" type="primary" @click="confirmAdd">{{$t(`personal.determine`)}}</el-button>
     
        </section>
      </el-dialog>
      <!-- --------绑定钱包 -->
      <el-dialog
         
         :visible.sync="walletDialogVisible"
         width="45%"
         :close-on-click-modal="false"
         @close="closeDialog"
         >
          <section class="dialogBox">
         <div class="title" style="font-size:1.3em">{{$t(`personal.bindAddress`)}}</div>
           <div class="inputBox"> 
             <div class="inputItem">
               <span class="title" >{{$t(`personal.walletAddress`)}}</span>
               <el-input class="input" v-model="paymentSettingsData.balance"  :placeholder="$t(`personal.inputWalletAddress`)"></el-input>
             </div>
         
           </div>
           <div class="inputBox"> 
             <div class="inputItem">
               <span class="title" >{{$t(`personal.minimumPaymentAmount`)}}</span>
            
               <el-input :disabled="amountDisabled" class="input" v-model="paymentSettingsData.amount"  :placeholder="$t(`personal.pleaseEnter`)">

               
               </el-input>
           
               <p>{{$t(`course.amount`) }}: {{ amount }}</p>
              </div>            
           </div>
        
           <div class="inputBox"> 
             <div class="inputItem">
               <span class="title" >{{$t(`personal.automaticWithdrawal`)}}</span>
           
               <el-select class="input" v-model="paymentSettingsData.active" @change="handelActive" :placeholder="$t(`personal.select`)">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="$t(item.label)"
                    :value="item.value">
                  </el-option>
                </el-select>
             </div>            
           </div>
           <div class="inputBox">
           <div class="inputItem" v-if="isItBound">
                 <span class="title" >{{$t(`personal.oneTimePassword`)}}</span>
                 <el-input class="input" type="number" v-model="WalletAddressParams.gCode" placeholder="000000"></el-input>
               </div>
              </div>
           <div class="inputBox">
            <div class="inputItem">
                  <span class="title" >{{$t(`personal.remarks`)}}</span>
                  <el-input class="input" v-model="paymentSettingsData.remark"  :placeholder="$t(`personal.pleaseEnter`)"></el-input>
              </div>
          </div>
         <el-button style="width:50%;font-size: 1.1em;" :loading="confirmBindingLoading"  @click="confirmBinding">{{$t(`personal.confirmSubmit`)}}</el-button>
    
       </section>
     </el-dialog>
     <!-- 删除账户 -->
     <el-dialog
         
         :visible.sync="deleteAccountDialog"
         width="35%"
             :close-on-click-modal="false"
             @close="closeDeleteDialog"
         >
          <section class="dialogBox">
         <div class="title" style="font-size: 1.3em;">{{$t(`personal.Tips`)}}</div>
           <div class="inputBox"> 
          
             <div class="inputItem">
               <h4>{{$t(`personal.deleteConfirmation`)}}</h4>
                <p>{{$t(`personal.miningAccount`)}}: {{ deleteAccount }}</p>
             </div>
           </div>
           <div class="inputBox" style="margin-top: 10PX;">
        
           <div class="inputItem"  v-if="isItBound">
                 <span class="title" >{{$t(`personal.oneTimePassword`)}}</span>
                 <el-input class="input" type="number" v-model="deleteGCode" placeholder="000000"></el-input>
               </div>
              </div>
         <el-button :loading="MiningLoading" style="width:50%;font-size: 1.1em;" type="primary" @click="confirmDelete">{{$t(`personal.determine`)}}</el-button>
    
       </section>
     </el-dialog>

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

<style lang="scss" scoped>


  // 手机端适配
@media screen and (min-width: 220px) and (max-width: 1279px) {
  .personalMiningBox{
    padding: 0px !important;
  }
  .personalBox{
    padding: 14px !important;
    background: palegoldenrod !important;
  }
  .Mining{
    width: 100%;
   
  }

  .Delete{
    width: 100%;
    display:flex;
    justify-content: left;
    margin-top: 18px;
   
    .delBth{
      background: #FF4181;
      color: #fff;
      padding: 13px 40px !important;
      border-radius: 10px !important;
    }
    .bth{
      background: #651EFE;
      color: #fff;
      padding: 13px 40px !important;
      border-radius: 10px !important;
      margin-left: 18px;
    }
  }

  .personalMiningBox .tableBox{
    width: 100%;
    margin-top: 10px;
    box-shadow: 0px 0px 3px 2px #ccc;
    border-radius: 5px ;

    .tabTitle{
     
     display: flex;
     align-items: center;
   
      span{
        width: calc(95% /3) !important;
        font-size: 0.9rem !important;
      }
      .miningAccount{
     
        width: 27% !important;
        margin: 0 !important;
      }
      .checkbox{
        width: 31px !important;
      }
    
    }

    .collapseTitle{
      width: 100%;
      padding-left:0px;
      display: flex;
      span{
        // display: flex;
        display: inline-block;
        // width: calc(96% /4) !important;      
        align-items: center;
        text-align: center;
        text-overflow: ellipsis;
        overflow: hidden;
        text-align: left;
        white-space: nowrap;
      }
      .account{
        width: 29%;
     

      }
      .currency2{
        display: flex;
        line-height: 48px;
        width: 38%;
        img{
          margin-right: 5px;
        }
      }
      .operation{
        color: #661FFF;
      }
      .police{
        width: 18%;      
        // color: #661FFF;
        color: #ccc;
        text-align: center;
      }



    }

    .content{
      width: 100%;
      padding: 10px 8px;
      background:#f0e9f5;
      padding-bottom: 25px;
     .remarks{
      margin-top: 10px;
     }
     p:nth-of-type(1){
      font-weight: 600;
     }
      p{
        word-wrap: break-word;

        .copy{
        padding: 0px 5px;
        display: inline-block;
        cursor: pointer;
        border:1px solid #D1C2E9;
        border-radius: 5px;
        margin-left: 10px;
        font-size: 0.8rem;
      }
      }
    }

    ::v-deep .el-collapse-item__header{
      padding-left: 10px ;
    }

   
  }

  .dialogBox .inputBox .inputItem{
      margin-top: 10px !important;
      .title{
        font-size: 0.9rem !important;
      }
    }

   ::v-deep .el-collapse-item__content{
     padding: 0 !important;
    }

}


@media screen and (min-width: 220px) and (max-width: 500px) {

::v-deep .el-dialog{
    width: 98% !important;
    border-radius: 10px !important;
  }
  ::v-deep  .el-dialog__body{
    padding: 0px !important;
  }

  ::v-deep .dialogBox .inputBox{
    width: 93% !important;
    margin-top: 8px !important;
  }

}

@media screen and (min-width: 500px) and (max-width: 800px) {

::v-deep .el-dialog{
    width: 80% !important;
    border-radius: 10px !important;
  }
  ::v-deep  .el-dialog__body{
    padding: 0px !important;
  }

  ::v-deep .dialogBox .inputBox{
    width: 80% !important;
    margin-top: 8px !important;
  }

}


  .personalMiningBox{
    padding: 18PX;
    
    // background: #0974e7;
    .headTitle{
      display: flex;
      justify-content: space-between;
      align-items: center;
     border-bottom: 1PX solid rgba(0,0,0,0.1);
     .titleBox{
      display: flex;
      align-items: center;
     }
      h2{
       
        color: #36246F;
      }
      i{
        font-size: 1.8em;
        margin-right: 5PX;
        color: #36246F;
        font-weight: 600;
      
      }
      
      .inputItem{
        margin-left: 18px;

      }
    
    
     
      .Delete{
        // width: 20%;
       
        display: flex;
        align-items: center;
        .delBth{
          border: none;

        }
        .delBth:hover{
          color: #661FFB;
          background: transparent;
          font-weight: 600;
        }
        .bth{
          width: 50%;
          background: #661FFB;
          margin-left: 3%;
          text-align: center;
          border: 1PX solid #661FFB;
          border-radius: 5PX;
          color: #fff;
          border-radius: 25PX;
          i{
            font-size: 1em;
          }
        }
        span:hover{
          
          border: 1PX solid #0062CC;
        }
        .arrow{
          color: #fff;
        }
      }
    }
    .tableBox{
    
      min-height: 400PX;
      .tabTitle{
        width: 100%;
        background: #D2C3EA;
          color: #36246F;
          display: flex;
          align-items: center;
          height: 55PX;
          border-radius: 5PX 5PX 0PX 0PX;
          span{
            margin-left: 8px;
            overflow: hidden !important;
           text-overflow: ellipsis;
           white-space: nowrap;
          font-size: 0.95rem;
          font-weight: 600;
          }
          .checkbox{
            // width: 6%;   
            width: 40px;      
            text-align: center;
            // background: #36246F;
            display: flex;
            justify-content: center;
            padding-left: 1%;
          }
         
          .currency{
            // width: 10%;
            width: 120px;
          }
          .miningAccount{
            // width: 12%;
            width: 140px;
            // background: #0062CC;
          }
          .addr{
            display: inline-block;
            // width: 40%;
            width: 400px;
            padding-left: 10px;
            // background: goldenrod;
          

          }
          .remarks{
            // width: 18%;
            width: 200px;
            padding-left: 10px;
            // background: greenyellow;
          }
         

          .operation{
            // width: 14%;
            padding-left: 20px;
            width: 140px;
          }
      }
      ul{
        width: 100%;
        padding: 0;
        border: 1PX solid rgba(0,0,0,0.1);
        border-radius: 5PX;
        overflow: hidden;
        overflow-y: auto;
        height: 430PX;
           //隐藏滚动条
           scrollbar-width: none;
          -ms-overflow-style: none;
          border-right: none;
          margin: 0;
          
     
        li{
          list-style: none;
          width: 100%;         
          display: flex;
          align-items: center;
          background: #EFEFEF;
          height: 50PX;
          .checkbox{
            // width: 6%; 
            width: 40px;            
            text-align: center;
            // background: #36246F;
            display: flex;
            justify-content: center;
            padding-left: 1%;
          }
          span{
            display: inline-block;
            margin-left: 8px;
            overflow: hidden !important;
           text-overflow: ellipsis;
           white-space: nowrap;
           font-size: 0.85rem;
           text-align: left;
           padding: 0px;
          }
          .currency{
            width: 13%;
            width: 130px;
            display: flex;
            align-items: center;
            img{
              width: 20PX;
              margin-right: 5PX;
            }
          }
          .miningAccount{
            // width: 12%;
            width: 140px !important;
            // background: #0062CC;
          }
          .addr{
            width: 45%;
            width: 400px !important;
            // background: goldenrod;
            word-wrap: break-word;
            overflow: visible;
          text-overflow: clip;
          white-space: normal;
          padding: 0PX 5PX;
          }
          .remarks{
            width: 18%;
            width: 200px !important;
            // background: greenyellow;
          }
          .operationBox{
            padding-right: 5px;
            width: 15%;
            width: 140px !important;
            display: flex;
         
            justify-content: space-around;
            .alerts{
              width: 24%;
              // background: palegreen;
              cursor: pointer;
          
            }
          }
          ::v-deep .el-dropdown-link{
                color: rgba(0,0,0,1);
              
              }
          ::v-deep .el-dropdown-link:hover{
                color: #661FFB;
                cursor: pointer;
              }
          .operation{
            // width: 8%;
            // background: #661FFB;
            cursor: pointer;
          }
          .operation:hover{
            color: #661FFB;
          }
          // span{
          //   width:8%;
          //   height: 100%;          
          //   text-align: left;
          //   line-height:45PX; ;
          //   overflow: hidden;
          //   text-overflow: ellipsis;
          //   white-space: nowrap;
          //   margin-left: 5PX;

          // }
          // .poolCL{
          //   display: flex;
          //   align-items: center;
          //   img{
          //     width: 20PX;
          //     margin-right: 5PX;
          //   }
          // }
          // .binding{
          //   color: #661FFB;
          //   cursor: pointer;
          // }
          // .binding:hover{
          //   color: #0974e7;
          // }
          // .miningAccount{
          //   width: 12%;
          //   background: #D2C3EA;
          // }
          // .addr{
          //   width: 42%;
          // }
          // .remarks{
          //   width: 12%;
          // }
        }
        li:nth-child(even) {
                background-color: #ffff; /* 甚至可以是你想要的任何颜色 */
            }
        .tabTitle{
          background: #D2C3EA;
          color: #36246F;
          span{
            width: 8%;
           
          }
          .miningAccount{
            width: 12%;
          }
          .addr{
            width: 42%;
          }
          .remarks{
            width: 12%;
          }
        }
      }

    }
  }
  .accountFormat{
    color: #FF4081;
    font-size: 0.8em;
    line-height: 18PX;
    margin: 0;
  }

 ::v-deep .el-checkbox__inner{
    /* background-color: #000 !important; */
    border-color: #000 ;
  }
  ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
    background-color: #000 !important;
    border-color: #000 !important;
  }
 

  .dialogBox{
    padding: 0PX 20PX;
    padding-bottom: 50PX;
  
    display: flex;
    justify-content: center;
    flex-direction: column;
     align-items: center;
    .title{
      width: 100%;
      text-align: center;
      font-size: 1em;
      font-weight: 600;
    }
    .inputBox{
      width: 70%;
      margin-top: 20PX;
    
      .inputItem{
        margin-top: 30PX;
        display: flex;
        flex-direction: column;
       align-items: left;
       justify-content: left;
      }
      .title{
        font-size: 1.1em;
        text-align: left;
      }
      .input{
        margin-top: 10PX;
      
      }     
    }
    .el-button{
      background: #661FFF;
      color: #EDF2FF;
      border:none;
      outline: none;
      margin-top: 30PX;
    }

  }
  ::v-deep .el-dialog{
    background-image: url(../../../assets/img/dialog1.png);
    background-size: 130% 105%;
    background-repeat: no-repeat;
    background-position: 100% 100%;
    border-radius: 32PX;
  }

  .tabelList{
    span{
      display: inline-block;    
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      
    }
  }

</style>

<!-- <style  >
  .el-checkbox__inner{
    /* background-color: #000 !important; */
    border-color: #000 ;
  }
  .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
    background-color: #000 ;
    border-color: #000 ;
  }
</style> -->