<script setup name="footer">
import { ref, reactive, onUnmounted, onMounted } from "vue";
import { useI18n } from "#imports";
import { GetMessageApi } from "@/service/api.js";
import { useRouter, useRoute } from "#imports";
const { t } = useI18n();
import { GetProductCategoryApi } from "~/service/api.js";
//商品与新闻状态
import useSheller from "~/stores/seller.js";
// 语言判断
import langToCheck from "~/hook/lang.js";
const langIs = ref(langToCheck());
const router = useRouter();
const route = useRoute();
//页面跳转事件
const Store = useSheller();
const props = defineProps({
  //首页加边距
  marginSpacing: {
    type: Boolean,
    default: false,
  },
});

const subRouteEvent = (subParmas, item) => {
  let secondaryRoute = subParmas.enName;
  switch (secondaryRoute) {
    case "Power Station": {
      Store.clickTab = 0;
      router.push({
        name: "product",
        query: {
          CategoryId: 0,
        },
      });
      break;
    }
    case "Solar Panel": {
      Store.clickTab = 1;
      router.push({
        name: "product",
        query: {
          CategoryId: 1,
        },
      });
      break;
    }
    case "Accessory": {
      Store.clickTab = 2;
      router.push({
        name: "product",
        query: {
          CategoryId: 2,
        },
      });
      break;
    }
    case "About Us": {
      router.push({
        name: "about-us",
      });
      break;
    }
    case "Contact": {
      router.push({
        name: "contact-us",
      });
      break;
    }
    default: {
      // 产品分类跳转到首页对应分类
      router.push({
        name: "home",
      });
      break;
    }
  }
  footTabs.forEach((it) => {
    (it.checked = false), (it.expand = false);
  });
};
// 改成小写，并 " - "代替空格
const FlowReplace = (str) => {
  return str.toLowerCase().replace(/\s+/g, "-");
};
//expandwei
const footTabs = reactive([]);
const GetProductCategorylist = () => {
  GetProductCategoryApi().then((res) => {
    let arrofObjects = res.rows;
    Store.categoryList = arrofObjects.map((obj, k) => {
      return {
        ...obj,
        categorId: k,
        path: "product/product",
        Params: k,
      };
    });
    footTabs[0].dropList = Store.categoryList;
  });
};
onMounted(() => {
  footTabs.push(
    {
      enName: "Product",
      name: "产品系列",
      expand: false,
      dropList: [
        {
          enName: "监控摄像头",
          name: "监控摄像头",
        },
        {
          enName: "LED灯泡",
          name: "LED灯泡",
        },
        {
          enName: "车灯",
          name: "车灯",
        },
      ],
    },
    {
      enName: "About",
      name: "关于我们",
      expand: false,
      dropList: [
        {
          enName: "About Us",
          name: "关于我们",
          path: "/about-us"
        },
      ],
    },
    {
      enName: "Contact",
      name: "联系我们",
      expand: false,
      dropList: [
        {
          enName: "Contact",
          name: "联系我们",
          path: "/contact-us/contact-us"
        },
      ],
    }
  );
});
// 服务协议、隐私政策、域名、网安信息
const GoAgreement = (value) => {
  switch (value) {
    case 1: {
      window.open("https://www.mingyanglg.com/protocol/service-agreement.html");
      break;
    }
    case 2: {
      window.open("https://www.mingyanglg.com/protocol/privacy-policy.html");
      break;
    }
    case 3: {
      window.open("https://beian.miit.gov.cn/#/Integrated/index");
      break;
    }
    case 4: {
      //网站隐私协议
      router.push({
        name: "privacy-policy",
      });
      break;
    }
    case 5: {
      // ICP备案信息
      window.open("https://beian.miit.gov.cn/");
      break;
    }
    case 6: {
      // 公司官网
      window.open("https://www.mingyanglg.com");
      break;
    }
    case 7: {
      // 公安备案信息
      window.open("http://www.beian.gov.cn/");
      break;
    }
  }
};
//折叠面板组件
const TransitTap = (symbolName) => {
  footTabs.forEach((it) => {
    symbolName == it.enName ? (it.expand = !it.expand) : (it.expand = false);
  });
};

// 接口
const goTab = (path) => {
  router.push({
    name: path,
  });
};
</script>

<template>
  <div class="page">
    <!-- 联系我们部分 -->
    <div class="foot">
      <!-- 1024 -->
      <div class="pc-show-bar">
        <!-- 头部 -->
        <div class="foot-flex">
          <div class="foot-top">
            <div class="footer-content">
              <!-- 公司信息 -->
              <div class="company-info">
                <div class="company-logo">
                  <div class="logo-section">
                    <div class="company-name">{{ t('footer.company.name') }}</div>
                  </div>
                </div>
                <h3>{{ t('footer.company.description') }}</h3>
                <p>{{ t('footer.company.design') }}</p>

                <div class="contact-info">
                  <p>{{ t('footer.wechat') }}: +86 131 2923 4398</p>
                  <p>{{ t('footer.whatsapp') }}: +86 158 7678 7345</p>
                  <p>
                    {{ t('footer.address') }}: {{ t('contact.company.address') }}
                  </p>
                </div>
              </div>

              <!-- 二维码区域 -->
              <div class="qr-codes">
                <div class="qr-code-item">
                  <div class="qr-placeholder">{{ t('footer.qr.wechat') }}</div>
                  <p>+86 131 2923 4398</p>
                </div>
                <div class="qr-code-item">
                  <div class="qr-placeholder">{{ t('footer.qr.whatsapp') }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 分隔线 -->
        <div class="separator-line"></div>
      </div>
      <div class="mobile-show-bar">
        <!-- 移动端简化版 -->
        <div class="mobile-footer">
          <div class="mobile-company-info">
            <h4>{{ t('footer.company.name') }}</h4>
            <p>{{ t('footer.company.description') }}</p>
            <p>{{ t('footer.company.design') }}</p>
            <p>{{ t('footer.wechat') }}: +86 131 2923 4398</p>
            <p>{{ t('footer.whatsapp') }}: +86 158 7678 7345</p>
          </div>
        </div>
      </div>
      <!-- 末尾 -->
      <div class="foot-bottom" v-if="langIs === 'cn'">
        <div class="foot-bottom__box">
          <div class="foot-bottom__box__content">
            <p class="foot-bottom__box__content__copyright">
              版权所有 © 2025 明阳良光 |
              <a @click="GoAgreement(5)" class="foot-bottom__box__content__link">粤ICP备2023070569号</a> |
              <a @click="GoAgreement(7)" class="foot-bottom__box__content__link">粤公网安备 粤ICP备2023070569号</a>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import "style/foot-bar.scss";

.pc-show-bar {
  display: none;

  @media (min-width: 1025px) {
    display: block;
  }
}

.mobile-show-bar {
  display: none;

  @media (max-width: 1024px) {
    display: block;
  }
}

$form_mg0611-padding: 6.25vw 0;
$form-theme-color: #2164ff;

// 新的底部样式
.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 20px 15px;

  // 4K 和超大屏幕
  @media (min-width: 2560px) {
    max-width: 1800px;
    padding: 40px 60px 30px;
    gap: 60px;
  }

  @media (min-width: 1920px) and (max-width: 2559px) {
    max-width: 1500px;
    padding: 35px 50px 25px;
    gap: 50px;
  }

  @media (min-width: 1440px) and (max-width: 1919px) {
    max-width: 1300px;
    padding: 30px 40px 20px;
    gap: 40px;
  }

  @media (max-width: 1024px) {
    padding: 25px 30px 18px;
    gap: 30px;
  }

  @media (max-width: 768px) {
    flex-direction: column;
    gap: 25px;
    padding: 20px 20px 15px;
  }

  @media (max-width: 480px) {
    gap: 20px;
    padding: 18px 16px 12px;
  }

  @media (max-width: 375px) {
    gap: 16px;
    padding: 15px 12px 10px;
  }
}

// 分隔线样式
.separator-line {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  
  // 4K 和超大屏幕
  @media (min-width: 2560px) {
    max-width: 1800px;
    padding: 0 60px;
  }

  @media (min-width: 1920px) and (max-width: 2559px) {
    max-width: 1500px;
    padding: 0 50px;
  }

  @media (min-width: 1440px) and (max-width: 1919px) {
    max-width: 1300px;
    padding: 0 40px;
  }

  @media (max-width: 1024px) {
    padding: 0 30px;
  }
  
  @media (max-width: 768px) {
    padding: 0 20px;
  }

  @media (max-width: 480px) {
    padding: 0 16px;
  }

  @media (max-width: 375px) {
    padding: 0 12px;
  }
  
  &::after {
    content: '';
    display: block;
    height: 1px;
    background-color: #585656;
    width: 100%;
  }
}

.company-info {
  flex: 1;

  .company-logo {
    margin-bottom: 15px;

    // 4K 和超大屏幕
    @media (min-width: 2560px) {
      margin-bottom: 25px;
    }

    @media (min-width: 1920px) and (max-width: 2559px) {
      margin-bottom: 22px;
    }

    @media (min-width: 1440px) and (max-width: 1919px) {
      margin-bottom: 20px;
    }

    @media (max-width: 480px) {
      margin-bottom: 12px;
    }

    @media (max-width: 375px) {
      margin-bottom: 10px;
    }

    .logo-section {
      .company-name {
        font-size: 18px !important;
        font-weight: bold;
        color: #343434;

        // 4K 和超大屏幕
        @media (min-width: 2560px) {
          font-size: 28px !important;
        }

        @media (min-width: 1920px) and (max-width: 2559px) {
          font-size: 24px !important;
        }

        @media (min-width: 1440px) and (max-width: 1919px) {
          font-size: 20px !important;
        }

        @media (max-width: 1024px) {
          font-size: 18px !important;
        }

        @media (max-width: 768px) {
          font-size: 16px !important;
        }

        @media (max-width: 480px) {
          font-size: 15px !important;
        }

        @media (max-width: 375px) {
          font-size: 14px !important;
        }
      }
    }
  }

  h3 {
    font-size: 16px;
    color: #343434;
    margin: 8px 0;

    // 4K 和超大屏幕
    @media (min-width: 2560px) {
      font-size: 22px;
      margin: 12px 0;
    }

    @media (min-width: 1920px) and (max-width: 2559px) {
      font-size: 20px;
      margin: 10px 0;
    }

    @media (min-width: 1440px) and (max-width: 1919px) {
      font-size: 18px;
      margin: 9px 0;
    }

    @media (max-width: 480px) {
      font-size: 14px;
      margin: 6px 0;
    }

    @media (max-width: 375px) {
      font-size: 13px;
      margin: 5px 0;
    }
  }

  p {
    color: #626262;
    margin: 5px 0;
    font-size: 13px !important;

    // 4K 和超大屏幕
    @media (min-width: 2560px) {
      font-size: 15px !important;
      margin: 8px 0;
    }

    @media (min-width: 1920px) and (max-width: 2559px) {
      font-size: 14px !important;
      margin: 7px 0;
    }

    @media (min-width: 1440px) and (max-width: 1919px) {
      font-size: 13px !important;
      margin: 6px 0;
    }

    @media (max-width: 480px) {
      font-size: 12px !important;
      margin: 4px 0;
    }

    @media (max-width: 375px) {
      font-size: 11px !important;
      margin: 3px 0;
    }
  }

  .contact-info {
    margin-top: 15px;

    // 4K 和超大屏幕
    @media (min-width: 2560px) {
      margin-top: 25px;
    }

    @media (min-width: 1920px) and (max-width: 2559px) {
      margin-top: 22px;
    }

    @media (min-width: 1440px) and (max-width: 1919px) {
      margin-top: 20px;
    }

    @media (max-width: 480px) {
      margin-top: 12px;
    }

    @media (max-width: 375px) {
      margin-top: 10px;
    }

    p {
      margin: 6px 0;
      color: #626262;

      // 4K 和超大屏幕
      @media (min-width: 2560px) {
        margin: 10px 0;
        font-size: 16px;
      }

      @media (min-width: 1920px) and (max-width: 2559px) {
        margin: 8px 0;
        font-size: 15px;
      }

      @media (min-width: 1440px) and (max-width: 1919px) {
        margin: 7px 0;
        font-size: 14px;
      }

      @media (max-width: 480px) {
        margin: 5px 0;
        font-size: 13px;
      }

      @media (max-width: 375px) {
        margin: 4px 0;
        font-size: 12px;
      }
    }
  }
}

.qr-codes {
  display: flex;
  gap: 25px;
  margin-left: 30px;

  // 4K 和超大屏幕
  @media (min-width: 2560px) {
    gap: 40px;
    margin-left: 50px;
  }

  @media (min-width: 1920px) and (max-width: 2559px) {
    gap: 35px;
    margin-left: 45px;
  }

  @media (min-width: 1440px) and (max-width: 1919px) {
    gap: 30px;
    margin-left: 40px;
  }

  @media (max-width: 1024px) {
    gap: 20px;
    margin-left: 25px;
  }

  @media (max-width: 768px) {
    margin-left: 0;
    gap: 15px;
    justify-content: center;
  }

  @media (max-width: 480px) {
    gap: 12px;
  }

  @media (max-width: 375px) {
    gap: 10px;
  }

  .qr-code-item {
    text-align: center;

    .qr-placeholder {
      width: 120px;
      height: 120px;
      border: 2px solid #626262;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 8px;
      color: #626262;
      font-size: 12px;
      border-radius: 6px;

      // 4K 和超大屏幕
      @media (min-width: 2560px) {
        width: 160px;
        height: 160px;
        font-size: 16px;
        margin-bottom: 12px;
        border-radius: 8px;
      }

      @media (min-width: 1920px) and (max-width: 2559px) {
        width: 150px;
        height: 150px;
        font-size: 15px;
        margin-bottom: 11px;
        border-radius: 7px;
      }

      @media (min-width: 1440px) and (max-width: 1919px) {
        width: 140px;
        height: 140px;
        font-size: 14px;
        margin-bottom: 10px;
      }

      @media (max-width: 1024px) {
        width: 130px;
        height: 130px;
        font-size: 13px;
        margin-bottom: 9px;
      }
      
      @media (max-width: 768px) {
        width: 110px;
        height: 110px;
        font-size: 12px;
        margin-bottom: 8px;
      }

      @media (max-width: 480px) {
        width: 100px;
        height: 100px;
        font-size: 11px;
        margin-bottom: 6px;
        border-radius: 5px;
      }

      @media (max-width: 375px) {
        width: 90px;
        height: 90px;
        font-size: 10px;
        margin-bottom: 5px;
        border-radius: 4px;
      }
    }

    p {
      color: #626262;
      font-size: 13px;

      // 4K 和超大屏幕
      @media (min-width: 2560px) {
        font-size: 16px;
      }

      @media (min-width: 1920px) and (max-width: 2559px) {
        font-size: 15px;
      }

      @media (min-width: 1440px) and (max-width: 1919px) {
        font-size: 14px;
      }

      @media (max-width: 480px) {
        font-size: 12px;
      }

      @media (max-width: 375px) {
        font-size: 11px;
      }
    }
  }
}

.mobile-footer {
  padding: 20px 20px;

  .mobile-company-info {
    text-align: center;

    h4 {
      color: #343434;
      margin-bottom: 10px;
      font-size: 16px;
    }

    p {
      color: #626262;
      margin: 5px 0;
    }
  }
}

// 表单样式
.contact-form {
  width: 5.2rem;
  margin: 10px auto;

  @media (max-width: 1024px) {
    width: 100%;
    margin-top: 0;
    padding: 30px 20px 40px;
    background-color: #4d4d4d;
  }

  &__title {
    font-size: 18px;
    padding-bottom: 16px;
    font-family: MiSans-Medium;
  }

  &__content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    &__box {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      width: 100%;

      &__item {
        width: 49.2%;

        &:last-child {
          width: 100%;
        }

        input,
        textarea {
          background: #fcfcfc;
          height: 0.4rem;
          width: 100%;
          margin-bottom: 0.06rem;
          border-radius: 0.03rem;
          padding: 0px 0.15rem;
          font-size: 0.14rem;
          color: #000;
          -webkit-transition: all 0.5s;
          -o-transition: all 0.5s;
          transition: all 0.5s;
          font-family: MiSans-Normal;

          @media (max-width: 1440px) {
            font-size: 13.5px;
          }

          @media (max-width: 1280px) {
            font-size: 12px;
          }

          @media (max-width: 1024px) {
            font-size: 12px;
            height: 35px;
            margin-bottom: 16px;
            padding-left: 10px;
          }
        }

        textarea {
          width: 100%;
          height: 1rem;
          padding: 0.15rem;
          margin-bottom: 5px;

          @media (max-width: 1024px) {
            font-size: 12px;
            height: 120px;
            margin-bottom: 16px;
            padding: 10px;
          }
        }
      }
    }

    button {
      width: 1rem;
      height: 0.34rem;
      text-align: center;
      background: $form-theme-color;
      color: #fff;
      font-size: 0.14rem;
      border-radius: 5px;

      @media (max-width: 1440px) {
        font-size: 13.5px;
      }

      @media (max-width: 1280px) {
        font-size: 12px;
      }

      @media (max-width: 1024px) {
        width: 100px;
        height: 30px;
      }
    }
  }
}

// 底部版权信息样式
.foot-bottom {
  
  &__box {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;

    // 4K 和超大屏幕
    @media (min-width: 2560px) {
      max-width: 1800px;
      padding: 0 60px;
    }

    @media (min-width: 1920px) and (max-width: 2559px) {
      max-width: 1500px;
      padding: 0 50px;
    }

    @media (min-width: 1440px) and (max-width: 1919px) {
      max-width: 1300px;
      padding: 0 40px;
    }

    @media (max-width: 1024px) {
      padding: 0 30px;
    }
    
    @media (max-width: 768px) {
      padding: 0 20px;
    }

    @media (max-width: 480px) {
      padding: 0 16px;
    }

    @media (max-width: 375px) {
      padding: 0 12px;
    }
    
    &__content {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: auto;
      padding: 15px 0;

      // 4K 和超大屏幕
      @media (min-width: 2560px) {
        padding: 25px 0;
      }

      @media (min-width: 1920px) and (max-width: 2559px) {
        padding: 22px 0;
      }

      @media (min-width: 1440px) and (max-width: 1919px) {
        padding: 20px 0;
      }

      @media (max-width: 1024px) {
        padding: 18px 0;
      }

      @media (max-width: 480px) {
        padding: 12px 0;
      }

      @media (max-width: 375px) {
        padding: 10px 0;
      }
      
      &__copyright {
        color: #626262;
        font-size: 14px;
        line-height: 1.6;
        margin: 0;
        text-align: center;

        // 4K 和超大屏幕
        @media (min-width: 2560px) {
          font-size: 18px;
          line-height: 1.8;
        }

        @media (min-width: 1920px) and (max-width: 2559px) {
          font-size: 16px;
          line-height: 1.7;
        }

        @media (min-width: 1440px) and (max-width: 1919px) {
          font-size: 15px;
        }

        @media (max-width: 1024px) {
          font-size: 14px;
        }
        
        @media (max-width: 768px) {
          font-size: 13px;
          line-height: 1.8;
        }

        @media (max-width: 480px) {
          font-size: 12px;
          line-height: 2;
        }

        @media (max-width: 375px) {
          font-size: 11px;
          line-height: 2.2;
        }
      }
      
      &__link {
        color: #2c3e50;
        text-decoration: none;
        transition: color 0.3s ease;
        cursor: pointer;
        
        &:hover {
          color: #000;
          text-decoration: underline;
        }
      }
    }
  }
}
</style>
