<template>
  <section id="about">
    <v-container fluid>
      <v-row align="center" justify="center">
        <v-col cols="10">
          <v-row align="center" justify="center">
            <v-col cols="12" md="7">
              <h1 class="font-weight-light display-2">About Us</h1>
              <h1 class="font-weight-light display-1 mb-3">
                About our introduction!
              </h1>
              <v-row>
                <v-col v-for="(aboutUs, i) in aboutUsData" :key="i" cols="12" class="d-flex align-center">
                  <v-img
                    src="@/assets/img/icon1.svg"
                    max-width="60px"
                    class="mr-4"
                  />
                  <p class="text-justify">
                    {{ aboutUs.content }}
                  </p>
                </v-col>
              </v-row>
            </v-col>
            <v-col cols="12" md="5" class="d-none d-md-flex">
              <v-img
                src="@/assets/img/ill1.svg"
                class="d-block ml-auto mr-auto"
                max-width="400px"
              />
            </v-col>
          </v-row>
        </v-col>
      </v-row>
    </v-container>
  </section>
</template>

<style scoped>
#about {
  background-color: #f4f7f5;
}
</style>
<script>
import axios from "axios";

export default {
  data: () => ({
    // model: null,
    aboutUsData:[],

  }),
  created() {
    this.getAboutUsData();
  },
  methods: {
    getAboutUsData() {
      const websiteCode = this.extractSubstring(window.location.pathname);
      let userWebsiteId = "";
      axios.get("/api/website/template/getWebsiteByWebsiteCode", {
        params: {
          websiteCode: websiteCode,
        }
      }).then(response => {
        if (response.data.code === 200) {
          userWebsiteId = response.data.data.id;
          axios.get("/api/website/template/aboutUs", {
            params: {
              userWebsiteId: userWebsiteId,
            }
          }).then(response => {
            this.aboutUsData = response.data.data;
          })
        }})
       .catch(error => {
          console.error('Error fetching about us data:', error);
        });
    },
    extractSubstring(str) {
      const startIndex = str.indexOf('/');
      if (startIndex !== -1) {
        const endIndex = str.indexOf('/', startIndex + 1);
        if (endIndex !== -1) {
          return str.substring(startIndex + 1, endIndex - 1);
        } else {
          return str.substring(startIndex + 1);
        }
      }
      return ''; // 如果没有找到匹配，返回空字符串
    }
  }
}
</script>
