<template>
  <div class="rate">
    <section v-if="$isMobile" class="rateMobile">
      <!-- <h4>{{$t(`course.rateRelated`)}}</h4>
        <div class="tableBox" >
        <div class="table-title">
          <span :title="$t(`course.currency`)">{{$t(`course.currency`)}}</span>
          <span :title="$t(`course.miningFeeRate`)" >{{$t(`course.miningFeeRate`)}}</span>             
        </div>
        <el-collapse accordion>     
            <el-collapse-item v-for="item in rateList" :key="item.value" :name="item.value" >
                <template slot="title">
                    <div class="collapseTitle">
                     <span ><img :src="item.img" alt="coin" loading="lazy"> {{item.label}}</span>
                     <span >{{item.rate}}</span>
                    </div>
              </template>
              <section class="contentBox2">
                <div class="belowTable">
              <div >
              <p>{{$t(`course.minimumPaymentAmount`)}}</p>
              <p >{{item.quota}} </p>
            </div>
           
            </div>
            
            <div class="belowTable">
              <div>
                <p>{{$t(`course.settlementMode`)}}</p>
                <p>{{item.mode}}</p>
              </div>
             
            </div>


            <div class="belowTable">
              <div>
                <p>{{$t(`course.miningAddress`)}}</p>
                <p>{{item.address}} </p>
              </div>
             
             
            </div>
              </section>
          
          
            </el-collapse-item>
          
          </el-collapse>
    
   

      </div> -->
      <section class="leftMenu"  v-loading="rateLoading" v-if="!contentShow">
        <ul>
          <li
            v-for="item in navList"
            :class="{ navActive: String(item.id) === String(DetailsParams.id) }"
            :key="item.id"
            @click="clickJump(item)"
          >
            {{ item.title }}
          </li>
        </ul>
      </section>

      <section class="rightText" v-else>
        <p class="backMenu" @click="backMenu">{{ $t("apiFile.backMenu") || "返回目录" }} </p>

        <section class="rightContent">
          <div v-if="rateLoading" class="loading-container">
            <span class="loading-text">{{
              $t("home.loadingContent") || "正在加载内容..."
            }}</span>
          </div>
          <div
            v-else-if="info && info.trim()"
            class="dynamic-content"
            v-html="info"
          ></div>
          <div v-else class="no-content">
            <p>{{ $t("home.noContent") || "暂无内容" }}</p>
          </div>
        </section>
      </section>
    </section>

    <section class="rateBox" v-else>
      <section class="leftMenu">
        <!-- <ul>
              <li>{{$t(`course.rateRelated`)}}</li>
            </ul> -->

        <ul>
          <li
            v-for="item in navList"
            :class="{ navActive: String(item.id) === String(DetailsParams.id) }"
            :key="item.id"
            @click="clickJump(item)"
          >
            {{ item.title }}
          </li>
        </ul>
      </section>
      <section class="rightText">
        <section class="rightContent">
          <div v-if="rateLoading" class="loading-container">
            <span class="loading-text">{{
              $t("home.loadingContent") || "正在加载内容..."
            }}</span>
          </div>
          <div
            v-else-if="info && info.trim()"
            class="dynamic-content"
            v-html="info"
          ></div>
          <div v-else class="no-content">
            <p>{{ $t("home.noContent") || "暂无内容" }}</p>
          </div>
        </section>

        <!-- ----------------------------- -->
        <!-- <h2>{{$t(`course.rateRelated`)}}</h2>
            <section class="table">
              <div class="tableTitle">
                <span>{{$t(`course.currency`)}}</span>
                <span>{{$t(`course.miningAddress`)}}</span>
                <span>{{$t(`course.miningFeeRate`)}}</span>
                <span>{{$t(`course.settlementMode`)}}</span>
                <span>{{$t(`course.minimumPaymentAmount`)}}</span>
              </div>
              <ul>
                <li v-for="item in rateList" :key="item.value">
                  <span class="coin"><img :src="item.img" alt="coin" loading="lazy"> {{item.label}}</span>
                  <span>{{item.address}}</span>
                  <span >{{item.rate}}</span>
                  <span>{{item.mode}}</span>
                  <span>{{item.quota}}</span>
                </li>
               
               
              </ul>
            </section> -->
      </section>
    </section>
  </div>
</template>

<script>
import IndexJs from "./index";
export default {
  metaInfo: {
    meta: [
      {
        name: "keywords",
        content:
          "费率页面,挖矿费率,收益计算,全网最低费率,Rate Page,Mining Rates,Revenue Calculation,Lowest Rates on the Net",
      },
      {
        name: "description",
        content: window.vm.$t(`seo.rate`),
      },
    ],
  },
  mixins: [IndexJs],
};
</script>

<style scoped lang="scss">
// 手机端适配
@media screen and (min-width: 220px) and (max-width: 1279px) {
  .rate {
    min-height: 360px !important;
    background: transparent !important;
    padding-top: 20px !important;
  }
  .rateMobile {
    padding: 10px;
    .leftMenu ul {
      margin-top: 30px !important;
      max-height: 500px !important;
      overflow-y: auto !important;
    }
    .leftMenu ul li {
      font-size: 0.9rem !important;
      padding: 10px !important;
      border-radius: 10px !important;
      background: rgba(91, 33, 182, 0.06) !important; /* 淡紫块，提高可读性 */
      border: 1px solid #ede9fe !important;
      text-decoration: none !important;
      transition: background 0.2s ease, transform 0.1s ease;
    }
    .leftMenu ul li:hover {
      background: rgba(91, 33, 182, 0.12) !important;
      transform: translateY(-1px);
    }
  }
  .backMenu{
    position: sticky;
    top: 8px;
    z-index: 5;
    color: #5b21b6;
    font-size: 0.95rem !important;
    margin: 0 0 10px 2px !important;
    display: inline-block !important;
    text-decoration: none;
    cursor: pointer;
    background: rgba(255,255,255,0.9);
    border: 1px solid #ede9fe;
    padding: 6px 10px;
    border-radius: 999px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
  }

  .rightContent .dynamic-content {
    overflow-x: auto !important; /* 超出时允许横向滚动（兜底） */
    -webkit-overflow-scrolling: touch;
  }
  .rightContent .dynamic-content :deep(table) {
    /* 对含有 colspan/rowspan 的表格，固定布局会引发表头与列错位，这里改为自动布局 */
    table-layout: auto !important;
    width: 100% !important;
    border-collapse: collapse !important;
  }
  .rightContent .dynamic-content :deep(th),
  .rightContent .dynamic-content :deep(td) {
    // word-break: break-word !important;
    white-space: normal !important;
    padding: 2px !important;
    font-size: 0.7rem !important; /* 表格单元格字号 */
    min-width: 0 !important; /* 覆盖外层全局 td 的最小宽度，避免小屏列被强撑导致错位 */
    vertical-align: left !important;
  }
  /* 步骤里的段落在移动端必须自动换行，禁止引发横向滚动条 */
  .rightContent .dynamic-content :deep(p) {
    max-width: 100% !important;
    white-space: normal !important;
    word-break: break-word !important; /* 优先按单词/字符断行 */
    overflow-wrap: anywhere !important; /* 极端长串也强制换行 */
    word-wrap: break-word !important; /* 旧版兼容 */
    font-size: 0.8rem !important;
  }
  .rightContent .dynamic-content :deep(a) {
    font-size: 0.7rem !important;
  }
  .rightContent .dynamic-content :deep(li) {
    font-size: 0.7rem !important;
  }

  .rightContent .dynamic-content :deep(pre) {
    font-size: 0.7rem !important;
  }

  .rightContent .dynamic-content :deep(font) {
    font-size: 0.7rem !important;
    min-width: 40px !important;
    display: inline-block !important;
  }
  .rightContent .dynamic-content :deep(h2) {
    font-size: 1rem !important;
  }

  .rightContent .dynamic-content :deep(h3) {
    font-size: 0.9rem !important;
  }


  h4 {
    color: rgba(0, 0, 0, 0.8);
    padding-left: 5%;
  }
  .tableBox {
    margin: 0 auto;
    width: 98%;
    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;
    .table-title {
      height: 50px;
      background: #d2c4e8;
      display: flex;
      justify-content: space-around;
      align-items: center;
      font-weight: 600;
      padding-left: 0 !important;
      span {
        text-align: center;
      }
      span:nth-of-type(1) {
        width: 30% !important;
      }
      span:nth-of-type(2) {
        width: 70% !important;
      }
    }
    .collapseTitle {
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding-left: 0 !important;
      font-size: 0.95rem !important;
      span {
        text-align: center;
      }
      span:nth-of-type(1) {
        width: 40% !important;
        display: flex;
        align-items: center;
        justify-content: left;
        padding-left: 4%;
        img {
          width: 20px;
          margin-right: 5px;
        }
      }
      span:nth-of-type(2) {
        width: 60% !important;
      }
    }

    ::v-deep .el-collapse-item__wrap {
      background: #f0e9f5;
    }
    .belowTable {
      margin-top: 8px;

      div {
        width: 50%;
        height: auto;
        text-align: left;
        padding-left: 8%;
        font-size: 0.85rem !important;
        p:nth-of-type(1) {
          font-weight: 600;
        }
      }
    }

    .paginationBox {
      text-align: center;
    }
  }
}

.rate {
  width: 100%;
  min-height: 600px;
  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;
  font-size: 0.9rem;
}

.rateBox {
  width: 80%;
  margin: 0 auto;
  min-height: 700px;
  display: flex;
  justify-content: center;

  border-radius: 8px;
  overflow: hidden;
  padding: 20px;
  transition: 0.3s linear;

  .leftMenu {
    width: 18%;
    text-align: center;
    margin-right: 2%;
    padding-top: 50px;
    box-sizing: border-box;
    box-shadow: 0px 0px 5px 2px #ccc;
    border-radius: 8px;
    overflow: hidden;
    padding: 10px;
    ul {
      padding: 0;
      margin: 0;
      li {
        width: 100%;
        list-style: none;
        min-height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 10px;
        border-radius: 5px;
        background: rgba(210, 195, 234, 0.3);

        width: 90%;
        padding: 8px 8px;
        font-size: 0.9rem;
        text-align: left;
        cursor: pointer;
        &:hover {
          background: #d2c3ea;
        }
      }
    }
  }

  .rightText {
    box-sizing: border-box;
    width: 80%;
    box-shadow: 0px 0px 5px 2px #ccc;
    border-radius: 8px;
    overflow: hidden;
    padding: 10px;
    text-align: center;
    padding-top: 30px;
    background: #fff;
    padding: 20px;
    h2 {
      text-align: left;
      padding-left: 50px;
      margin-bottom: 20px;
    }

    .table {
      width: 100%;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }
    .tableTitle {
      width: 90%;

      display: flex;
      align-items: center;
      height: 60px;
      background: #d2c3ea;
      border-radius: 5px 5px 0px 0px;
      span {
        display: inline-block;
        width: calc(100% / 5);
        text-align: center;
      }
    }
    ul {
      width: 90%;

      padding: 0;
      margin: 0;
      display: flex;
      justify-content: center;
      flex-direction: column;

      li {
        width: 100%;
        list-style: none;
        display: flex;
        align-items: center;
        height: 50px;
        background: #f8f8fa;
        margin-top: 8px;
        font-size: 0.95rem;
        span {
          display: inline-block;
          width: calc(100% / 5);
          text-align: center;
        }
        .coin {
          display: flex;
          justify-content: left;
          align-items: center;
          padding-left: 4%;
          text-transform: uppercase;
          img {
            width: 22px;
            margin-right: 5px;
          }
        }
      }
      // li:nth-child(even) {
      //         background-color: #ffff; /* 甚至可以是你想要的任何颜色 */
      //     }
    }
  }
}

.dynamic-content {
  width: 100%;
  margin: 0 auto;
  font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #222;
  // 富文本样式
  :deep(table) {
    border-collapse: collapse;
    width: 100%;
    margin: 16px 0;
  }

  :deep(th),
  :deep(td) {
    border: 1px solid #d1d5db;
    padding: 8px 8px;
    text-align: left;
  }
  :deep(th) {
    background: #d2c3ea;
    font-weight: bold;
  }
  :deep(strong),
  :deep(b) {
    font-weight: bold !important;
    color: inherit !important;
    font-style: normal !important;
  }
  :deep(em),
  :deep(i) {
    font-style: italic !important;
    color: inherit !important;
  }
  :deep(a) {
    color: #661ffb !important;
    text-decoration: none !important;
    &:hover {
      text-decoration: underline !important;
    }
  }
}

.navActive {
  background: #ac85e0 !important;
}
</style>