<template>
  <div
    class="poster-content"
    :style="{
      width:posterData.width+'px',
      height:posterData.height+'px',
      borderRadius:posterData.borderRadius+'px',
      backgroundImage:'url('+posterData.background+')'
    }"
    style="background-size: 100% 100%;"
    @contextmenu.prevent
  >
    <el-empty v-if="!posterData.background" description="请上传一张背景图" style="position: absolute;width: 100%;height: 80%" />
    <vue-draggable-resizable
      v-for="(item,key) in posterData.views"
      :key="key"
      :ref="'draggable-'+key"
      :w="item.css.width"
      :h="item.css.height"
      :x="item.css.left"
      :y="item.css.top"
      :parent="true"
      style="cursor: move;"
      :is-conflict-check="tools.isConflictCheck"
      :snap="tools.snap"
      :snap-tolerance="tools.snapTolerance"
      :min-width="20"
      :min-height="20"
      :lock-aspect-ratio="lockAspectRatio(item.name)"
      @dragging="onDrag"
      @resizing="onResize"
      @mousedown.native="index = key"
      @refLineParams="getRefLineParams"
      @contextmenu.prevent.native="onContextmenu(key,$event)"
    >
      <div style="position: relative">
        <div :style="getBgStyle(item)" class="bgBorder" />
        <component :is="viewsName[item.name]" :key="key" :item="item" :edit="tools.edit" />
      </div>
    </vue-draggable-resizable>
    <!--辅助线-->
    <span
      v-for="item in vLine"
      v-show="item.display"
      class="ref-line v-line"
      :style="{ left: item.position, top: item.origin, height: item.lineLength}"
    />
    <span
      v-for="item in hLine"
      v-show="item.display"
      class="ref-line h-line"
      :style="{ top: item.position, left: item.origin, width: item.lineLength}"
    />
    <!--辅助线END-->
  </div>
</template>

<script>
import VueDraggableResizable from 'vue-draggable-resizable-gorkys'

// 导入默认样式
import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css'
import DkPosterViewAvatar from './views/DkPosterViewAvatar'
import DkPosterViewName from './views/DkPosterViewName'
import DkPosterViewQrcode from './views/DkPosterViewQrcode'
import DkPosterViewText from './views/DkPosterViewText'
import DkPosterViewImage from './views/DkPosterViewImage'
import Vue from 'vue'
import Contextmenu from 'vue-contextmenujs'

Vue.use(Contextmenu)
export default {
  name: 'DkVuePosterContent',
  components: {
    DkPosterViewAvatar,
    DkPosterViewQrcode,
    DkPosterViewName,
    DkPosterViewText,
    DkPosterViewImage,
    VueDraggableResizable
  },
  props: {
    value: {
      type: [Array, Object],
      default: () => {
        return {}
      }
    },
    tools: {
      type: [Array, Object],
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      index: 0,
      posterData: this.value,
      viewsName: {
        avatar: 'DkPosterViewAvatar',
        name: 'DkPosterViewName',
        qrcode: 'DkPosterViewQrcode',
        text: 'DkPosterViewText',
        image: 'DkPosterViewImage'
      },
      vLine: [],
      hLine: [],
      indexKey: 0
    }
  },
  computed: {

  },
  watch: {
    value() {
      this.posterData = this.value
    },
    posterData(val) {
      this.$emit('input', val)
    }
  },
  methods: {
    lockAspectRatio(name) {
      if (name === 'text' || name === 'name') {
        return false
      } else {
        return true
      }
    },
    getBgStyle(item) {
      return {
        top: (-parseInt(item.css.borderWidth)) + 'px',
        left: (-parseInt(item.css.borderWidth)) + 'px',
        width: (item.css.width + item.css.borderWidth * 2 || 0) + 'px',
        height: (item.css.height + item.css.borderWidth * 2 || 0) + 'px',
        borderColor: item.css.borderColor || '#fff',
        backgroundColor: item.css.borderColor || '#fff',
        borderStyle: 'solid',
        borderWidth: item.css.borderWidth + 'px',
        borderRadius: item.css.borderRadius + 'px'
      }
    },
    // 辅助线回调事件
    getRefLineParams(params) {
      if (this.tools.refLine) {
        const { vLine, hLine } = params
        this.vLine = vLine
        this.hLine = hLine
      }
    },
    checkParentSize() {
      // 刷新大小检测
      for (let i = 0; i < this.posterData.views.length; i++) {
        this.$refs['draggable-' + i][0].checkParentSize()
      }
    },
    settingAttribute() {
      // 刷新冲突检测
      for (let i = 0; i < this.posterData.views.length; i++) {
        this.$refs['draggable-' + i][0].$el.setAttribute('data-is-check', `${this.tools.isConflictCheck}`)
        // 设置对齐元素
        this.$refs['draggable-' + i][0].$el.setAttribute('data-is-snap', `${this.tools.snap}`)
      }
      this.indexKey + 1
    },
    getCss(type = 'h', item) {
      var w = item.css.borderWidth || 0
      if (type === 'w') {
        return item.css.width + w
      } else if (type === 'h') {
        return item.css.height + w
      } else if (type === 'x') {
        return item.css.left + w
      } else if (type === 'y') {
        return item.css.top + w
      }
    },
    // 添加新的组件
    add(name = 'avatar') {
      var item = { name: name, css: { 'left': 0, 'top': 0, 'width': 80, 'height': 80 }}
      if (name === 'name') {
        item.type = 'text'
        item.css['height'] = 24
        item.css['width'] = 100
        item.css['fontSize'] = 16
        item.css['color'] = '#000'
      } else if (name === 'text') {
        item.type = 'text'
        item.css['height'] = 24
        item.css['width'] = 100
        item.css['fontSize'] = 16
        item.css['color'] = '#000'
      } else if (name === 'image') {
        item.type = 'image'
        item.css['borderRadius'] = 0
        item.css['borderColor'] = '#fff'
      } else if (name === 'avatar') {
        item.type = 'image'
        item.css['borderRadius'] = 0
        item.css['borderColor'] = '#fff'
      } else if (name === 'qrcode') {
        item.type = 'qrcode'
      }
      this.posterData.views.push(item)
    },
    // 调整大小
    onResize(left, top, width, height) {
      var css = this.posterData.views[this.index].css
      css.left = left
      css.top = top
      css.width = width
      css.height = height
    },
    // 拖拽
    onDrag(left, top) {
      var css = this.posterData.views[this.index].css
      css.left = left
      css.top = top
    },
    swapItems(arr, index1, index2) {
      arr[index1] = arr.splice(index2, 1, arr[index1])[0]
      return arr
    },
    onContextmenu(index, event) {
      var maxIndex = this.posterData.views.length - 1
      var views = this.posterData.views
      this.$contextmenu({
        items: [
          {
            label: '移动到上一层',
            onClick: () => {
              if (index >= maxIndex) {
                return false
              }
              views = this.swapItems(views, index, index + 1)
              this.index = index + 1
            }
          },
          {
            label: '移动到下一层', onClick: () => {
              if (index <= 0) {
                return false
              }
              this.posterData.views = this.swapItems(this.posterData.views, index, index - 1)
              this.index = index - 1
            }
          },
          {
            label: '移动到最顶层', onClick: () => {
              if (index >= maxIndex) {
                return false
              }
              this.posterData.views = this.swapItems(this.posterData.views, index, maxIndex)
              this.index = maxIndex
            }
          },
          {
            label: '移动到最低层', onClick: () => {
              if (index <= 0) {
                return false
              }
              this.posterData.views = this.swapItems(this.posterData.views, index, 0)
              this.index = 0
            }
          },
          {
            label: '删除元素', onClick: () => {
              this.posterData.views.splice(index, 1)
            }
          }
        ],
        event,
        customClass: 'class-a',
        zIndex: 9999,
        minWidth: 230
      })
    }

  }
}
</script>

<style scoped lang="scss">
.poster-content {
  position: relative;
  box-sizing: content-box;
  //box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  box-shadow: -5px 5px 20px 2px rgb(0 0 0 / 30%);
  background: #fff;
  border: 5px solid #fff;

  .bg {
    overflow: hidden;
    position: absolute;
    width: 100%;
    z-index: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
  }

  .bgBorder {
    position: absolute;
    z-index: -1
  }
}

</style>
