<template>
  <div class="miningReport" v-loading="apiPageLoading">

    <section v-if="$isMobile" class="miningMobile">
      
      <section class="contentBox">
      <div class="block">
        <div class="left">
          <i class="iconfont icon-baogao ic"></i>
          <div class="text">
            <span >API Tokens    <router-link class="jumpAPI" :to="`/${$i18n.locale}/apiFile`">{{ $t(`home.APIfile`) }}</router-link></span>
         
            <span class="describe"
              >Create an API token to access your M2pool data.
            </span>
          </div>
        </div>
       
      </div>
     
      <div class="bthBox">
          <el-button @click="RequestApiKey" class="bth"
            >Request a New Token</el-button
          >
          <el-popconfirm
      @confirm="deleteSelected"
        :confirm-button-text='$t(`personal.determine`)'
        :cancel-button-text='$t(`personal.Cancel`)'
        icon="el-icon-info"
        icon-color="red"
        :title="$t(`personal.deletePrompt`)"
      >
        <el-button slot="reference" class="delBth" :disabled="checkedItems.length ==0" >{{$t(`personal.delete`)}}</el-button>
      </el-popconfirm>

      
        </div>
    </section>

    <div class="tableBox">
        <div class="tabTitle2">
          <div class="checkbox">
            <el-checkbox
              v-model="checkAll"
              @change="handleCheckAllChange"
            ></el-checkbox>
          </div>
          <span class="miningAccount" :title="$t(`user.Account`)">{{
            $t(`user.Account`)
          }}</span>
          <span class="IP">IP</span>
          <span class="operation" :title="$t(`personal.operation`)">{{
            $t(`personal.operation`)
          }}</span>
        </div>  
        <el-collapse class="collapseBox" accordion>
          <el-collapse-item
            :name="item.id"
            v-for="item in apiList"
            :key="item.id"
          >
            <template slot="title">
              <el-checkbox-group
                class="checkbox"
                v-model="checkedItems"
                @change="handleSingleCheckChange"
              >
                <el-checkbox
                  class="addressBox"
                  :label="item.id"
                  v-model="checkedItems"
                >
                  <br />
                </el-checkbox>
              </el-checkbox-group>
              <div class="collapseTitle">
                <span class="user"> {{ item.user }}</span>
                <span class="IP" :title="item.ip"
                  >
                  {{ item.ip }}
                </span>
                <span class="operation"  @click="handelSetUp(item)">
                  {{ $t(`personal.setUp`) }}
                </span>
              </div>
            </template>

            <section class="content">
              <div>
                <p>{{ $t(`user.Account`) }} :</p>
                <p>  {{ item.user }}  </p>
             
              </div>
              <div>
                <p>IP :</p>
                <p>  {{ item.ip }} </p>
             
              </div>
              <div>
                <p>{{ $t(`personal.jurisdiction`) }} :</p>
                <p> <span class="permissionBlock">
                    <span
                      v-for="(subItem, index) in item.perms"
                      class="miner"
                      :key="index"
                      >{{ $t(handelJurisdiction(subItem)) }}
                    </span></span
                  >
                </p>
              </div>
              <div class="link">
                <p>API KEY :</p>
                <p>
                  <span :id="item.id">  {{ item.key }}</span>
                
                  <span class="copy"  @click="clickCopy(item)">{{
                    $t(`personal.copy`)
                  }}</span>
                </p>
              </div>
             
            </section>
          </el-collapse-item>
        </el-collapse>
      </div>



    </section>

    <section v-else>

      <div class="titleBox">
      <i class="iconfont icon-a-fenzhi1 ic"></i>
      <h2>API   </h2>
      <router-link class="jumpAPI" :to="`/${$i18n.locale}/apiFile`">{{ $t(`home.APIfile`) }}</router-link>
    </div>
    <section class="contentBox">
      <div class="block">
        <div class="left">
          <i class="iconfont icon-baogao ic"></i>
          <div class="text">
            <span style="font-size: 1.2em">API Tokens</span>
            <span class="describe"
              >Create an API token to access your M2pool data.
            </span>
          </div>
        </div>
        <div class="bthBox">
          <el-button @click="RequestApiKey" class="bth"
            >Request a New Token</el-button
          >

          <el-popconfirm
      @confirm="deleteSelected"
        :confirm-button-text='$t(`personal.determine`)'
        :cancel-button-text='$t(`personal.Cancel`)'
        icon="el-icon-info"
        icon-color="red"
        :title="$t(`personal.deletePrompt`)"
      >
        <el-button slot="reference" class="delBth" :disabled="checkedItems.length ==0" >{{$t(`personal.delete`)}}</el-button>
      </el-popconfirm>

      
        </div>
      </div>
    </section>
    <div class="tableBox">
      <div class="tabTitle">
        <div class="checkbox">
          <el-checkbox
            v-model="checkAll"
            @change="handleCheckAllChange"
          ></el-checkbox>
        </div>
        <span class="Account">{{ $t(`user.Account`) }}</span>
        <span class="permissionBlock">{{ $t(`personal.jurisdiction`) }}</span>
        <span class="IP">IP</span>
        <span class="apiKey">API KEY</span>
        <span class="binding">{{ $t(`personal.operation`) }}</span>
      </div>

      <ul>
        <li v-for="item in apiList" :key="item.id">
          <div class="checkbox">
         
            <el-checkbox-group
              v-model="checkedItems"
              @change="handleSingleCheckChange"
            >
              <el-checkbox
                class="addressBox"
                :label="item.id"
                v-model="checkedItems"
              >
                <br />
              </el-checkbox>
            </el-checkbox-group>
          </div>
          <span class="Account"> {{ item.user }}</span>
          <span class="permissionBlock">
            <span
              v-for="(subItem, index) in item.perms"
              class="miner"
              :key="index"
              >{{ $t(handelJurisdiction(subItem)) }}
            </span></span
          >

          <span class="IP">
            <!-- <img style="width: 20px" :src="item.img" alt="" /> -->
            {{ item.ip }}</span
          >
          <span class="apiKey" :title="$t(`personal.copy`)" @click="clickCopy(item)">          
            {{ item.key }}
        </span>
          <!-- <span> {{ item.remark }}</span> -->
          <span class="binding" @click="handelSetUp(item)"
            >{{ $t(`personal.setUp`) }}
          </span>
        </li>
      </ul>
    </div>

    </section>
 

    <el-dialog
      :visible.sync="dialogVisible"
      width="40%"
      :close-on-click-modal="false"
      @close="handelClose"
    >
      <section class="dialogBox">
        <div class="title">{{ $t(`personal.apiKey`) }}</div>

        <div class="inputBox">
          <div class="inputItem">
            <span class="title">IP</span>
            <el-input
              class="input"
              v-model="params.ip"            
              :placeholder="$t(`personal.ipAddress`)"
            ></el-input>
          </div>
          <el-checkbox style="margin-top: 5px" label="ip" v-model="checkIp">{{
            $t(`personal.defaultIp`)
          }}</el-checkbox>
        </div>

        <div class="jurisdictionBox">
          <div>{{ $t(`personal.jurisdiction`) }}</div>
          <div>
            <el-checkbox-group v-model="checkList" class="checkboxS">
              <el-checkbox label="miner">
                {{ $t(`personal.miner`) }}</el-checkbox
              >
              <el-checkbox label="account">{{
                $t(`personal.miningAccount`)
              }}</el-checkbox>
              <el-checkbox label="pool">{{
                $t(`personal.miningPool`)
              }}</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>

        <el-button
          :loading="ApiKeyLoading"
          style="width: 50%; font-size: 1.1em; margin-top: 30px"
          type="primary"
          @click="confirmAddition"
          >{{ $t(`personal.confirm`) }}</el-button
        >
      </section>
    </el-dialog>

    <el-dialog
      :visible.sync="modifyDialogVisible"
      width="40%"
      :close-on-click-modal="false"
    >
      <section class="dialogBox">
        <div class="title">{{ $t(`personal.apiKey`) }}</div>

        <div class="inputBox">
          <div class="inputItem">
            <span class="title">IP</span>
            <el-input
              class="input"
              v-model="apiInfo.ip"
              :placeholder="$t(`personal.ipAddress`)"
            ></el-input>
          </div>
          <el-checkbox style="margin-top: 5px" label="ip" v-model="infoCheckIp">{{
            $t(`personal.defaultIp`)
          }}</el-checkbox>
        </div>

        <div class="jurisdictionBox">
          <div>{{ $t(`personal.jurisdiction`) }}</div>
          <div>
            <el-checkbox-group v-model="apiInfo.perms" class="checkboxS">
              <el-checkbox label="miner">
                {{ $t(`personal.miner`) }}</el-checkbox
              >
              <el-checkbox label="account">{{
                $t(`personal.miningAccount`)
              }}</el-checkbox>
              <el-checkbox label="pool">{{
                $t(`personal.miningPool`)
              }}</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>

        <el-button
          :loading="ApiKeyLoading"
          style="width: 50%; font-size: 1.1em; margin-top: 30px"
          type="primary"
          @click="modifyInformation"
          >{{ $t(`personal.confirm`) }}</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) {
  .miningMobile{
    min-height: 400px;
  }
  .miningReport{
    padding: 0px !important;
  } 

  .block{
    padding: 0 !important;
    height: 80px !important;
    margin: 0 !important;
    border: none !important;

    .ic{
      font-size: 1.5rem !important;
    }
    .text{
      .jumpAPI{
        display: inline-block;
        font-size: 0.9rem;
        color: #6440b9;
        margin-left: 8px;
      }
  
      span:nth-of-type(2){
        font-size: 0.9rem !important;
      }
    }

  }
  .bthBox{
    width: 100%;
    .el-button{
      padding: 8px 15px;
    }
    .delBth{
      margin-left: 10px;
    }
  }

  .tableBox{
    width: 100%;
    margin-top: 10px;
    box-shadow: 0px 0px 3px 2px #ccc;
    border-radius: 5px ;
  .checkbox{
    width: 100px !important;
    // background: red;
  }
   .collapseBox
   {    max-height: 600px ;
    overflow-y: auto;
      /* 隐藏滚动条 */
      scrollbar-width: none;
      -ms-overflow-style: none;
      border-right: none;
      .checkbox{
        width: 19px !important;
     
        
      }
   }
    .tabTitle2{
     
     display: flex;
     align-items: center;
      background: #D2C4E8;
      height: 50px;
      color: #36246F;
      font-weight: 600;
      padding-right: 8px;
      padding-left: 5px;
      span{
        font-size: 0.9rem !important;
        text-overflow: ellipsis;
        overflow: hidden;
        display: inline-block;
        margin-left: 6px ;
      
        
      }
      .checkbox{
        width: 25px !important;
      }
      .miningAccount{
        width: 45% !important;
        // background: palegreen;
        overflow: hidden;
      }
      .IP{
        width: 45% !important;
        // background: paleturquoise;
      }
   
     .operation{
      width:110px !important;
      // padding-left: 10px;
      // background: palevioletred;
      text-align: left !important;
     }
     
    }

    .collapseTitle{
      width: 100%;
      padding-left:0px;
      display: flex;
      span{
        // display: flex;
        display: inline-block;
        // width: calc(95% /2) !important;      
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-left: 3px !important;
      }
      .user{
        min-width: 110px;
        width: 45% !important;
        text-overflow: ellipsis;
        overflow: hidden;
        // background: palegreen;
      }
      .IP{
        min-width: 100px;
        width:45% !important;
        // background: paleturquoise;
      
      }
      .operation{
        width: 110px !important;
        color: #661FFF;
        text-align: left;
        padding-left: 15px !important;

      }

    }

    .content{
      width: 100%;
      padding: 10px 8px;
      background:#f0e9f5;
      padding-bottom: 25px;
      div{
        margin-top: 10px;
        p:nth-of-type(1){
          font-weight: 600;
        }
      }
      p{
        word-wrap: break-word;
        width: 100%;
        .copy{
        padding: 0px 5px;
        display: inline-block;
        cursor: pointer;
        border:1px solid #D1C2E9;
        border-radius: 5px;
        margin-left: 10px;
        font-size: 0.8rem;
      }
      a{
        color: #6D5C9B;
      }
      }

      .permissionBlock{
        width: 100%;

        span{
          display: inline-block;
          background: #D2C3EA;
          padding: 3px 12px ;
          border-radius: 5px ;
          font-size: 0.8rem;
          margin-left: 8px;
        }
        
     
      
      
      }
    }

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

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

    .tableBox{
    width: 100%;
    margin-top: 10px;
    box-shadow: 0px 0px 3px 2px #ccc;
    border-radius: 5px ;
  .checkbox{
    width: 100px !important;
    // background: red;
  }
   .collapseBox
   {    max-height: 600px ;
    overflow-y: auto;
      /* 隐藏滚动条 */
      scrollbar-width: none;
      -ms-overflow-style: none;
      border-right: none;
      .checkbox{
        width: 19px !important;
     
        
      }
   }
    .tabTitle2{
     
     display: flex;
     align-items: center;
      background: #D2C4E8;
      height: 50px;
      color: #36246F;
      font-weight: 600;
      padding-right: 8px;
      padding-left: 5px;
      span{
        font-size: 0.9rem !important;
        text-overflow: ellipsis;
        overflow: hidden;
        display: inline-block;
        margin-left: 6px ;
      
        
      }
      .checkbox{
        width: 25px !important;
      }
      .miningAccount{
        width: 45% !important;
        // background: palegreen;
        overflow: hidden;
      }
      .IP{
        width: 45% !important;
        // background: paleturquoise;
      }
   
     .operation{
      width:110px !important;
      // padding-left: 10px;
      // background: palevioletred;
      text-align: center !important;
     }
     
    }

    .collapseTitle{
      width: 100%;
      padding-left:0px;
      display: flex;
      overflow: hidden;
      span{
        // display: flex;
        display: inline-block;
        // width: calc(95% /2) !important;      
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-left: 3px !important;
      }
      .user{
        min-width: 110px;
        width: 45% !important;
        text-overflow: ellipsis;
        overflow: hidden;
        // background: palegreen;
      }
      .IP{
        min-width: 100px;
        width:40% !important;
        // background: paleturquoise;
      
      }
      .operation{
        width: 110px !important;
        color: #661FFF;
        text-align: center;

      }

    }

    .content{
      width: 100%;
      padding: 10px 8px;
      background:#f0e9f5;
      padding-bottom: 25px;
      div{
        margin-top: 10px;
        p:nth-of-type(1){
          font-weight: 600;
        }
      }
      p{
        word-wrap: break-word;
        width: 100%;
        .copy{
        padding: 0px 5px;
        display: inline-block;
        cursor: pointer;
        border:1px solid #D1C2E9;
        border-radius: 5px;
        margin-left: 10px;
        font-size: 0.8rem;
      }
      a{
        color: #6D5C9B;
      }
      }

      .permissionBlock{
        width: 100%;

        span{
          display: inline-block;
          background: #D2C3EA;
          padding: 3px 12px ;
          border-radius: 5px ;
          font-size: 0.8rem;
          margin-left: 8px;
        }
        
     
      
      
      }
    }

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

    ::v-deep .el-collapse-item__content{
     padding: 0 !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;
    }

}



.dialogBox {
  padding: 0px 20px;
  padding-bottom: 20px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  .title {
    width: 100%;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
  }
  .inputBox {
    width: 70%;
    margin-top: 20px;
    margin: 30px 0px;
    .inputItem {
      margin-top: 30px;
      display: flex;
      flex-direction: column;
      align-items: left;
      justify-content: left;
    }
    .title {
      font-size: 1.1em;
      text-align: left;
      margin-bottom: 10px;
    }
    // .input{
    //   margin-top: 10PX;

    // }
  }
  .el-button {
    background: #661fff;
    color: #edf2ff;
    border: none;
    outline: none;
  }
  .jurisdictionBox {
    width: 70%;
    height: 50px;
    .checkboxS {
      margin-top: 10px;
      display: flex;
      flex-wrap: wrap;
      .el-checkbox {
        width: calc(100% / 3);
        font-weight: 600;
      }
    }
  }
}

.tableBox {
  // height: 400PX;
  // background: #0974e7;
  font-size: 0.95rem;
  ul {
    width: 100%;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    height: 370px;
    overflow-y: auto;
    margin: 0;
    margin-bottom: 10px;
    //隐藏滚动条
    scrollbar-width: none;
    -ms-overflow-style: none;
    border-right: none;

    li {
      list-style: none;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: left;
      height: 55px;
      background: #efefef;
      span {
        // width: calc(98% / 6);
        height: 90%;
        text-align: left;
        line-height: 55px;
        margin-left: 5px;     
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .checkbox {
        width: 4% !important;
        padding-left: 6px;
        overflow: hidden;
      }
      // span {
      //   width: calc(98% / 5);

      //   height: 90%;
      //   text-align: left;
      //   line-height: 45px;
      //   font-size: 0.85rem;
      //   margin-left: 5px;
      // }

  .Account{
    width: 21% !important;
    // background: paleturquoise;
  }
  .checkbox {
    width: 4%;
    text-align: center;
  }
  .permissionBlock {
        width: 25% !important;
        display: flex;
        align-items: center;
        justify-content: left;
        span {
          display: inline-block;
          width: 55px;
          //  background: #2889fc;
          // background: gray;
          line-height: 25px;
          height: 25px;
          // background: #E9F3FE;
          font-size: 0.8rem;
          // border-radius: 5PX;
          margin-left: 5px;
          color: #6440b9;
        }
      }
  .IP{
    width: 20% !important;
    // background: rgb(230, 30, 96);
  }
  .apiKey {
    width: 35% !important;
    // background: rgb(170, 107, 128);
  }


  .binding {
    width: 100px !important;
    text-align: center;
    padding-right: 10px;
    color: #69adf5;
    cursor: pointer;
  }
      // .Account{
      //   width: 20%;
      //   background: palegoldenrod;
      // }
      // .binding {
      //   width: 130px;
      //   color: #69adf5;
      //   cursor: pointer;
      //   text-align: center;
      //   padding-right: 10px;
      // }
      .binding:hover {
        color: #0974e7;
      }
  
    
      // .apiKey {
      //   width: 290px;
      //   overflow: hidden;
      //   text-overflow: ellipsis;
      //   cursor: pointer;
      // }
      .apiKey:hover{
        font-weight: 600;
      }
    }
    li:nth-child(even) {
      background-color: #ffff; /* 甚至可以是你想要的任何颜色 */
    }
    .tabTitle {
      background: rgba(0, 0, 0, 0.05);
      background: #d2c3ea;
      color: #36246f;
    }
  }
}
.delBth {
  background: transparent;
  // border: none;
  padding: 5px 18px;
}
.delBth:hover {
  color: #661ffb;
  font-weight: 600;
}
.tabTitle {
  background: rgba(0, 0, 0, 0.05);
  background: #d2c3ea;
  color: #36246f;
  display: flex;
  align-items: center;
  justify-content: left;
  height: 55px;
  margin-top: 10px;
  border-radius: 5px 5px 0px 0px;
  font-weight: 600;
  // background: palegoldenrod;
  .Account{
    width: 21.5%;
    // background: paleturquoise;
  }
  .checkbox {
    width: 4% !important;
    text-align: center;
  }
  .permissionBlock {
    width: 25% !important;
    // background: palevioletred;
  }
  .IP{
    width: 20% !important;
    // background: rgb(230, 30, 96);
  }
  .apiKey {
    width: 35% !important;
    // background: rgb(170, 107, 128);
  }


  .binding {
    width: 105px !important;
    text-align: center;
    padding-right: 10px;
  }
  span {
    // width: calc(98% / 5);
    height: 90%;
    text-align: left;
    line-height: 55px;
    margin-left: 5px;
    padding-left: 5px;
    overflow: hidden;
  }
}

::v-deep .el-dialog {
  background: #fff;
  background-image: url(../../../assets/img/dialog2.png);
  background-size: cover;
  background-repeat: no-repeat;
  // background-position: 100% 120%;
  border-radius: 32px;
}
.miningReport {
  width: 100%;
  padding: 20px;
  .titleBox {
    display: flex;
    align-items: center;
    h2 {
      color: #36246f;
    }
    .jumpAPI{
      width: 100%;
      margin-left: 18px;
      font-size: 0.9rem;
      color: #4d2eb4;
    }
    .jumpAPI:hover{
      color: #4d2eb4;
      font-weight: 600;
    }
  }
  .ic {
    font-size: 1.8em;
    margin-right: 5px;
    color: #36246f;
    font-weight: 600;
  }
  .contentBox {
    width: 100%;
    .block {
      width: 95%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      border: 1px solid rgba(0, 0, 0, 0.1);
      padding: 20px 50px;
      height: 130px;
      border-radius: 5px;
      margin-top: 30px;
      .left {
        display: flex;

        height: 50px;
        .text {
          display: flex;
          flex-direction: column;
          height: 100%;
          justify-content: space-between;
          // background: gold;
          margin-left: 10px;
          .describe {
            color: rgba(0, 0, 0, 0.5);
            .see {
              color: #2889fc;
              cursor: pointer;
            }
          }
        }
      }
      .bth {
        padding: 5px 10px;
        background: #edf2ff;
        border: 1px solid #8dabff;
        color: #2889fc;
        margin-right: 8px;
      }
    }
  }
}


::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;
  }
</style>