<template>
  <div
    :style="styles"
    :class="{
      'active': showOptions,
    }"
    class="card"
    @click.stop="$emit('click', {id, data,})"
  >
    <!-- 操作按钮 -->
    <CardOptions
      v-model="data"
      :show-options="showOptions"
      :canvas-width="canvasWidth"
      :canvas-height="canvasHeight"
      @on-change="$emit('on-change')"
      @test="(point) => $emit('test', point)"
    />
    <div style="width: 100%; height: 100%;">
      <span v-if="!data.bg">{{ data.n }}</span>
      <div v-if="data.bg" :style="bgStyle" alt="" class="bg"/>
      <div v-if="data.bbg" :style="`background-image:url(${data.bbg})`" alt="" class="bg bbg"/>
      <div v-if="data.tbg" :style="`background-image:url(${data.tbg})`" alt="" class="bg tbg"/>
    </div>
  </div>
</template>

<script>
import CardOptions from './card-options'
export default {
  components: {
    CardOptions,
  },
  props: {
    value: {
      type: Object,
      default: () => {
        return {}
      },
    },
    id: {
      type: [Number, String],
      default: 0,
    },
    // 显示操作按钮
    showOptions: {
      type: Boolean,
      default: false,
    },
    // 画布宽度
    canvasWidth: {
      type: [String, Number],
      default: '',
    },
    // 画布高度
    canvasHeight: {
      type: [String, Number],
      default: '',
    },
  },
  data() {
    return {
      data: {},
    }
  },
  computed: {
    styles() {
      const { data, showOptions } = this
      const { bg, w, h, x, y, z, deg, o, } = data
      const styles = {}
      styles.backgroundColor = bg || '#00000011'
      styles.width = `${w}px`
      styles.height = `${h}px`
      styles.top = `${y}px`
      styles.left = `${x}px`
      styles.zIndex = showOptions ? '999999' : z * 100 || 0
      styles.transform = `rotateZ(${deg}deg)`
      styles.opacity = o
      return styles
    },
    bgStyle() {
      const { data } = this
      const { bbg } = data
      const styles = {}
      styles.backgroundImage = `url(${data.bg})`
      if (bbg) {
        console.log('bbg', bbg)
        styles.maskImage = `url('${bbg}')`
        styles.maskRepeat = `no-repeat`
        styles.maskSize = `100%`
      }
      return styles
    },
  },
  watch: {
    value(value) {
      const data = this.initData(value)
      if (JSON.stringify(data) !== JSON.stringify(this.data)) {
        this.data = data
      }
    },
    data(data) {
      this.$emit('input', data)
    },
  },
  created() {
    this.data = this.initData(this.value)
  },
  methods: {
    initData(value) {
      const data = {
        n: '', // 单位px
        w: 100, // 单位px
        h: 100, // 单位px
        x: 0, // 坐标
        y: 0, // 坐标
        z: 1, // 层级
        o: 1, // 透明度
        bg: '', // 背景图
        deg: 0, // 旋转角度
        bbg: '', // 底部图片
        tbg: '', // 顶部图片
        tags: [], // 标签
        ...value
      }
      return data
    },
  },
}
</script>

<style lang="scss" scoped>
.card {
  position: absolute;
  cursor: pointer;
  /* transform: rotateZ(30deg); */
  &.active {
    opacity: 0.8; // 选中的时候，半透明效果
  }
  /* transform: rotateZ(30deg); */

  .bg {
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    user-select: none;
    pointer-events: none;
    &.bbg{
      z-index: 1;
    }
    &.tbg{
      z-index: 3;
    }
  }

  // 操作按钮区域
  $diff: -4px;
  .options {
    position: absolute;
    top: $diff;
    left: $diff;
    right: $diff;
    bottom: $diff;
    display: none;
    &.show {
      display: block;
    }
    .move-point {
      width: 8px;
      height: 8px;
      border-radius: 100%;
      z-index: 9999;
      background-color: #09f;
      position: absolute;

      $model: calc(50% - 4px);

      &.top-left {
        left: 0;
        top: 0;
      }
      &.top-right {
        right: 0;
        top: 0;
      }
      &.bottom-left {
        bottom: 0;
        left: 0;
      }
      &.bottom-right {
        bottom: 0;
        right: 0;
      }
      &.top {
        top: 0;
        left: $model;;
      }
      &.bottom {
        bottom: 0;
        left: $model;
      }
      &.left {
        left: 0;
        top: $model;
      }
      &.right {
        right: 0;
        top: $model;;
      }
    }
  }
}
</style>
