<template>
  <div>
    <div class="pricing_view">
      <div class="pricing_view_tabs_content">
        <div class="pricing_disp">
          <div
            v-for="item in pricing_view_tabs_list"
            :key="item.index"
            class="pricing_view_tabs_title"
            @click="tabsIActck(item.index)"
          >
            <div class="item_img"><img :src="item.img" alt=""/></div>
            <div
              class="item_title"
              :class="{ 'blue-text': tabsIndex === item.index }"
            >
              {{ item.title }}
            </div>
          </div>
        </div>
        <div v-if="showHomeAndroid == true">
          <van-swipe
            v-for="item in pricing_view_tabs_list"
            :key="item.index"
            class="pricing_view_tabs_content_mini"
            v-if="item.index === tabsIndex"
            :loop="false"
            :width="230"
          >
            <van-swipe-item
              v-for="i in item.childer"
              :key="i.index"
              :class="['item', item.index === '2' ? 'server_item' : '']"
              class="item"
            >
              <div>
                <div class="region">{{ i.region }}</div>
                <div class="server">{{ i.server }}</div>
                <div class="price">
                  $<span>{{ i.price }}</span
                >/ 月
                </div>
                <div v-if="item.index != '4'" class="originalPrice">
                  {{ i.originalPrice }}
                </div>
                <div
                  v-if="item.index == '3' || item.index == '4'"
                  class="contact_btn_box"
                >
                  <div class="contact_btn">
                    <a :href="i.url"
                    >
                      <div style="height: 100%; width: 100%">
                        {{ i.childer[i.currentSpecIndex].btn }}
                      </div>
                    </a
                    >
                  </div>
                </div>

                <div v-else class="carousel">
                  <div
                    class="left_go"
                    :class="['left_go', item.index === '2' ? 'left_go2' : '']"
                    @click="prevSpec(item.index, i.index)"
                  >
                    <a><img src="@/assets/pricing/left_go.png" alt=""/></a>
                  </div>
                  <div
                    class="specs_desc_box"
                    :class="[
                      'specs_desc_box',
                      item.index === '2' ? 'specs_desc_box2' : '',
                    ]"
                  >
                    <div>{{ i.childer[i.currentSpecIndex].specs }}</div>
                    <div>{{ i.childer[i.currentSpecIndex].daikuan }}</div>
                    <div>{{ i.childer[i.currentSpecIndex].dataDisk }}</div>
                    <div>{{ i.childer[i.currentSpecIndex].dataTraffic }}</div>
                    <div>
                      {{ i.childer[i.currentSpecIndex].pricingModel }}
                    </div>
                  </div>
                  <div
                    class="right_go"
                    :class="['right_go', item.index === '2' ? 'right_go2' : '']"
                    @click="nextSpec(item.index, i.index)"
                  >
                    <a><img src="@/assets/pricing/right_go.png" alt=""/></a>
                  </div>
                </div>
              </div>
            </van-swipe-item>
          </van-swipe>
        </div>
        <div v-if="showHomeAndroid == false">
          <div
            v-for="item in pricing_view_tabs_list"
            :key="item.index"
            class="pricing_view_tabs_content_mini"
            :class="['pricing_view_tabs_content_mini', item.index === '2' ? 'server_width' : '']"
            v-if="item.index === tabsIndex"
          >
            <div
              v-for="i in item.childer"
              :key="i.index"
              class="item"
              :class="['item', item.index === '2' ? 'server_item' : '']"
            >
              <div class="region">{{ i.region }}</div>
              <div class="server">{{ i.server }}</div>
              <div class="price">
                $<span>{{ i.price }}</span
              >/ 月
              </div>
              <div v-if="item.index != '4'" class="originalPrice">
                {{ i.originalPrice }}
              </div>
              <div
                v-if="item.index == '3' || item.index == '4'"
                class="contact_btn_box"
              >
                <div class="contact_btn">
                  <a :href="i.childer[i.currentSpecIndex].url"
                  >
                    <div style="height: 100%; width: 100%">
                      {{ i.childer[i.currentSpecIndex].btn }}
                    </div>
                  </a
                  >
                </div>
              </div>

              <div v-else class="carousel">
                <div
                  class="left_go"
                  :class="['left_go', item.index === '2' ? 'left_go2' : '']"
                  @click="prevSpec(item.index, i.index)"
                >
                  <a><img src="@/assets/pricing/left_go.png" alt=""/></a>
                </div>
                <div
                  class="specs_desc_box"
                  :class="[
                    'specs_desc_box',
                    item.index === '2' ? 'specs_desc_box2' : '',
                  ]"
                >
                  <div>{{ i.childer[i.currentSpecIndex].specs }}</div>
                  <div>{{ i.childer[i.currentSpecIndex].daikuan }}</div>
                  <div>{{ i.childer[i.currentSpecIndex].dataDisk }}</div>
                  <div>{{ i.childer[i.currentSpecIndex].dataTraffic }}</div>
                  <div>{{ i.childer[i.currentSpecIndex].pricingModel }}</div>
                </div>
                <div
                  class="right_go"
                  :class="['right_go', item.index === '2' ? 'right_go2' : '']"
                  @click="nextSpec(item.index, i.index)"
                >
                  <a><img src="@/assets/pricing/right_go.png" alt=""/></a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="showHomeAndroid == false" class="pricing_view_tabs_content2">
        <div class="pricing_view_tabs_content2_title">
          <div
            v-for="item in pricing_view_tabs_list2"
            @click="tabsIActck2(item.index)"
            class="item"
            :class="['item', item.index === tabsIndex2 ? 'item2' : '']"
          >
            {{ item.title }}
          </div>
        </div>
        <div class="pricing_view_tabs_content2_bar"></div>
        <div
          v-for="item in pricing_view_tabs_list2"
          v-if="item.index == tabsIndex2"
          class="pricing_view_tabs_content2_desc"
        >
          <div v-for="i in item.childer" class="item">
            <div class="item_mini">
              <div class="name">{{ i.name }}</div>
              <div class="btn">
                <a :href="i.url"
                >
                  <div>{{ i.btn }}</div>
                </a
                >
              </div>
              <div class="img"><img :src="i.img" alt=""/></div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="showHomeAndroid == true" class="pricing_view_tabs_content2">
        <van-swipe
          v-for="item in pricing_view_tabs_list"
          :key="item.index"
          class="pricing_view_tabs_content2_title"
          v-if="item.index === tabsIndex"
          :loop="false"
          :width="80"
        >
          <van-swipe-item
            v-for="item in pricing_view_tabs_list2"
            @click="tabsIActck2(item.index)"
            class="item"
            :class="['item', item.index === tabsIndex2 ? 'item2' : '']"
            :key="item.index + item.title"
          >
            {{ item.title }}
          </van-swipe-item>
        </van-swipe>
        <!-- <div class="pricing_view_tabs_content2_bar"></div> -->
        <van-swipe
          v-for="item in pricing_view_tabs_list2"
          v-if="item.index == tabsIndex2"
          :key="item.index"
          class="pricing_view_tabs_content2_desc"
          :loop="false"
          :width="250"
        >
          <van-swipe-item
            v-for="i in item.childer"
            :key="item.index"
            class="item"
          >
            <div class="item_mini">
              <div class="name">{{ i.name }}</div>
              <div class="btn">
                <a :href="i.url"
                >
                  <div>{{ i.btn }}</div>
                </a
                >
              </div>
              <div class="img"><img :src="i.img" alt=""/></div>
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
      <contactView v-if="showHomeAndroid == true"></contactView>
    </div>
  </div>
</template>
<script>
import contactView from '@/pages/contact.vue';
// 引入数据
import { pricing_view_tabs_list } from '@/pricingData.js'; // 使用实际路径

export default {
  head() {
    return {
      title: '定价计划-大带宽服务器',
      meta: [
        {hid: 'description', name: 'description', content: '这是默认的描述内容'},
        {hid: 'keywords', name: 'keywords', content: 'vue, nuxt, seo'}
      ]
    }
  },
  components: {
    contactView
  },
  data() {
    return {
      tabsIndex: "1",
      tabsIndex2: "2",
      currentItemIndex: 0, // 默认显示第一个区域
      // currentSpecIndex: 0, // 默认显示第一个规格项
      showHomeAndroid: false,
      screenWidth: null,
      pricing_view_tabs_list,
      pricing_view_tabs_list2: [
        {
          index: "1",
          title: "区块链",
          childer: [
            {
              index: "1-1",
              name: "区块链搭建",
              btn: "前往询价",
              url: "/contact",
              img: require("@/assets/pricing/jqr.png"),
            },
            {
              index: "1-2",
              name: "多种数据库服务",
              btn: "前往询价",
              url: "/contact",
              img: require("@/assets/pricing/jqr.png"),
            },
          ],
        },
        {
          index: "2",
          title: "存储",
          childer: [
            {
              index: "2-1",
              name: "S3",
              btn: "前往询价",
              url: "/contact",
              img: require("@/assets/pricing/jqr.png"),
            },
            {
              index: "2-2",
              name: "块存储",
              btn: "前往询价",
              url: "/contact",
              img: require("@/assets/pricing/jqr.png"),
            },
            {
              index: "2-3",
              name: "低成本归档存储",
              btn: "前往询价",
              url: "/contact",
              img: require("@/assets/pricing/jqr.png"),
            },
          ],
        },
        {
          index: "3",
          title: "网络服务",
          childer: [
            {
              index: "3-1",
              name: "CDN",
              btn: "前往询价",
              url: "/contact",
              img: require("@/assets/pricing/jqr.png"),
            },
            {
              index: "3-2",
              name: "高防盾(shield)",
              btn: "前往询价",
              url: "/contact",
              img: require("@/assets/pricing/jqr.png"),
            },
            {
              index: "3-3",
              name: "跨境数据传输",
              btn: "前往询价",
              url: "/contact",
              img: require("@/assets/pricing/jqr.png"),
            },
          ],
        },
        {
          index: "4",
          title: "技术支持",
          childer: [
            {
              index: "4-1",
              name: "技术支持1",
              btn: "前往询价",
              url: "/contact",
              img: require("@/assets/pricing/jqr.png"),
            },
            {
              index: "4-2",
              name: "技术支持2",
              btn: "前往询价",
              url: "/contact",
              img: require("@/assets/pricing/jqr.png"),
            },
            {
              index: "4-3",
              name: "技术支持3",
              btn: "前往询价",
              url: "/contact",
              img: require("@/assets/pricing/jqr.png"),
            },
          ],
        },
        {
          index: "5",
          title: "游戏",
          childer: [
            {
              index: "5-1",
              name: "Aomzon GameLife",
              btn: "前往询价",
              url: "/contact",
              img: require("@/assets/pricing/jqr.png"),
            },
            {
              index: "5-2",
              name: "Aomzon GameSparks",
              btn: "前往询价",
              url: "/contact",
              img: require("@/assets/pricing/jqr.png"),
            },
            {
              index: "5-3",
              name: "AWS游戏套件",
              btn: "前往询价",
              url: "/contact",
              img: require("@/assets/pricing/jqr.png"),
            },
          ],
        },
        {
          index: "6",
          title: "媒体视频",
          childer: [
            {
              index: "6-1",
              name: "媒体视频",
              btn: "前往询价",
              url: "/contact",
              img: require("@/assets/pricing/jqr.png"),
            },
            {
              index: "6-2",
              name: "媒体视频",
              btn: "前往询价",
              url: "/contact",
              img: require("@/assets/pricing/jqr.png"),
            },
            {
              index: "6-3",
              name: "媒体视频",
              btn: "前往询价",
              url: "/contact",
              img: require("@/assets/pricing/jqr.png"),
            },
          ],
        },
      ],
    };
  },
  methods: {
    bodyScale() {
      var devicewidth = document.documentElement.clientWidth; //获取当前分辨率下的可是区域宽度
      if(devicewidth<=1600){
        var scale = devicewidth / 1600; // 分母——设计稿的尺寸
        document.body.style.zoom = scale; //放大缩小相应倍数
      }
    },
    tabsIActck(index) {
      this.tabsIndex = index;
    },
    tabsIActck2(index) {
      this.tabsIndex2 = index;
    },
    prevSpec(itemIndex, childIndex) {
      const item = this.pricing_view_tabs_list.find(
        (el) => el.index === itemIndex
      );
      const childItem = item.childer.find((el) => el.index === childIndex);
      if (childItem && childItem.childer && childItem.childer.length > 0) {
        if (childItem.currentSpecIndex === 0) {
          childItem.currentSpecIndex = childItem.childer.length - 1;
        } else {
          childItem.currentSpecIndex--;
        }
        // 更新 price 和 originalPrice
        const spec = childItem.childer[childItem.currentSpecIndex];
        childItem.price = spec.price;
        childItem.originalPrice = spec.originalPrice;
      }
    },
    nextSpec(itemIndex, childIndex) {
      const item = this.pricing_view_tabs_list.find(
        (el) => el.index === itemIndex
      );
      const childItem = item.childer.find((el) => el.index === childIndex);
      if (childItem && childItem.childer && childItem.childer.length > 0) {
        if (childItem.currentSpecIndex === childItem.childer.length - 1) {
          childItem.currentSpecIndex = 0;
        } else {
          childItem.currentSpecIndex++;
        }
        // 更新 price 和 originalPrice
        const spec = childItem.childer[childItem.currentSpecIndex];
        childItem.price = spec.price;
        childItem.originalPrice = spec.originalPrice;
      }
    },
  },
  mounted() {
    this.screenWidth = document.body.clientWidth;
  },
  watch: {
    screenWidth: {
      handler: function (val) {
        if (val >= 800) {
          this.bodyScale();
          this.showHomeAndroid = false;
          // console.log( this.showHomeAndroid);
        } else if (val < 800) {
          // this.bodyScale();
          this.showHomeAndroid = true;
          // console.log( this.showHomeAndroid);
        }
        // this.$forceUpdate();
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>

<style lang="scss" scoped>
@media screen and (max-width: 800px) {
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }

  .blue-text {
    color: #027AFF !important;
  }
  .pricing_view {
    min-height: 1000px;
    width: 100%;
    padding-top: 5%;
  }
  .contact_btn_box {
    width: 100%;
    display: flex;
    background: #fff;
    position: absolute;
    left: 0;
    bottom: 0;
    min-height: 60px;
    border-top: 1px solid #45beff;
  }
  .contact_btn {
    width: 120px;
    height: 30px;
    margin: 5% auto;
    background-color: #fee064;

    a {
      text-decoration: none;
      color: #000;
      line-height: 30px;
    }
  }
  .pricing_view_tabs_content {
    width: 100%;
    margin: 10% auto 0 auto;

    .specs_desc_box2 {
      line-height: 1.5 !important;
      font-size: 14px !important;
    }

    .server_item {
      min-height: 350px !important;
    }

    .left_go2 {
      margin-top: 30px !important;
    }

    .right_go2 {
      margin-top: 30px !important;
    }

    .carousel {
      width: 100%;
      display: flex;
      background: #fff;
      position: absolute;
      left: 0;
      bottom: 0;
      min-height: 60px;
      border-top: 1px solid #45beff;

      .left_go {
        width: 30px;
        height: 30px;
        margin-left: 10px;
        margin-top: 15px;
        cursor: pointer;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .specs_desc_box {
        width: 120px;
        min-height: 60px;
        line-height: 60px;

        color: #45beff;
      }

      .right_go {
        width: 30px;
        height: 30px;
        margin-top: 15px;
        cursor: pointer;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }

    .pricing_view_tabs_content_mini {
      display: flex;
      width: 99%;
      min-height: 300px;
      margin: 10% auto 0 auto;

      .item {
        border: 1px solid #45beff;
        width: 200px !important;
        margin-right: 10px;
        margin-left: 10px;
        background: url("@/assets/Home_IMG/home_banner2.png") no-repeat;
        background-size: 180% 90%;
        position: relative;
        text-align: center;
        min-height: 291px;

        .region {
          margin-top: 25%;
          text-align: center;
          font-size: 24px;
          line-height: 2;
        }

        .server {
          color: #45beff;
          font-size: 14px;
          line-height: 1.5;
        }

        .price {
          color: #f66607;
          margin-top: 10%;
          font-size: 20px;

          span {
            font-size: 24px;
            margin: 0 10px;
            font-weight: 600;
          }
        }

        .originalPrice {
          margin-top: 20px;
          font-size: 15px;
        }
      }
    }
  }
  .pricing_disp {
    display: flex;
    width: 100%;
    margin: 0 auto;
  }
  .pricing_view_tabs_title {
    width: 100px;
    height: 150px;
    margin-right: 2%;
    cursor: pointer;

    .item_img {
      width: 100px;
      height: 150px;

      img {
        width: 100px;
        height: 150px;
      }
    }

    .item_title {
      width: 100px;
      box-shadow: 0px 4px 10px rgba(0, 213, 255, 0.726);
      text-align: center;
      padding: 5px 0;
      color: #636363;
    }
  }
  .pricing_view_tabs_content2 {
    width: 100%;
    min-height: 300px;
    margin-top: 15%;

    .pricing_view_tabs_content2_title {
      display: flex;
      width: 100%;
      margin: 0 auto;

      .item {
        font-size: 18px;
        text-align: center;
        margin-bottom: 20px;
        cursor: pointer;
      }

      .item2 {
        color: #45beff;
        border-bottom: 3px solid;
        padding-bottom: 5px;
      }
    }

    .pricing_view_tabs_content2_bar {
      height: 3px;
      width: 90%;
      background-color: #45beff;
      margin: 1% auto;
    }

    .pricing_view_tabs_content2_desc {
      width: 100%;
      margin: 0 auto;
      display: flex;
      min-height: 120px;
      padding: 10px;

      .item {
        width: 50% !important;
        box-shadow: 0px 4px 10px rgb(130, 229, 249);
        margin: 0 1%;
        padding-left: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
        min-height: 80px;

        .item_mini {
          border-left: 3px solid rgb(2, 204, 244);
          min-height: 80px;
          padding-left: 5%;
          position: relative;

          .name {
            position: absolute;
            top: 30%;
            right: 6%;
            font-weight: 600;
          }

          .btn {
            position: absolute;
            bottom: -10px;
            left: 0;
            width: 200px;
            height: 30px;
            line-height: 30px;
            background: url("@/assets/Home_IMG/productAdvantages_btn.png") no-repeat;
            background-size: 100% 100%;
            padding-left: 15px;
            color: #fff;

            a {
              text-decoration: none;
              color: #fff;

              div {
                width: 100%;
                height: 100%;
              }
            }
          }

          .img {
            position: absolute;
            bottom: 10px;
            left: 10px;
            width: 60px;
            height: 60px;
            margin-bottom: 10px;

            img {
              width: 60px;
              height: 60px;
            }
          }
        }
      }
    }
  }
}

@media screen and (min-width: 800px) {
  .blue-text {
    color: #027AFF !important;
  }
  .pricing_view {
    min-height: 1000px;
    width: 100%;
    padding-top: 4%;
  }
  .contact_btn_box {
    width: 100%;
    display: flex;
    background: #fff;
    position: absolute;
    left: 0;
    bottom: 0;
    min-height: 60px;
    border-top: 1px solid #45beff;
  }
  .contact_btn {
    width: 120px;
    height: 30px;
    margin: 5% auto;
    background-color: #fee064;

    a {
      text-decoration: none;
      color: #000;
      line-height: 30px;
    }
  }
  .pricing_view_tabs_content {
    width: 80%;
    margin: 0 auto;

    .specs_desc_box2 {
      line-height: 1.5 !important;
      font-size: 14px !important;
    }
    .server_width{
      width: 80% !important;
    }
    .server_item {
      min-height: 370px !important;
    }

    .left_go2 {
      margin-top: 30px !important;
    }

    .right_go2 {
      margin-top: 30px !important;
    }

    .carousel {
      width: 100%;
      display: flex;
      background: #fff;
      position: absolute;
      left: 0;
      bottom: 0;
      min-height: 60px;
      border-top: 1px solid #45beff;

      .left_go {
        width: 30px;
        height: 30px;
        margin-left: 30px;
        margin-top: 15px;
        cursor: pointer;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .specs_desc_box {
        width: 120px;
        min-height: 60px;
        line-height: 60px;

        color: #45beff;
      }

      .right_go {
        width: 30px;
        height: 30px;
        margin-top: 15px;
        cursor: pointer;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }

    .pricing_view_tabs_content_mini {
      display: flex;
      width: 60%;
      min-height: 300px;
      margin: 0 auto;

      .item {
        width: 40%;
        border: 1px solid #45beff;
        margin-right: 10px;
        margin-left: 10px;
        background: url("@/assets/Home_IMG/home_banner2.png") no-repeat;
        background-size: 180% 90%;
        position: relative;
        text-align: center;
        min-height: 200px;

        .region {
          margin-top: 25%;
          text-align: center;
          font-size: 24px;
          line-height: 2;
        }

        .server {
          color: #45beff;
          font-size: 14px;
          line-height: 1.5;
        }

        .price {
          color: #f66607;
          margin-top: 10%;

          span {
            font-size: 24px;
            margin: 0 10px;
            font-weight: 600;
          }
        }

        .originalPrice {
          margin-top: 20px;
          font-size: 15px;
        }
      }
    }
  }
  .pricing_disp {
    display: flex;
    width: 60%;
    margin: 0 auto;
  }
  .pricing_view_tabs_title {
    width: 200px;
    height: 250px;
    margin-right: 8%;
    cursor: pointer;

    .item_img {
      width: 130px;
      height: 200px;

      img {
        width: 130px;
        height: 200px;
      }
    }

    .item_title {
      width: 150px;
      box-shadow: 0px 4px 10px rgba(0, 213, 255, 0.726);
      text-align: center;
      padding: 5px 0;
      color: #636363;
    }
  }
  .pricing_view_tabs_content2 {
    width: 100%;
    min-height: 300px;
    margin-top: 5%;

    .pricing_view_tabs_content2_title {
      display: flex;
      width: 50%;
      margin: 0 auto;

      .item {
        margin-left: 5%;
        margin-right: 5%;
        cursor: pointer;
      }

      .item2 {
        color: #45beff;
      }
    }

    .pricing_view_tabs_content2_bar {
      height: 3px;
      width: 60%;
      background-color: #45beff;
      margin: 1% auto;
    }

    .pricing_view_tabs_content2_desc {
      width: 70%;
      margin: 0 auto;
      display: flex;

      .item {
        width: 100%;
        box-shadow: 0px 4px 10px rgb(130, 229, 249);
        margin: 0 2%;
        padding-left: 20px;
        padding-top: 10px;
        padding-bottom: 10px;
        min-height: 130px;

        .item_mini {
          border-left: 3px solid rgb(2, 204, 244);
          min-height: 130px;
          padding-left: 5%;
          position: relative;

          .name {
            position: absolute;
            top: 30%;
          }

          .btn {
            position: absolute;
            bottom: 0px;
            left: 0;
            width: 200px;
            height: 40px;
            line-height: 40px;
            background: url("@/assets/Home_IMG/productAdvantages_btn.png") no-repeat;
            background-size: 100% 100%;
            padding-left: 15px;
            color: #fff;

            a {
              text-decoration: none;
              color: #fff;

              div {
                width: 100%;
                height: 100%;
              }
            }
          }

          .img {
            position: absolute;
            bottom: 10px;
            right: 10px;
            width: 70px;
            height: 70px;

            img {
              width: 70px;
              height: 70px;
            }
          }
        }
      }
    }
  }
}
</style>
