import {
  defineComponent, onMounted, ref, toRef, watch,
} from 'vue'

import { IMyPage } from '@src/model'
import { useGlobalStore } from '@store/globalStore'
import { LandingFooter } from '@/components/LandingFooter'

import { CImgTitle } from '../CImgTitle/index'
import { CTitle } from '../CTitle/index'
import { useRouter } from 'vue-router'

export default defineComponent({
  name: 'CMyPageIntro',
  components: { LandingFooter, CImgTitle, CTitle },
  props: {
    title: String,
    mypath: {
      type: String,
      required: false,
      default: '',
    },
    img: {
      type: String,
      required: false,
      default: '',
    },
    sizes: {
      type: String,
      required: false,
      default: '',
    },
    styleadd: {
      type: String,
      required: false,
      default: '',
    },
    maxheightimg: {
      type: Number,
    },
    maxwidthimg: {
      type: Number,
    },
    link: {
      type: String,
    },
  },

  setup(props) {
    const rec = ref<IMyPage | null>(null)
    const mypath = toRef(props, 'mypath')
    const $router = useRouter()

    const globalStore = useGlobalStore()

    const load = async (): Promise<void> => {
      // console.log('load', mypath.value)
      if (mypath.value !== '') rec.value = await globalStore.loadPage('/' + mypath.value)
    }

    watch(() => props.mypath, async (to: string, from: string) =>  {
      // console.log('load', mypath.value)
      if (mypath.value !== '') rec.value = await globalStore.loadPage('/' + mypath.value)
    })

    function openclick() {
      if (props.link)
        $router.push(props.link)
    }


    // onMounted(load)

    load()

    return { rec, openclick }
  },

})