<template>
  <draggable
      :class="['list-group',isRow?'row':'']"
      tag="div"
      v-model="data.schema"
      :move="onMove"
      v-bind="dragOptions">
      <Col
        :class="['item',`${curId===item.id?'active':''}`]"
        :span="item.layout"
        v-for="(item, index) in data.schema"
        :key="item.id"
        @click.native.stop="itemClick(item)">
        <!-- 其他组件 -->
        <template v-if="!isLayoutComponent(item)">
          <!-- 直接用required属性 变化时 iview 内部会报错误 这里用样式来实现 -->
          <FormItem
            :class="[item.title.hide && 'hide-label',item.required && 'item-required']"
            :label="item.title.content">
            <component
              :info="item"
              :size="config.size"
              :key="item.id"
              :ref="`base${item.name}`"
              :is="`base-${componentsName(item.form.type)}`">
            </component>
            <!-- icon 相关 -->
            <span v-if="item.title.icon.show" class="tips">icon类型和名称，根据具体项目对应展示</span>
            <span slot="label" v-if="item.title.icon.show">
              <span v-if="item.title.icon.iconPosition ==='right'">{{item.title.content}}</span>
              <Poptip
                word-wrap
                trigger="hover"
                style="cursor: pointer;"
                width="140"
                placement="right-start"
                :content="item.title.icon.tips">
                <Icon type="ios-help-circle" />
              </Poptip>
              <span v-if="item.title.icon.iconPosition ==='left' ">{{item.title.content}}</span>
            </span>
          </FormItem>
        </template>
        <!-- 布局型组件 -->
        <template v-else>
          <!-- 部分属性  事件为 row 特有 -->
          <component
            class="component-class"
            :config ="config"
            :info="item"
            :dragOptions="dragOptions"
            :size="config.size"
            :key="item.id"
            :curId="curId"
            :ref="`base${item.name}`"
            @itemCopy="itemCopy"
            @itemDel="itemDel"
            @itemClick="(v, r) => $emit('itemClick', v, r)"
            :is="`base-${componentsName(item.form.type)}`">
          </component>
        </template>
        <span
          class="item-copy item-icon"
          :style="`right:calc(55px + ${data.config?data.config.gutter/2:10}px)`"
          v-if="hasAdd"
          @click="itemCopy(item)">
          <Icon type="md-copy" :size="16" />
        </span>
        <span
          class="item-del item-icon"
          :style="`right:calc(20px + ${data.config?data.config.gutter/2:10}px)`"
          @click="itemDel(index,item)">
          <Icon type="ios-trash-outline" :size="16" />
        </span>
      </Col>
    </draggable>
</template>

<script>
import draggable from 'vuedraggable'
import { baseComponentMixins, formItemMixins } from '../../mixins'
import  * as cell from '../../cell/*.vue'

export default {
  name: 'BaseDraggable',
  components: {
    draggable,
    ...cell,
  },
  mixins: [ baseComponentMixins, formItemMixins ],
  props: {
    type: {
      type: String,
      default: 'Form',
    },
    data: {
      type: Object,
      default: () => ({}),
    },
    config: {
      type: Object,
      default: () => ({}),
    },
    dragOptions: {
      type: Object,
      default: () => ({
        animation: 200,
        group: 'form',
        disabled: false,
        ghostClass: 'ghost', // todo
      }),
    },
    curId: {
      type: [Number, String],
      default: '',
    },
    //是否可复制  某些常见不可复制
    hasAdd: {
      type: Boolean,
      default: true,
    },
    isRow: { //是否是行容器  用来控制 行容器 无法再次嵌套行容器
      type: Boolean,
      default: false,
    },
  },
  methods: {
    isLayoutComponent(item) {
      return this.layoutItems.some(v => v.type === item.form.type)
    },
    // item 点击
    itemClick(item) {
      this.$emit('itemClick', item.id)
    },
    // item 复制
    itemCopy(item) {
      const id = (new Date).getTime()
      const itemN = JSON.parse(JSON.stringify({ ...item, ...{ id, name: `field${id}`, isNew: true }}))
      this.data.schema.push(itemN)
    },
    itemDel(index, item) {
      //修改的字段是没有 isNew字段的
      if (item.isNew) {
        this.data.schema.splice(index, 1)
      } else {
        this.$Modal.confirm({
          title: '提示',
          content: '删除字段操作会级联删除所有关联地区 扩展表单的相应字段，请确认是否执行该操作？',
          onOk: () => {
            this.data.schema.splice(index, 1)
          },
        })
      }
    },
    getBaseComponent(ref) {
      return this.$refs[ref][0]
    },
    //row 无法再次移动到row 中
    onMove(e) {
      const flagRow = e.draggedContext.element.form.type === 'Row' && e.to.className.includes('row')
      return !flagRow
    },
  },
}
</script>

<style lang="scss" scoped>
.list-group{
  min-height: 40px;
  display: flex;
  flex-flow: row wrap;
}
::v-deep .ghost{
  border-top: 3px solid #5959df;
  overflow: hidden;
}
::v-deep li.ghost{
  background: #f6f7ff;
  width: 100%;
  height: 50px;
  color: #f6f7ff;
}

.item{
  padding:0 5px;
  cursor: move;
  position: relative;
  .ivu-form-item{
    padding: 12px;
    margin-bottom: 15px;
    border-radius: 6px;
    &:hover{
      background: #f6f7ff;
    }
  }
  &.active {
    > .ivu-form-item,.component-class{
      background: #f6f7ff;
    }
    > .base-row {
      border-color: #17b3a3;
      &::before {
        color: #17b3a3;
      }
    }
    > .item-icon{
      display: block;
    }
  }
  &:hover {
    > .item-icon{
      display: block;
    }
  }
  &-icon{
    position: absolute;
    background: #fff;
    top: -11px;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    border-radius: 50%;
    border: 1px solid;
    cursor: pointer;
    z-index: 1;
    display: none;
  }
  &-copy{
    border-color: #409eff;
    color: #409eff;
    &:hover{
      background: #409eff;
      color: #fff;
    }
  }
  &-del{
    border-color: #f56c6c;
    color: #f56c6c;
    &:hover{
      background: #f56c6c;
      color: #fff;
    }
  }
}
.tips{
  color: #999;
  font-size: 10px;
}
</style>