myprojplanet_vite/src/components/CImgPoster/CImgPoster.ts

import { defineComponent, PropType, ref } from 'vue'

import { tools } from '@src/store/Modules/tools'
import { shared_consts } from '@src/common/shared_vuejs'
import { IAnim } from '@src/model'

export default defineComponent({
  name: 'CImgPoster',
  props: {
    src: {
      type: String,
      required: false,
      default: '',
    },
    title: {
      type: String,
      required: false,
      default: '',
    },
    myheight: {
      type: String,
      required: false,
      default: '',
    },
    myheightmobile: {
      type: Number,
      required: false,
      default: 0,
    },
    legendinside: {
      type: String,
      required: false,
      default: '',
    },
    legend: {
      type: String,
      required: false,
      default: '',
    },
    classTitle: String,
    classSubtitle: String,
    colorTitle: String,
    colorSubtitle: String,
    vertalign: Number,
    speed: {
      type: Number,
      required: false,
      default: 1
    },
    anim: {
      type: Object as PropType<IAnim>,
      required: false,
      default: () => {
        return { name: '', clduration: '', cldelay: '' }
      },
    },
    anim2: {
      type: Object as PropType<IAnim>,
      required: false,
      default: () => {
        return { name: '', clduration: '', cldelay: '' }
      },
    },
    logo: String,
    logoheight: String,
    logowidth: String,
    fit: String,
  },

  setup(props) {
    function getsrc(): string {
      const filefull = tools.getimgFullpathbysize(props.src)

      return tools.getimgbysize(filefull.path, filefull.file)
    }

    function getaltimg(): string {
      const filefull = tools.getimgFullpathbysize(props.src)
      return tools.getaltimg(filefull.path, filefull.file, props.title)
    }

    function myclass() {
      let mycl = ''
      if (props.vertalign === shared_consts.VERTALIGNTYPE.UP) {
        mycl += ' align_top'
      } else if (props.vertalign === shared_consts.VERTALIGNTYPE.CENTER) {
        mycl += ' align_middle'
      } else if (props.vertalign === shared_consts.VERTALIGNTYPE.DOWN) {
        mycl += ' align_bottom'
      } else if (props.vertalign === shared_consts.VERTALIGNTYPE.DOWN_LEFT) {
        mycl += ' align_bottom_left'
      } else if (props.vertalign === shared_consts.VERTALIGNTYPE.UP_LEFT) {
        mycl += ' align_top_left'
      }

      return mycl
    }

    return {
      getsrc,
      getaltimg,
      myclass,
      tools,
    }
  },

})