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

import { tools } from '@src/store/Modules/tools'
import { shared_consts } from '@src/common/shared_vuejs'
import { IAnim, IElemText } 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,
    },
    elemsText: {
      type: Array,
      required: false,
      default: () => {
        return []
      }
    },
    vertalign: Number,
    anim: { type: Object as PropType<IAnim>,
      required: false,
      default : () => {
        return {name: '', clduration: '', cldelay: '', timingtype: 'ease-in-out'}
      },
    },
    speed: {
      type: Number,
      required: false,
      default: 1
    },
    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,
    }
  },

})