<template>
  <!--:style="itemObj.style"-->
  <draggable
    :ref="itemObj.ref"
    v-model="itemJson"
    group="dragArea"
    animation="300"
    :style="itemStyle"
    :class="itemClass"
    :move="onMove"
    :data-ref="itemObj.ref"
    @click.native.stop="itemClick(itemObj)"
    @end="endEvent"
    @sort="sortEvent"
    @add="addEvent"
    @remove="removeEvent"
    @update="updateEvent"
  >

    <template v-for="(item, index) in itemObj.children">
      <ap-dev-input v-if="item.type == 'input'" :options="item.ref" />
      <ap-dev-input-number v-else-if="item.type == 'input-number'" :options="item.ref" />
      <ap-dev-select v-else-if="item.type == 'select'" :options="item.ref" />
      <ap-dev-date-time v-else-if="item.type == 'date-time'" :options="item.ref" />
      <ap-dev-tree v-else-if="item.type == 'tree'" :options="item.ref" />
      <ap-dev-upload v-else-if="item.type == 'upload'" :options="item.ref" />
      <ap-dev-checkbox v-else-if="item.type == 'checkbox'" :options="item.ref" />
      <ap-dev-radio v-else-if="item.type == 'radio'" :options="item.ref" />
      <ap-dev-container-row v-else-if="item.type == 'container-row'" :options="item.ref" />
    </template>
  </draggable>

</template>

<script>

import draggable from 'vuedraggable'
import { formatDate } from 'ap-util/util/DateUtil'
import ApDevItemBase from './base/ApDevItemBase'
import ApDevInput from './ApDevInput'
import ApDevInputNumber from './ApDevInputNumber'
import ApDevSelect from './ApDevSelect'
import ApDevDateTime from './ApDevDateTime'
import ApDevTree from './ApDevTree'
import ApDevUpload from './ApDevUpload'
import ApDevCheckbox from './ApDevCheckbox'
import ApDevRadio from './ApDevRadio'

export default {
  name: 'ApDevContainerRow',
  components: {
    draggable,
    ApDevInput,
    ApDevInputNumber,
    ApDevSelect,
    ApDevDateTime,
    ApDevTree,
    ApDevUpload,
    ApDevCheckbox,
    ApDevRadio
  },
  extends: ApDevItemBase,
  data() {
    return {
      itemJson: []
    }
  },
  created() {
    // 默认参数
    this.defaultOptions = {
      span: 24,
      height: '500px',
      flexAlign: []
    }
  },
  methods: {
    // 获取ref编号
    getNewRef(type) {
      // 三位编号：取store根路径rootContainer的seq
      const seq = this.$store.state.json.seq
      // 更新seq
      this.$store.commit('seqIncrease')
      return type + '_' + (Array(3).join('0') + seq).slice(-3)
    },
    // 不同容器间
    addEvent(e) {
      // 判断是否已添加的组件(不是从左侧拖拉到中间)
      const isMainItem = e.item.classList.contains('dev-main-item')

      let obj = {}
      if (isMainItem) {
        const ref = this.getItemRef(e.item)
        obj = this.$store.getters.getItem(ref)
        // main中不同容器间拖拽 -> remove事件有bug(子拖到父第一个不触发)
        this.$store.commit('mainSwapItemWithDiffCtn', {
          parentRef: this.getItemRef(e.to),
          dataIndex: e.newIndex,
          obj: obj,
          ref: e.item.dataset.ref
        })
      } else {
        const type = e.item.dataset.type
        const newRef = this.getNewRef(type)
        obj = {
          ref: newRef,
          type: type,
          children: []
        }
        // 添加组件
        this.$store.commit('mainAddItem', {
          parentRef: this.getItemRef(e.to),
          dataIndex: e.newIndex,
          obj: obj
        })
      }
    },
    removeEvent(e) {
      // console.log("remove");
    },
    sortEvent(e) {
      // console.log("sort....");
    },
    endEvent(e) {
      // console.log("end....");
    },
    // 位置调换
    updateEvent(e) {
      this.$store.commit('mainSwapItemWithSameCtn', {
        ref: e.item.dataset.ref,
        oldIndex: e.oldIndex,
        newIndex: e.newIndex
      })
    },
    test() {
      this.options.placeholder = '哈哈哈'
      console.log('item click')
    },
    onMove() {

    }
  }
}
</script>

<style scoped>
    .dev-main-item {
        border: 1px solid gray;
        float: left;
    }

    .dev-main-item:hover {
        outline: solid 1px #ddd;
        cursor: move;
    }
</style>
