<template>
  <div>
    <span style="font-size:14px;font-weight: bold">横向分页及列顺序设置</span><span style="float: right"><span style="cursor: pointer; color: #4170d6" @click="addArea">新增分页</span>（最多三个）</span>
    <template v-for="iarea in areaNumber">
      <draggable :key="`${_uid}_${iarea}`"
                 class="drag-arear"
                 :style="'height:' + ((330/areaNumber) - ((areaNumber-1)*6)/areaNumber) + 'px'"
                 v-model="columnsGroup[iarea-1]"
                 :options="{group: {name: 'layout', put: true}, draggable: '.column', forceFallback: true, sort: true, animation: 50}"
                 @end="handleEnd">
        <template v-for="(item,idx) in columnsGroup[iarea-1]">
          <section class="column"
                   :key="`col${_uid}_${idx}`">{{item.title}}
            <Checkbox v-model="item.fixedWidth" style="margin-top: 1px">定宽</Checkbox>
            <span @click="copyItem(item, iarea)" class="copy-span">复制</span>
            <span @click="deleteItem(item, iarea, idx)" class="delete-span">删除</span>
          </section>
        </template>
      </draggable>
    </template>
    <span style="font-size:14px;font-weight: bold">已删除列</span>
    <draggable :key="`deleteItem`"
                class="drag-arear"
                v-model="columnsDelete"
                :options="{group: {name: 'layoutDel', put: false, pull: false}, draggable: '.column', forceFallback: true, sort: false, animation: 50}"
                @end="handleEnd">
      <template v-for="(item,idx) in columnsDelete">
        <section class="column"
                  :key="`col${_uid}_${idx}`">{{item.title}}
          <span @click="revertItem(item, idx)" class="copy-span">还原</span>
        </section>
      </template>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  name: 'ColumnPages',
  components: { draggable },
  props: {
    columnsGroup: {
      type: Array,
      default: () => [[]]
    },
    columnsDelete: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      areaNumber: 1
      // deleteItemArr: []
    }
  },

  methods: {
    handleEnd() {
      this.$emit('on-end', this.columnsGroup)
    },
    copyItem(item, iarea) {
      this.columnsGroup[iarea - 1].push(item)
    },
    deleteItem(item, iarea, idx) {
      this.columnsGroup[iarea - 1].splice(idx, 1)
      this.columnsDelete.push(item)
    },
    revertItem (item, idx) {
      this.columnsDelete.splice(idx, 1)
      this.columnsGroup[0].push(item)
    },
    addArea () {
      if (this.areaNumber < 3) {
        this.areaNumber++
      }
      if (!this.columnsGroup[this.areaNumber - 1]) {
        this.columnsGroup.push([])
      }
    }
  },
  mounted() {
    // 为了防止火狐浏览器拖拽的时候以新标签打开，此代码真实有效
    document.body.ondrop = function (event) {
      event.preventDefault();
      event.stopPropagation();
    }
    this.areaNumber = this.columnsGroup.length
  }
}
</script>

<style lang="less" scoped>
.drag-arear {
	height: 110px;
	overflow-y: auto;
	width: 700px;
	padding: 0 8px;
	margin-bottom: 6px;
	background-color: #fff;
	-webkit-border-radius: 3px;
	-webkit-box-shadow: 0px 0px 2px #b2b2b2;
	cursor: default;
	.column {
		float: left;
		position: relative;
		margin: 8px 8px 0px 0px;
		padding: 8px 118px 8px 8px;
		border: 1px #ddd solid;
		// margin-bottom: 4px;
		white-space: nowrap;
		.ivu-checkbox-wrapper {
			position: absolute;
			right: 58px;
			font-size: 12px;
			color: #4170d6;
		}
    .copy-span {
			position: absolute;
			color: #4170d6;
			font-size: 12px;
      top: 9px;
			right: 33px;
      cursor: pointer;
    }
    .delete-span {
			position: absolute;
			color: #4170d6;
			font-size: 12px;
      top: 9px;
			right: 8px;
      cursor: pointer;
    }
	}
}
</style>
