<template>
  <div :class="[prefixCls, 'flex']">
    <mai-tab :active="current.id" :data-source="tabs" @change="handleChange"/>
    <div :class="`${prefixCls}-content`">
      <h2>湛江水产技贸研究评议基地</h2>
      <HtmlPreview :content="content"/>
    </div>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  name: '关于我们',
  headerHost: false,
  order: 8,
})
useHead({
  title:'关于我们'
})
import {randomUUID} from '~~/utils';
const {aboutApi} = useApi()
const {prefixCls} = useDesign('mai-wrap');

const tabs = ref([
  {
    name: '关于我们',
    id: randomUUID(),
    children: [
      {name: '关于我们', id: randomUUID()},
      {name: '联系我们', id: randomUUID()},
    ],
  },
]);
const content = ref('');
const current = ref(tabs.value[0].children[0]);

const { setBannerTitle } = useAppStore()
async function handleChange(data: any) {
  current.value = data;
  setBannerTitle(data.name);
  if (data.name === '联系我们') {
    aboutApi.getContractInfo().then(({data}) => {
      // console.log('res>>>>', res);
      content.value = data.content;
    });
  } else {
    aboutApi.getAboutInfo().then(({data}) => {
      content.value = data.content;
    });
  }
}

handleChange(tabs.value[0].children[0]);
setBannerTitle(tabs.value[0].children[0].name)
</script>

<style scoped lang="less"></style>
