<template>
  <div class="widget-form-item" @click.stop="handleSelectWidget(index)" :class="{'active':selectWidget.key == element.key}">
    <div
      class="drag-widget"
      title="拖拽"
      v-if="selectWidget.key == element.key"
    >
      <i class="icon-drag"></i>
    </div>
    <div class="widget-view-action" v-if="selectWidget.key == element.key">
      <i
        class="icon-application-delete del-icon"
        title="删除"
        @click.stop="handleWidgetDelete(index)"
      ></i>
    </div>

    <div class="order">
      <!-- <span style="white-space:pre"></span>
      <span class="line"></span>
      <span style="white-space:pre"></span> -->
      <!-- <span class="txt">分页符</span> -->
      <el-divider>分页符</el-divider>
      <!-- <span style="white-space:pre"></span>
      <span class="line"></span> -->
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import Draggable from 'vuedraggable'
import WidgetFormItem from '@/components/form/WidgetFormItem.vue'
import controlsApi from '@/api/controlsConfig.js'

export default {
  name: 'widget-pagination-layout',
  components: {Draggable, WidgetFormItem},
  props: ['element', 'select', 'index', 'data'],
  data() {
    return {
      activeName: 0,
      showIndex: 0,
    }
  },
  computed: {
    ...mapState('form', ['selectWidget']),
  },
  methods: {
    ...mapMutations({
      setSelectWidget: 'form/setSelectWidget', // 设置当前选中控件
    }),
    back() {
      this.showIndex -= 1
    },
    next() {
      this.showIndex += 1
    },
    handleCurrentChange(val) {
      this.showIndex = val - 1
    },
    handleSelectWidget(index) {
      this.setSelectWidget(this.data.list[index])
    },
    handleMoveStart: function (evt) {
      // 新增控件时  将控件属性切断联系
      evt.item._underlying_vm_ = deepmerge({}, evt.item._underlying_vm_, {
        clone: true,
      })
      const key =
        Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999)
      evt.item._underlying_vm_.key = key
    },
    handleWidgetColAdd($event, row, colIndex) {
      const newIndex = $event.newIndex
      const oldIndex = $event.oldIndex
      const item = $event.item
      // 防止布局元素的嵌套拖拽
      if (item.className.indexOf('data-grid') >= 0) {
        // 如果是列表中拖拽的元素需要还原到原来位置
        item.tagName === 'DIV' &&
          this.data.list.splice(
            oldIndex,
            0,
            row.columns[colIndex].list[newIndex]
          )
        row.columns[colIndex].list.splice(newIndex, 1)
        return false
      }
      controlsApi.handleLayoutComponents(this)
      this.setSelectWidget(row.columns[colIndex].list[newIndex])
    },
    handleWidgetDelete(index) {
      if (this.data.list.length - 1 === index) {
        if (index === 0) {
          this.setSelectWidget({options: {validateType: ''}})
        } else {
          this.setSelectWidget(this.data.list[index - 1])
        }
      } else {
        this.setSelectWidget(this.data.list[index + 1])
      }

      this.$nextTick(() => {
        this.data.list.splice(index, 1)
        //删除一个分页布局时,需要判断被删除的是否时最后一个分页布局
        if (this.data.pageSize == 2) {
          //最后一个分页布局
          // this.data.list.splice(0, 1);
          for (let i = this.data.list.length - 1; i >= 0; i--) {
            if (this.data.list[i].ctrlType == 'pageButton') {
              //删除分页布局按钮
              this.data.list.splice(i, 1)
            } else if (this.data.list[i].ctrlType == 'pageSteps') {
              //删除分页布局条
              this.data.list.splice(i, 1)
            }
          }
          // this.data.list.pop();
        } else {
          this.data.list[0].pageSize -= 1
          this.data.list[0].pageStepsArr.pop()
        }
        this.data.pageSize -= 1
      })
    },
  },
}
</script>
<style lang="scss" scoped>
@import '@/assets/css/form-editor.scss';

.order {
  height: 50px;
  line-height: 47px;
  // text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  ::v-deep {
    .el-divider--horizontal {
      height: 2px;
      background-color: #82b3d5;
    }
  }
}
.order .line {
  display: inline-block;
  flex: 1;
  border-top: 3px solid #82b3d5;
}
.order .txt {
  color: #555;
  vertical-align: middle;
}

.widget-col {
  padding-bottom: 0;
  padding: 15px 5px;
}

.active {
  outline: 2px solid $--form-design-active-color;
}

.el-col {
  min-height: 50px;
}

.widget-col-list {
  min-height: 50px;
  border: 2px solid #ededed;
}

div.widget-view-action {
  width: 40px;
  background: $--form-design-active-color;
  .del-icon{
    margin-left: 12px;
  }
}

div.widget-view-action i.icon-trash {
  margin: 0 10px;
}

div.drag-widget {
  border-color: $--form-design-active-color;
}

div.drag-widget i.icon-drag {
  color: #fff;
}
</style>