<template>
  <div class="alerts" v-loading="alertsLoading" >


     <section  v-if="$isMobile" class="mobileMain">
      <div class="accountInformation">
        <img :src="receiveData.img" alt="coin"  loading="lazy"/>
        <span class="coin">{{receiveData.coin  }}</span>
        <i class="iconfont icon-youjiantou"></i>
        <span class="ma"> {{receiveData.ma  }}</span>
      </div>
      <h4>{{ $t(`alerts.Alarm`) }}</h4>
      <p class="explain">  <i class="iconfont icon-zhuyi"></i>  {{ $t(`alerts.beCareful`) }}</p>
      <p class="explain"><i class="iconfont icon-zhuyi"></i> {{ $t(`alerts.beCareful1`) }}</p>
      <section class="BthBox">
             
             <el-button class="addBth" @click="add"> {{ $t(`alerts.add`) }} <i data-v-76e7f323="" class="iconfont icon-youjiantou1 arrow"></i></el-button>
         </section>

      <div class="tableBox" >
                    <div class="table-title">
                        <span  class="coin">{{ $t(`user.Account`) }}</span>
                        <span  class="coin quota">{{ $t(`work.operation`) }}</span>           
                    </div>
                    <el-collapse >     
                            <el-collapse-item  name="1"  v-for="item in tableData" :key="item.id">
                                <template slot="title">
                                  <div class="collapseTitle">
                                    <span class="coinBox">{{ item.email }}</span>
                                    <div class="operationBox">                                       
                                      <el-button  size="small" class="modifyBth" @click.native="modify(item)"> {{$t(`personal.modify`)}} </el-button>
                                      <el-popconfirm
                                        :confirm-button-text='$t(`work.confirm`)'
                                        :cancel-button-text='$t(`work.cancel`)'
                                        icon="el-icon-info"
                                        icon-color="red"
                                        :title="$t(`alerts.deleteRemind`)"
                                        @confirm="handelDelete(scope.row)"
                                      >
                                        <el-button :loading="deleteLoading" class="elBtn" size="small" slot="reference">{{ $t(`personal.delete`) }}</el-button>
                                      </el-popconfirm>
                                    
                                    </div>
                                  </div>
                            </template>
                            <div class="belowTable">
                                <div>
                                    <p>{{$t(`user.Account`)}}</p>
                                    <p>{{ item.email }}</p>
                                </div>
                                <div>
                                  <p>{{$t(`apiFile.remarks`)}}</p>
                                  <p>{{ item.remark }}</p>                                
                                </div>
                                <!-- <div>
                                    <p>{{$t(`course.GPU`)}} </p>
                                    <p>{{ activeItem.GPU }} </p>
                                </div>
                                <div>
                                    <p>{{$t(`course.ASIC`)}} </p>
                                    <p>{{ $t(activeItem.ASIC)  }}</p>
                                </div> -->
                            </div>
                        
                    
                        </el-collapse-item>
                    
                    </el-collapse>
       </div>
          <!-- 添加弹窗 -->
      <el-dialog         
         :visible.sync="dialogVisible"
         width="45%"        
         :close-on-click-modal="false"
         >
          <section class="dialogBox">
         <div class="title" style="font-size:1.3em">{{ $t(`alerts.addAlarmEmail`) }}</div>
           <div class="inputBox"> 
             <div class="inputItem">
               <span class="title" >{{$t(`user.Account`)}}</span>
               <el-input class="input" type="email" v-model="params.email" :placeholder="$t(`personal.pleaseEnter`)"></el-input>
             </div>

             <div class="inputItem">
              <span class="title">{{ $t(`personal.verificationCode`) }}</span>
              <div class="verificationCode">
                <el-input 
                  type="text"
                  v-model="params.code"
                  autocomplete="off"
                   
                  :placeholder="$t(`user.verificationCode`)"
                ></el-input>
                <el-button
                  class="codeBtn"
                  :disabled="btnDisabledPassword"
                  @click="handelCode"

                  ><span
                    v-if="countDownTimePassword < 60 && countDownTimePassword > 0"
                    >{{ countDownTimePassword }}</span
                  >{{ $t(bthTextPassword) }}</el-button
                >
              </div>
          </div>


             <div class="inputItem">
               <span class="title" >{{$t(`apiFile.remarks`)}}</span>
               <el-input class="input" v-model="params.remark" :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="modifyDialogVisible"
          width="35%"        
          :close-on-click-modal="false"
          >
            <section class="dialogBox">
          <div class="title" style="font-size:1.3em">{{ $t(`alerts.modifyRemarks`) }}</div>
            <div class="inputBox"> 
      
              <div class="inputItem">
                <span class="title" >{{$t(`apiFile.remarks`)}}</span>
                <el-input class="input" v-model="modifyParams.remark" :placeholder="$t(`personal.pleaseEnter`)"></el-input>
              </div>
      
        
            </div>
          <el-button style="width:30%;font-size: 1.1em;" :loading="addMinerLoading" type="primary" @click="confirmModify">{{$t(`personal.determine`)}}</el-button>
      
        </section>
     </el-dialog>
     </section>
     <section v-else class="pcMain">
    
    <div class="accountInformation">
        <img :src="receiveData.img" alt="coin" loading="lazy" />
        <span class="coin">{{receiveData.coin  }}</span>
        <i class="iconfont icon-youjiantou"></i>
        <span class="ma"> {{receiveData.ma  }}</span>
      </div>

      <section class="content">
         <h2>{{ $t(`alerts.Alarm`) }}</h2>
       
         <p class="explain">  <i class="iconfont icon-zhuyi"></i>  {{ $t(`alerts.beCareful`) }}</p>
          <p class="explain"><i class="iconfont icon-zhuyi"></i> {{ $t(`alerts.beCareful1`) }}</p>

         <section class="BthBox">
             
             <el-button class="addBth" @click="add"> {{ $t(`alerts.add`) }} <i data-v-76e7f323="" class="iconfont icon-youjiantou1 arrow"></i></el-button>
         </section>
         <el-table
          class="table" 
          height="500"    
          :header-cell-style="{ 'text-align': 'center' , background: '#D2C3EA', color: '#36246F',height: '60px' }"
          :cell-style="{ 'text-align': 'center' }"
          :data="tableData"
          style="width: 100%; text-transform: none;border-radius: 5px;margin-top: 18px;"
          max-height="600"   
       
          stripe
        >
          <el-table-column prop="email" :label="$t(`user.Account`)" width="230" > </el-table-column>
          <el-table-column prop="remark" :label="$t(`apiFile.remarks`)" :show-overflow-tooltip="true"  > </el-table-column>
         
   
          <el-table-column fixed="right" :label="$t(`work.operation`)"   width="230">
            <template slot-scope="scope">   
              
                <el-button  size="small" class="modifyBth" @click="modify(scope.row)"> {{$t(`personal.modify`)}} </el-button>

              <el-popconfirm
                  :confirm-button-text='$t(`work.confirm`)'
                  :cancel-button-text='$t(`work.cancel`)'
                  icon="el-icon-info"
                  icon-color="red"
                  :title="$t(`alerts.deleteRemind`)"
                  @confirm="handelDelete(scope.row)"
                >
                  <el-button :loading="deleteLoading" class="elBtn" size="small" slot="reference">{{ $t(`personal.delete`) }}</el-button>
                </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </section> 
      <!-- 添加弹窗 -->
      <el-dialog         
         :visible.sync="dialogVisible"
         width="45%"        
         :close-on-click-modal="false"
         >
          <section class="dialogBox">
         <div class="title" style="font-size:1.3em">{{ $t(`alerts.addAlarmEmail`) }}</div>
           <div class="inputBox"> 
             <div class="inputItem">
               <span class="title" >{{$t(`user.Account`)}}</span>
               <el-input class="input" type="email" v-model="params.email" :placeholder="$t(`personal.pleaseEnter`)"></el-input>
             </div>

             <div class="inputItem">
              <span class="title">{{ $t(`personal.verificationCode`) }}</span>
              <div class="verificationCode">
                <el-input 
                  type="text"
                  v-model="params.code"
                  autocomplete="off"
                   
                  :placeholder="$t(`user.verificationCode`)"
                ></el-input>
                <el-button
                  class="codeBtn"
                  :disabled="btnDisabledPassword"
                  @click="handelCode"

                  ><span
                    v-if="countDownTimePassword < 60 && countDownTimePassword > 0"
                    >{{ countDownTimePassword }}</span
                  >{{ $t(bthTextPassword) }}</el-button
                >
              </div>
          </div>


             <div class="inputItem">
               <span class="title" >{{$t(`apiFile.remarks`)}}</span>
               <el-input class="input" v-model="params.remark" :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="modifyDialogVisible"
         width="35%"        
         :close-on-click-modal="false"
         >
          <section class="dialogBox">
         <div class="title" style="font-size:1.3em">{{ $t(`alerts.modifyRemarks`) }}</div>
           <div class="inputBox"> 
     
             <div class="inputItem">
               <span class="title" >{{$t(`apiFile.remarks`)}}</span>
               <el-input class="input" v-model="modifyParams.remark" :placeholder="$t(`personal.pleaseEnter`)"></el-input>
             </div>
    
       
           </div>
         <el-button style="width:30%;font-size: 1.1em;" :loading="addMinerLoading" type="primary" @click="confirmModify">{{$t(`personal.determine`)}}</el-button>
    
       </section>
     </el-dialog>
    </section>
  </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) {
    .mobileMain{
      width: 100%;
      background: transparent !important;
      padding: 0;
      margin: 0;      
      padding: 8px;
      padding-top: 60PX;
      
      h4{
        color: rgba(0, 0, 0, 0.8);
        text-align: left;
        width: 100%;
        padding-left: 3px;
      }
      .explain{
        font-size: 0.85rem;
        margin-top: 8px;
        color: rgba(0, 0, 0, 0.6);
      }


    .accountInformation {
      width: 100%;
      height: 30px;
      background: rgba(0, 0, 0, 0.5);
      position: fixed;
      top: 62px;
      left: 0;
      display: flex;
      align-items: center;
      padding: 1% 5%;
      z-index: 2001;

      img {
        width: 20px;
      }
      i {
        color: #fff;
        font-size: 1.2rem;
        margin-left: 10px;
      }
      .coin {
        font-size:0.9rem;
        margin-left: 5px;
        font-weight: 600;
        color: #fff;
        text-transform: capitalize;
      }
      .ma {
        font-size:0.9rem;
        font-weight: 600;
        color: #fff;
        margin-left: 10px;
      }
    }
  }
  .BthBox{
    width: 100%;
    text-align: right;
    padding: 0px 20px;
    .addBth{
      border-radius: 20px;
      color: #fff;
      background: #661FFB;
      margin-top: 18px;
    }
  }
  .tableBox{
    margin: 0 auto;
    width: 96%;
    min-height: 300px;
    // background: palegoldenrod;
    overflow: hidden;
    border-radius: 8px;
    font-size: 0.9rem;
    margin-bottom: 20px;
    box-shadow: 0px 0px 5px 2px #ccc;
    margin-top: 10px;
    background: #fff;
    .table-title{
      height: 50px;
      background: #D2C4E8;
      display: flex;
      justify-content: space-around;
      align-items: center;
      font-weight: 600;
      padding-left: 0 !important;
      text-align: center;
     
      span:nth-of-type(1){
        width:50% !important;
      }
      span:nth-of-type(2){   
        min-width: 30%;
        // font-weight: bold;
        // padding-right: 5px;
      }
    }
    .collapseTitle{
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding-left: 0 !important;
      text-align: center;
      .coinBox{
        width: 50%;
        overflow: hidden;
        text-overflow: ellipsis;
       }
      .operationBox{
        min-width: 30%;
      }

    
    }
    .belowTable{
        background:#f0e9f5;
        padding: 10px 0px;
        div {
          width: 100%;
          height: auto;
          text-align: left;
          padding-left: 8%;   
          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;
      }
      }
        }
       
      }
  

        .paginationBox{
          text-align: center;
          
        }
  }

}
@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;
  }

}

.pcMain{
  width: 100%;
    min-height: 100vh;
    background: #fff;
    background-image: url(../../assets/img/miningAccount/top.png);
    background-size: 100% 50%;
    background-repeat: no-repeat;
    background-position: 30% -15%;
    padding: 0;
    margin: 0;
    padding-top: 60PX;
    display: flex;
    justify-content: center;
}
.alerts{
    width: 100%;
    // min-height: 100vh;
    // background: #fff;
    // background-image: url(../../assets/img/miningAccount/top.png);
    // background-size: 100% 50%;
    // background-repeat: no-repeat;
    // background-position: 30% -15%;
    // padding: 0;
    // margin: 0;
    // padding-top: 60PX;
    // display: flex;
    // justify-content: center;
   
}


.accountInformation {
  width: 100%;
  height: 30px;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 8%;
  left: 0;
  display: flex;
  align-items: center;
  padding: 1% 5%;
  z-index: 2001;

  img {
    width: 23px;
  }
  i {
    color: #fff;
    font-size: 1.5em;
    margin-left: 10px;
  }
  .coin {
    margin-left: 5px;
    font-weight: 600;
    color: #fff;
    text-transform: capitalize;
  }
  .ma {
    font-weight: 600;
    color: #fff;
    margin-left: 10px;
  }
}

.content{
  width: 70%;
  min-height: 500px;
  padding: 20px;
  h2{
    color: rgba(0, 0, 0, 0.8);
    margin-bottom: 18px;
  }
  .explain{
    color: rgba(0, 0, 0, 0.6);
    font-size: 0.9rem;
    margin-top: 5px;
   
  }
  .BthBox{
    width: 100%;
    text-align: right;
    padding: 0px 20px;
    .addBth{
      border-radius: 20px;
      color: #fff;
      background: #661FFB;
    }
  }
}

.modifyBth{
  margin-right: 8px;
  color: #fff;
  background: #661FFB;
}
.elBtn{
  color: #ffff;
  background: #f0286a;
}

.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;
  }

  .verificationCode {
    display: flex;
    margin-top: 10px;
    .codeBtn {
      font-size: 13px;
      margin-left: 2px;
      margin: 0px;
      margin-left: 8px;
    }
  }
  .bthBox {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 15%;
    .previousStep {
      width: 35%;
      font-size: 1.3em;
    }
  }
  .verificationBthBox {
    width: 70%;
    display: flex;
    justify-content: left;
    .el-button.previousStep {
      min-width: 28%;
      background: #d0c4e8;
      color: #fff;
    }
    .el-button.confirmBtn {
      min-width: 60% ;
      background: #661fff;
      color: #fff;
      border: none;
    }
  }

  .table{
    box-shadow: 0px 3px 20px 1px #ccc;
  }

</style>