<template>
  <div class="personalMiningBox" v-loading="UrlListLoading">
    <section v-if="$isMobile">
      <div class="bthBox">
        <el-button class="addBth" @click="addTo"
          >+ {{ $t(`personal.establish`) }}</el-button
        >
        <span :disabled="checkedItems.length == 0">
          <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>
        </span>
      </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="operation" :title="$t(`personal.operation`)">{{
            $t(`personal.operation`)
          }}</span>
        </div>
        <el-collapse class="collapseBox" accordion>
          <el-collapse-item
            :name="item.key"
            v-for="item in readOnlyList"
            :key="item.key"
          >
            <template slot="title">
              <el-checkbox-group
                class="checkbox"
                v-model="checkedItems"
                @change="handleSingleCheckChange"
                style="width: 5%;"
              >
                <el-checkbox
                  class="addressBox"
                  :label="item.key"
                  v-model="checkedItems"
                >
                  <br />
                </el-checkbox>
              </el-checkbox-group>
              <div class="collapseTitle">
                <span class="miningAccount"> {{ item.account }}</span>
                <span class="currency2" :title="item.label"
                  ><img style="width: 20px" :src="item.img" alt="coin" loading="lazy" />
                  {{ item.label }}
                </span>
                <span class="operation" @click="handelSetUp(item)">
                  {{ $t(`personal.setUp`) }}
                </span>
              </div>
            </template>

            <section class="content">
              <div>
                <p>{{ $t(`personal.jurisdiction`) }} :</p>
                <p> <span class="permissionBlock">
                    <span
                      v-for="(subItem, index) in item.config"
                      class="miner"
                      :key="index"
                      >{{ $t(handelJurisdiction(subItem)) }}
                    </span></span
                  >
                </p>
              </div>
              <div class="link">
                <p>{{ $t(`personal.readOnlyLink`) }} :</p>
                <p>
               
                  <a :href="item.url">{{ item.url }}</a>
                  <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>
      <div class="paginationBox">
        <!-- style="margin-top: 10px;margin-bottom: 10px;"        -->
        <el-pagination 
                   
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              :page-sizes="[10, 50, 100, 400]"
              :page-size="10"
              layout="sizes, prev, pager, next"
              :total="TotalSize">
            </el-pagination>
      </div>

      
      
      
            <!-- <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-sizes="[10, 50, 100, 400]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="TotalSize"
        >
        </el-pagination> -->


    </section>

    <section v-else>
      <div class="headTitle">
        <i class="iconfont icon-yanjing ic"></i>
        <h2>{{ $t(`personal.readOnlyPage`) }}</h2>
      </div>
      <div class="operation">
        <div class="bthBox">
          <el-button class="addBth" @click="addTo"
            >+ {{ $t(`personal.establish`) }}</el-button
          >
          <span :disabled="checkedItems.length == 0">
            <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>
          </span>
        </div>
      </div>
      <div class="tableBox">
        <div class="tabTitle">
          <div class="checkbox">
            <el-checkbox
              v-model="checkAll"
              @change="handleCheckAllChange"
            ></el-checkbox>
          </div>
          <span>{{ $t(`personal.account`) }}</span>
          <span>{{ $t(`personal.jurisdiction`) }}</span>
          <span style="text-align:left">{{ $t(`personal.currency`) }}</span>
          <span>{{ $t(`personal.readOnlyLink`) }}</span>
          <span>{{ $t(`personal.remarks`) }}</span>
          <span>{{ $t(`personal.operation`) }}</span>
        </div>

        <ul>
          <!-- <li class="tabTitle">
              <div class="checkbox"><el-checkbox  v-model="checkAll" @change="handleCheckAllChange"></el-checkbox></div>
              <span>{{$t(`personal.account`)}}</span>
              <span>{{$t(`personal.jurisdiction`)}}</span>
              <span>{{$t(`personal.currency`)}}</span>
              <span>{{$t(`personal.readOnlyLink`)}}</span>
              <span>{{$t(`personal.remarks`)}}</span>
              <span>{{$t(`personal.operation`)}}</span>
            </li> -->
          <li v-for="item in readOnlyList" :key="item.key">
            <div class="checkbox">
              <el-checkbox-group
                v-model="checkedItems"
                @change="handleSingleCheckChange"
              >
                <el-checkbox
                  class="addressBox"
                  :label="item.key"
                  v-model="checkedItems"
                >
                  <br />
                </el-checkbox>
              </el-checkbox-group>
            </div>
            <span> {{ item.account }}</span>
            <span class="permissionBlock">
              <span
                v-for="(subItem, index) in item.config"
                class="miner"
                :key="index"
                >{{ $t(handelJurisdiction(subItem)) }}
              </span></span
            >

            <span class="coinBox">
              <img style="width: 20px;margin-right:5px;" :src="item.img" alt="coin" />
              {{ item.label }}</span
            >
            <span>
              <el-input
                :id="item.key"
                ref="inputRef"
                v-model="item.url"
                @click.native="handelCopy(item.key)"
              ></el-input
            ></span>
            <span :title="item.remark" style="padding-left: 8px;"> {{ item.remark }}</span>
            <span class="binding" @click="handelSetUp(item)"
              >{{ $t(`personal.setUp`) }}
            </span>
          </li>
        </ul>
      </div>
      <div class="paging">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-sizes="[10, 50, 100, 400]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="TotalSize"
        >
        </el-pagination>
      </div>
    </section>

    <el-dialog
      :visible.sync="dialogVisible"
      width="40%"
      @close="handleClose"
      :close-on-click-modal="false"
    >
      <section class="dialogBox">
     
        <div class="title">{{ $t(`personal.readOnlyPage`) }}</div>
        <div class="inputBox">
          <div class="inputItem">
            <span class="title">{{ $t(`personal.account`) }}</span>
            <!-- <el-input class="input" v-model="params.account"  :placeholder="$t(`personal.nameDescription`)"></el-input> -->
            <el-cascader
              :options="newMiningAccountList"
              ref="cascader"
              v-model="params.account"
              @change="handleChange"
              style="text-transform: uppercase;"
            >
              <template slot-scope="{ node, data }">
                <div class="cascaderBox">
              
                  <img style="width: 25px" :src="data.img"  />
                  <span>{{ data.label }}</span>
                  <span v-if="!node.isLeaf">
                    ({{ data.children.length }})
                  </span>
                </div>
              </template>
            </el-cascader>
          </div>
          <!-- <div class="inputItem">
                  <span class="title" >{{$t(`personal.currency`)}}</span>
                  <el-select v-model="params.coin" :placeholder="$t(`personal.select`)">
                      <el-option
                        v-for="item in currencyList"
                        :key="item.value"
                        :label="item.value"
                        :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.value }}</span>
                    </div>
                      </el-option>
                    </el-select>
  
                </div> -->
          <div class="inputItem">
            <span class="title">{{ $t(`personal.remarks`) }}</span>
            <el-input
              :title="$t(`personal.remarksDescription`)"
              class="input"
              v-model="params.remark"
              :placeholder="$t(`personal.remarksDescription`)"
            ></el-input>
          </div>
        </div>

        <div class="jurisdictionBox">
          <div>{{ $t(`personal.jurisdiction`) }}</div>
          <div>
            <el-checkbox-group v-model="checkList" class="checkboxS">
              <el-checkbox label="1" disabled>
                {{ $t(`personal.miner`) }}</el-checkbox
              >
              <el-checkbox label="2">{{ $t(`personal.profit`) }}</el-checkbox>
              <el-checkbox label="3">{{ $t(`personal.payment`) }}</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>

        <el-button
          :loading="establishLoading"
          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="handleClose"
      :close-on-click-modal="false"
    >
      <section class="dialogBox">
        <div class="title">{{ $t(`personal.readOnlyPage`) }}</div>
        <div class="inputBox">
          <div class="inputItem">
            <span class="title">{{ $t(`personal.account`) }}</span>
            <!-- <el-cascader :options="newMiningAccountList" ref="cascader" disabled v-model="dialogTitle"    >
                   <template slot-scope="{ node, data }">
                     <div class="cascaderBox">
                     <img style="width:25PX" :src="data.img" alt="">
                     <span >{{ data.label }}</span>
                     <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                   </div>
                   </template>
                 </el-cascader> -->

            <el-input
              :title="$t(`personal.account`)"
              class="input"
              disabled
              v-model="dialogTitle"
            ></el-input>
          </div>
          <!-- <div class="inputItem">
                 <span class="title" >{{$t(`personal.currency`)}}</span>
                 <el-select v-model="params.coin" :placeholder="$t(`personal.select`)">
                     <el-option
                       v-for="item in currencyList"
                       :key="item.value"
                       :label="item.value"
                       :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.value }}</span>
                   </div>
                     </el-option>
                   </el-select>
 
               </div> -->
          <div class="inputItem">
            <span class="title">{{ $t(`personal.remarks`) }}</span>
            <el-input
              :title="$t(`personal.remarksDescription`)"
              class="input"
              v-model="dialogData.remark"
              :placeholder="$t(`personal.remarksDescription`)"
            ></el-input>
          </div>
        </div>

        <div class="jurisdictionBox">
          <div>{{ $t(`personal.jurisdiction`) }}</div>
          <div>
            <el-checkbox-group v-model="dialogData.config" class="checkboxS">
              <el-checkbox label="1" disabled>
                {{ $t(`personal.miner`) }}</el-checkbox
              >
              <el-checkbox label="2">{{ $t(`personal.profit`) }}</el-checkbox>
              <el-checkbox label="3">{{ $t(`personal.payment`) }}</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>

        <el-button
          :loading="modifyLoading"
          style="width: 50%; font-size: 1.1em; margin-top: 30px"
          type="primary"
          @click="modifyInfo"
          >{{ $t(`personal.modify2`) }}</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: 0 !important;
  }

  
  .bthBox {
    display: flex;
    justify-content: left;
    .addBth {
      background: #651efe;
      color: #fff;
      padding: 13px 40px !important;
      border-radius: 10px !important;
    }
    .delBth {
      background: #ff4181;
      color: #fff;
      padding: 13px 40px !important;
      border-radius: 10px !important;
      margin-left: 18px;
    }
  }

  .tableBox{
    width: 100%;
    margin-top: 10px;
    box-shadow: 0px 0px 3px 2px #ccc;
    border-radius: 5px ;
  
   .collapseBox
   {    max-height: 600px ;
    overflow-y: auto;
      /* 隐藏滚动条 */
      scrollbar-width: none;
      -ms-overflow-style: none;
      border-right: none;
   }
    .tabTitle{
     
      
     display: flex;
     align-items: center;
     .checkbox{
      width: 45px;
     }
     .miningAccount{
      width: 42%;
      // background: palegoldenrod;
     }
     .currency{
      width: 42%;
      text-align: left;
      padding-left: 5px;
      // background: palegreen;
     }
     .operation{
      width: 100px;
      padding-left: 10px;
      // background: palevioletred;
     }
      span{
        // width: calc(95% /2) !important;
        font-size: 0.9rem !important;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }

    .collapseTitle{
      width: 100%;
      padding-left:0px;
      display: flex;
      span{
        // display: flex;
        display: inline-block;
        // width: calc(95% /3) !important;      
        align-items: center;
        text-align: center;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .miningAccount{
        width: 46%;
        // background: palegoldenrod;
      }
      .currency2{
        width: 45%;
        display: flex;
        line-height: 48px;
        // background: palegreen;
        img{
          margin-right: 5px;
        }
      }
      .operation{
        width: 90px;
        color: #661FFF;
      }

    }

    .content{
      width: 100%;
      padding: 10px 8px;
      background:#f0e9f5;
      padding-bottom: 25px;
     .remarks,.link{
      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: 10px ;
    }

   
  }
  .paginationBox{
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 18px 10px ;
  }

  .personalMiningBox .operation{
    margin-top: 0 !important;
  }


  .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: 20px;
  .headTitle {
    display: flex;
    // justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    h2 {
      color: #36246f;
    }
    i {
      font-size: 1.8em;
      margin-right: 5px;
      color: #36246f;
      font-weight: 600;
    }

    .Delete {
      width: 20%;

      display: flex;
      align-items: center;
      span {
        width: 40%;
        height: 35px;
        line-height: 35px;
        background: #edf2ff;
        margin-left: 3%;
        text-align: center;
        border: 1px solid #84a4ff;
        border-radius: 5px;
        cursor: pointer;
      }
      span:hover {
        border: 1px solid #0062cc;
      }
    }
  }
  .operation {
    // background: #69adf5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    .bthBox {
      .el-button {
        background: #edf2ff;
        padding: 10px 25px;
      }
      .addBth {
        padding: 10px 35px;
        border-radius: 25px;
        background: #661ffb;
        color: #fff;
      }
      .delBth {
        background: transparent;
        border: none;
      }
      .delBth:hover {
        color: #661ffb;
        font-weight: 600;
      }
    }
    .searchBox {
      width: 25%;

      border: 2px solid #641fff;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: 25px;
      overflow: hidden;
      .inout {
        border: none;
        outline: none;
        padding: 0px 10px;
        background: transparent;
      }
      i {
        width: 15%;
        height: 101%;
        background: #641fff;
        color: #fff;
        font-size: 1.2em;
        line-height: 25px;
        text-align: center;
      }
    }
  }
  .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: center;
        height: 55px;
        background: #efefef;
        .checkbox {
          width: 5%;
          text-align: center;
        }
        span {
          width: calc(90% / 5);
          height: 90%;
          text-align: center;
          line-height: 45px;
          font-size: 0.85rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .binding {
          color: #69adf5;
          cursor: pointer;
        }
        .binding:hover {
          color: #0974e7;
        }
        .permissionBlock {
          display: flex;
          align-items: center;
          justify-content: left;
          span {
            width: calc(100% / 4);
            // background: gray;
            line-height: 25px;
            height: 25px;
            // background: #E9F3FE;
            font-size: 0.8rem;
            // border-radius: 5PX;
            margin-left: 5px;
            color: #6440b9;
          }
        }
        .coinBox {
          display: flex;
          align-items: center;
          justify-content: left;
        
        }
      }
      li:nth-child(even) {
        background-color: #ffff; /* 甚至可以是你想要的任何颜色 */
      }
      .tabTitle {
        background: rgba(0, 0, 0, 0.05);
        background: #d2c3ea;
        color: #36246f;
      }
    }
  }
  .paging {
    width: 100%;
    display: flex;
    justify-content: center;
  }
}
.tabTitle {
  background: rgba(0, 0, 0, 0.05);
  background: #d2c3ea;
  color: #36246f;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 55px;
  margin-top: 10px;
  border-radius: 5px 5px 0px 0px;
  font-weight: 600;
  .checkbox {
    width: 5%;
    text-align: center;
  }
  span {
    width: calc(90% / 5);
    height: 90%;
    text-align: center;
    line-height: 55px;
  }
}

::v-deep .el-checkbox__input.is-disabled + span.el-checkbox__label {
  color: rgba(0, 0, 0, 0.6);
  color: #46a2ff;
}
.cascaderBox {
  // background: #0974e7;
  display: flex;
  align-items: center;
  img {
    margin-right: 5px;
  }
}
::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: 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;
      .el-checkbox {
        width: calc(100% / 3);
        font-weight: 600;
      }
    }
  }
}
::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;
}

::v-deep .el-cascader .el-input .el-input__inner{
  text-transform: capitalize;
}
</style>
  <style>
</style>