<template>
  <Row :gutter="formData.config.gutter">
    <Form
      :label-width="formData.config.labelPosition=='top'?null:formData.config.labelWidth"
      :label-position="formData.config.labelPosition"
      :label-colon="formData.config.labelColon"
      style="width:100%;position: relative;">
      <BaseDraggable
        ref="baseDraggable"
        :data="formData"
        :config="formData.config"
        :curId="curId"
        :hasAdd="hasAdd"
        @itemClick="v => $emit('itemClick', v)" />
      <div v-if="!formData.schema.length" class="tips">从左侧拖入或点选组件进行表单设计</div>
    </Form>
  </Row>
</template>
<script>

export default {
  name: 'FormContent',
  props: {
    // form 配置项
    formData: {
      type: Object,
      default: () => ({ config: {}, schema: [] }),
    },
    curId: [Number, String],
    hasAdd: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      builder: null,
    }
  },
  computed: {
    //拖拽组件样式
    dragOptions() {
      return {
        animation: 200,
        group: 'form',
        disabled: false,
        ghostClass: 'ghost', // todo
      }
    },
  },
}
</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{
      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{
    right: 56px;
    border-color: #409eff;
    color: #409eff;
    &:hover{
      background: #409eff;
      color: #fff;
    }
  }
  &-del{
    right: 20px;
    border-color: #f56c6c;
    color: #f56c6c;
    &:hover{
      background: #f56c6c;
      color: #fff;
    }
  }
}

.tips{
    position: absolute;
    top: 200px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 28px;
    color: #ccb1ea;
}
::v-deep .hide-label{
  >label{
    display: none;
  }
  .ivu-form-item-content{
    margin-left: 0!important;
  }
}
::v-deep .item-required{
  >label::before{
    content: "*";
    display: inline-block;
    margin-right: 4px;
    line-height: 1;
    font-family: SimSun;
    font-size: 14px;
    color: #ed4014;
  }
}
</style>