<script setup lang="ts">
let pageTitle: any = ref("About HKT");
import { useAll } from "~/api/pubAll/service";

useHead(() => ({
  title: pageTitle.value,
}));

const user = useUserStore();
user.value.adminTitle = "About HKT";

const { getContent, devHistory } = useAll();

const { data } = await useAsyncData("lasssbPagfedfdsf", () =>
  getContent({
    language: 2,
    code: 5,
  })
);

let pageData: any = ref([]);
let pageData2: any = ref([]);

if (String(data.value?.httpCode) === "200") {
  pageData.value = data.value.data || [];
}

const { data: ssrDevHistory } = await useAsyncData<any>("devHistoryssss", () =>
  devHistory()
);

setData2(ssrDevHistory.value);

function setData2(res: any) {
  if (res.httpCode == 200) {
    pageData2.value = res?.data || [];
  }
}

const sortedTimelineData = computed(() => {
  return [...pageData2.value].sort(
    (a: any, b: any) => getTimelineYear(a?.year) - getTimelineYear(b?.year)
  );
});

function getTimelineYear(year: any) {
  return Number(year || 0);
}
</script>

<template>
  <div class="about-page">
    <img src="@/assets/img/icon/about-bg.png" alt="" srcset="" class="banner">
    <div class="about-con">
      <div class="con-js">
        <h3 class="about-title">{{ pageData[0][1].title }}</h3>
        <p v-html="pageData[0][1].content"></p>
      </div>

      <div class="con-qywh mt30">
        <h3 class="about-title">Corporate Culture</h3>
        <ul>
          <li>
            <img src="@/assets/img/about/icon-1.png" />
            <h4>Unity in Innovation</h4>
            <p>Building a leading domestic brand for electronic components</p>
          </li>
          <li>
            <img src="@/assets/img/about/icon-2.png" />
            <h4>Technology for Progress</h4>
            <p>Responding to customer expectations with technology<br>Expanding service boundaries with care</p>
          </li>
          <li>
            <img src="@/assets/img/about/icon-3.png" />
            <h4>Quality Legacy</h4>
            <p>Turning every standard of quality into a promise that stands the test of time</p>
          </li>
          <li>
            <img src="@/assets/img/about/icon-4.png" />
            <h4>Craftsmanship Manufacturing</h4>
            <p>Customer first, win-win cooperation<br>Professional, pragmatic, efficient and innovative</p>
          </li>
          <li>
            <img src="@/assets/img/about/icon-5.png" />
            <h4>Leading the Future</h4>
            <p>Continuously providing stable and reliable semiconductor supply for global customers</p>
          </li>
          <li>
            <img src="@/assets/img/about/icon-6.png" />
            <h4>Driven by Excellence</h4>
            <p>Maintaining high-standard R&amp;D investment and achieving outstanding performance and reliability through craftsmanship</p>
          </li>
          <li>
            <img src="@/assets/img/about/icon-7.png" />
            <h4>Quality Foundation</h4>
            <p>Automotive-grade standards validated through rigorous reliability testing</p>
          </li>
          <li>
            <img src="@/assets/img/about/icon-8.png" />
            <h4>Empowering Partnerships</h4>
            <p>Providing flexible one-stop application solutions and growing together with customers</p>
          </li>
        </ul>
      </div>
      <div class="con-fzlc mt30">
        <h3 class="about-title">Development History</h3>
        <ul>
          <li v-for="item in sortedTimelineData" :key="item.id">
            <h4>{{ item.year }}</h4>
            <div class="con" v-html="item.text"></div>
          </li>
        </ul>
      </div>

      <div class="con-zs mt30">
        <h3 class="about-title">Honor Certificates</h3>
        <ul>
          <li>
            <div class="img">
              <img src="@/assets/img/about/about_9.png" />
            </div>
            <h4>Shenzhen Electronic Chamber of Commerce · Strong Support Award</h4>
          </li>
          <li>
            <div class="img">
              <img src="@/assets/img/about/about_1.png" />
            </div>
            <h4>Shenzhen Specialized and Sophisticated Enterprise</h4>
          </li>
          <li>
            <div class="img">
              <img src="@/assets/img/about/about_2.png" />
            </div>
            <h4>Shenzhen Innovative Enterprise</h4>
          </li>
          <li>
            <div class="img">
              <img src="@/assets/img/about/about_3.png" />
            </div>
            <h4>National High-Tech Enterprise</h4>
          </li>
          <li>
            <div class="img">
              <img src="@/assets/img/about/about_4.png" />
            </div>
            <h4>Technology Innovation Pioneer Award</h4>
          </li>
          <li>
            <div class="img">
              <img src="@/assets/img/about/about_5.png" />
            </div>
            <h4>Shenzhen Electronics Chamber Blue Dot Award</h4>
          </li>
          <li>
            <div class="img">
              <img src="@/assets/img/about/about_6.png" />
            </div>
            <h4>Golden Wing Award for Most Marketable Product</h4>
          </li>
          <li>
            <div class="img">
              <img src="@/assets/img/about/about_7.png" />
            </div>
            <h4>Innovation Breakthrough Blue Dot Award</h4>
          </li>
          <!-- <li>
            <div class="img">
              <img src="@/assets/img/about/about_8.png" />
            </div>
            <h4>Engineering Technology Research Center Certification</h4>
          </li> -->
        </ul>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.about-con {
  padding: 0 15px 66px;

  .about-title {
    font-size: 16px;
    color: #333;
    font-weight: bold;
    text-align: center;
    margin-bottom: 15px;
  }

  .con-js {
    font-size: 12px;
    line-height: 20px;
    color: #555;
  }

  .con-qywh {
    ul {
      display: flex;
      width: 100%;
      margin: 0 auto;
      flex-wrap: wrap;
      justify-content: space-between;

      li {
        width: calc(50% - 5px);
        background: #f4f4f4;
        margin-bottom: 10px;
        color: #444;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px;
        border-radius: 5px;

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

        h4 {
          font-size: 14px;
          font-weight: bold;
          line-height: 30px;
          margin-top: 0px;
        }

        p {
          font-size: 12px;
          line-height: 20px;
          margin-top: 3px;
        }
      }
    }
  }

  .con-fzlc {
    ul {
      padding-left: 30px;
      border-left: 1px solid #e8e8e8;
    }

    li {
      display: flex;
      align-items: flex-start;
      line-height: 22px;
      margin-bottom: 10px;
      top: 5px;

      h4 {
        color: $mainColor;
        position: relative;
        font-weight: bold;
        font-size: 16px;
        margin-right: 6px;
        width: 45px;
        top: 5px;

        &::before {
          content: "";
          width: 4px;
          height: 4px;
          position: absolute;
          left: -15px;
          top: 9px;
          background: $mainColor;
          border-radius: 50%;
        }
      }

      .con {
        flex: 1;
        background: #f4f4f4;
        border-radius: 5px;
        padding: 7px 10px;
        line-height: 18px;
        font-size: 12px;
      }
    }
  }

  .con-zs {
    ul {
      display: flex;
      width: 100%;
      margin: 0 auto;
      flex-wrap: wrap;
      justify-content: space-between;

      li {
        width: calc(50% - 5px);
        margin-bottom: 12px;

        .img {
          background: #f4f4f4;
          color: #444;
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 20px;
          border-radius: 5px;
        }

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

        h4 {
          font-size: 12px;
          font-weight: bold;
          line-height: 30px;
          text-align: center;
        }
      }
    }
  }

  .con-lx {
    .code {
      width: 80%;
      margin: 0 auto;
    }

    p {
      display: flex;
      align-content: center;
      line-height: 20px;

      span {
        color: $mainColor;
        font-weight: bold;
      }

      img {
        width: 20px;
        height: 20px;
        margin-right: 5px;
      }

      & + p {
        margin-top: 15px;
      }
    }
  }
}
</style>
