<template>
  <div class="th-card" :class="size || 'normal'">
    <div class="empty full" v-if="empty">
      <slot></slot>
    </div>
    <div class="full" v-else>
      <div :class="`thumb trans ${size==='small'?'thumb-small':'thumb-normal'} th-image-${type}`" :style="info.thumbnail?`background-image:url(${info.thumbnail});`:''" @mouseenter="mouseEnter" @mouseleave="mouseLeave">
        <div class="mask full trans" @click="defaultClick"></div>
      </div>
      <div class="meta">
        <div class="namediv">
          <div class="name" :title="info.name">
            <input type="text" v-focus="activeRename" :value="info.name" @blur="nameChange" v-if="activeRename">
            <div class="full cursor" @click="renameStart" v-else>{{ info.name }}</div>
          </div>
          <div class="action">
            <slot name="action"></slot>
          </div>
        </div>
        <div class="date" v-if="size!=='small'">
          <DateShower :date="info.updatedAt">修改于</DateShower>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import util from '../../libs/util'
export default {
  props: {
    type: {
      type: String,
      default: 'scene'
    },
    empty: {
      type: Boolean,
      default: false
    },
    info: {
      type: Object,
      default: () => ({})
    },
    size: {
      type: String,
      default: 'normal'
    },
    nameEditable: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    defaultClick(e) {
      this.$emit('on-default-click', e)
    },
    renameStart() {
      if (!this.nameEditable) {
        return
      }
      this.activeRename=true
    },
    mouseEnter(e) {
      let el = this.$el.querySelector('.mask')
      let direction = util.getMouseDirection(e)
      var dirName = new Array('top','right','bottom','left')
      el.className = el.className.replace(' trans', '')
      let pos = this.DIR_POS[dirName[direction]]
      el.style.top = pos.top
      el.style.left = pos.left
      el.offsetWidth
      el.className += ' trans'
      el.style.top = 0
      el.style.left = 0
    },
    mouseLeave(e) {
      let el = this.$el.querySelector('.mask')
      let direction = util.getMouseDirection(e)
      var dirName = new Array('top','right','bottom','left')
      let pos = this.DIR_POS[dirName[direction]]
      el.style.top = pos.top
      el.style.left = pos.left
    },
    nameChange(ev) {
      let name = ev.target.value
      this.activeRename = false
      if (name.replace(/(^\s*)|(\s*$)/g, '') === '') {
        this.$Message.warning('名称不能为空')
        ev.target.value = this.info.name
        return
      }
      if (ev.target.value === this.info.name) {
        return
      }
      this.$emit('on-name-change', ev.target.value)
    }
  },
  data() {
    return {
      DIR_POS: {
        left: {
            top: '0',
            left: '-100%'
        },
        right: {
            top: '0',
            left: '100%'
        },
        bottom: {
            top: '100%',
            left: '0'
        },
        top: {
            top: '-100%',
            left: '0'
        }
      },
      activeRename: false
    }
  }
}
</script>
