<template>
  <grid-layout :layout.sync="layout" v-bind="layoutAttrs" v-on="gridLayoutEvents">
    <grid-item
      v-for="item in layout"
      drag-ignore-from=".widget-body"
      :key="item.i"
      :static="isStatic"
      v-bind="item"
      v-on="gridLayoutItemEvents"
    >
      <dv-border-box10
        v-if="warnTheme === 'dark'"
        :ref="item.i + 'dvBorder'"
        :style="{ position: 'absolute' }"
        corColor="#00CED1"
      />

      <slot :name="item.i" :ref="item.i"></slot>
      <dv-decoration2
        :ref="item.i + 'dv2'"
        :style="{ position: 'absolute' }"
        :corColor="isDarkTheme ? '#00CED1' : '#ccc'"
      />
    </grid-item>
  </grid-layout>
</template>

<script>
import { GridLayout, GridItem } from 'vue-grid-layout'
import { pick, mapObject } from '../utils/index'
import DvBorderBox10 from '@/views/top/sub/DvBorderBox10'
import DvDecoration2 from '@/views/top/sub/DvDecoration2'
import { mapState } from 'vuex'

export default {
  name: 'SmartWidgetGrid',
  components: {
    GridLayout,
    GridItem,
    DvBorderBox10,
    DvDecoration2
  },
  provide () {
    return {
      layout: this.layout
    }
  },
  props: {
    layout: {
      type: Array,
      required: true
    },
    colNum: {
      type: Number,
      default: 12
    },
    maxRows: {
      type: Number
    },
    rowHeight: {
      type: Number,
      default: 48
    },
    margin: {
      type: Array,
      default: () => [10, 10]
    },
    draggable: {
      type: Boolean,
      default: true
    },
    resizable: {
      type: Boolean,
      default: true
    },
    isStatic: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      layoutAttrs: {
        // layout: this.layout,
        colNum: this.colNum,
        rowHeight: this.rowHeight,
        maxRows: this.maxRows,
        margin: this.margin,
        isDraggable: this.draggable,
        isResizable: this.resizable,
        useCssTransforms: false,
        // isMirrored: false,
        // autoSize: true,
        // verticalCompact: true,
        // responsive: false,
        // preventCollision: false,
        // responsiveLayouts: {},
        // breakpoints: { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 },
        ...this.$attrs
      },
      gridLayoutItemEvents: {}
    }
  },
  created () {
    const listeners = this.$listeners
    this.gridLayoutItemEvents = {}

    const layoutEventList = [
      'layout-created',
      'layout-before-mount',
      'layout-mounted',
      'layout-ready',
      'layout-updated',
      'breakpoint-changed'
    ]

    const layoutItemEventMap = {
      move: ['i', 'newX', 'newY'],
      resize: ['i', 'newH', 'newW', 'newHPx', 'newWPx'],
      moved: ['i', 'newX', 'newY'],
      resized: ['i', 'newH', 'newW', 'newHPx', 'newWPx'],
      'container-resized': ['i', 'newH', 'newW', 'newHPx', 'newWPx']
    }

    this.gridLayoutEvents = pick(listeners, layoutEventList)

    const that = this
    Object.keys(layoutItemEventMap).forEach(event => {
      const eventParams = layoutItemEventMap[event]
      this.gridLayoutItemEvents = Object.assign(this.gridLayoutItemEvents, {
        [event]: (...args) => {
          const params = mapObject(eventParams, (key, idx) => args[idx])
          this.$emit(event, params)
          this.$nextTick(() => {
            if ((event === 'resized' || event === 'container-resized')) {
              this.warnTheme === 'dark' && this.$refs[params.i + 'dvBorder'][0].setA({ w: params.newWPx, h: params.newHPx })
              this.$refs[params.i + 'dv2'][0].setA({ w: params.newWPx, h: 20 })
            }
          })
        }
      })
    })
  },
  computed: {
    ...mapState({
      warnTheme: state => state.app.warnTheme
    })
  },
  watch: {
    warnTheme (val) {
      this.$nextTick(() => {
        const that = this
        this.layout.forEach(p => {
          const parent = that.$refs[p.i + 'dvBorder'][0].$parent.$el
          const width = parent.offsetWidth
          const height = parent.offsetHeight

          val === 'dark' && that.$refs[p.i + 'dvBorder'][0].setA({ w: width, h: height })
          that.$refs[p.i + 'dv2'][0].setA({ w: width, h: 20 })
        })
      })
    }
  }
}
</script>

<style lang="less">
.vue-grid-layout {
  background: transparent;
  .smartwidget {
    height: inherit;
    width: inherit;
    &.smartwidget-fullscreen {
      height: 100%;
      width: 100%;
    }
  }
}
</style>
