<!-- @format -->

<template>
  <qinui-theme :modelValue="theInited">
    <qinui-tabs-rich :data="theRich" v-model="theNow" prefix="" />
  </qinui-theme>
</template>

<script lang="ts" setup>
  import { ref, shallowRef } from 'vue';
  import { onLoad } from '@fe6/qinjs-app';

  // 模拟数据 start
  const theData = [
    {
      id: 6433,
      sort: 3,
      title: '项目介绍',
      desc: '<p><strong>项目介绍项目</strong></p>\n',
    },
    {
      id: 6507,
      sort: 3,
      title: '剧目介绍',
      desc: '<p><strong>剧目介绍项目</strong></p>\n',
    },
    {
      id: 6438,
      sort: 3,
      title: '一些介绍',
      desc: '<p><strong>本项目</strong></p>\n',
    },
  ];
  // 模拟数据 end

  const theInited = shallowRef(false);
  const theNow = shallowRef('');

  const theRich = ref<any>([]);
  const onGetStoreInfo = () => {
    // 加个延迟，模拟数据接口
    setTimeout(() => {
      theRich.value = theData.map(({ id, ...theOthers }: any) => ({
        id: `test${id}`,
        ...theOthers,
      }));
      theNow.value = theRich.value[0].id;
      theInited.value = true;
    }, 400);
  };

  onLoad(onGetStoreInfo);
</script>