<template>
  <div class="about" v-loading="loading">
    <div
      v-if="!state.banner"
      style="height: 394px; background-color: #ccc"
    ></div>
    <div
      v-else
      style="height: 394px; background-size: cover; background-color: #ccc"
      :style="{ backgroundImage: `url(${state.banner})` }"
    ></div>

    <div class="box conter1000">
      <div class="_l">
        <div
          class="_item pointer"
          v-for="(item, index) in state.data"
          :class="index == kindId ? 'x_fff x_bg_blue' : ''"
          :key="item.id"
          @click="handleActive(index)"
        >
          {{ item.title }}
        </div>
      </div>
      <div class="_r">
        <div
          v-if="state.data.length"
          class="html"
          v-html="state.data[kindId]['content']"
        ></div>
      </div>
    </div>
    <webFooter></webFooter>
  </div>
</template>

<script setup name="AboutUs">
import webFooter from "@/components/webFooter/index.vue";
import request from "@/utils/request";
import { banner } from "@/api/website/home/index";
import { getAboutList } from "../../../api/website/aboutUs";
function about() {
  return request({
    url: "/v1/sys/about",
    method: "get",
  });
}
const loading = ref(true);
const state = reactive({
  data: [],
  banner: "",
});
const kindId = ref(0);

/** 查询 */
function getData() {
  loading.value = true;

  banner({ locals: "关于我们" })
    .then((resp) => {
      state.banner = resp.data[0].images;
    })
    .catch(() => {
      loading.value = false;
    });
  // 获取关于我们列表
  getAboutList()
    .then((resp) => {
      console.log("baout", resp);
      state.data = resp.data;
      loading.value = false;
    })
    .catch(() => {
      loading.value = false;
    });
}
onMounted(() => {
  getData();
});
function handleActive(id) {
  kindId.value = id;
}
</script>

<style lang="scss" scoped>
.about {
  background-color: #f2f6ff;
  .box {
    margin-bottom: 30px;
    padding-top: 20px;
    display: flex;
    ._l {
      width: 230px;
      margin-right: 14px;
      ._item {
        text-align: center;
        height: 53px;
        line-height: 53px;
        font-size: 16px;
        color: #333;
        background-color: #fff;
      }
    }
    ._r {
      flex: 1;
      background: #fff;
      padding: 20px 40px;
      h3 {
        font-weight: 600;
        text-align: center;
        font-size: 18px;
        color: #333333;
      }
      p {
        font-size: 14px;
        color: #333333;
        line-height: 36px;
      }
    }
  }
}
</style>
