<template>
  <div class="dynamic-form" v-if="isSelected">
    <div class="dynamic-form-header">
      <h2>{{ curElement.title }}</h2>
      <div>{{ `组件ID: ${curElement.id}` }}</div>
    </div>
    <Form class="dynamic-form-component" @submit.native.prevent :label-width="110" :model="form" v-if="curElement.schame && curElement.schame.length">
      <h3 v-if="!hasGroup">组件属性</h3>
      <template v-for="(item, index) in curElement.schame">
        <div v-if="item.title">
          <h3>{{ item.title }}</h3>
          <FormItem :label="child.name" :key="curElement.id + child.key" v-for="child in item.children">
            <component :is="getComponent(child.type)" :options="child.options" :formControl="child.formControl" :limit-name="child.type === 'FormList' && curElement.name === 'cs-goods-tabs' ? 'cs-goods' : ''" v-model="form[child.key]" />
          </FormItem>
        </div>
        <FormItem class="Df-component-formitem" v-else :label="item.name" >
          <component :hide3Column="curElement.name === 'cs-discount' && item.key ==='column'" :is="getComponent(item.type)" :options="item.options" :formControl="item.formControl" :limit-name="item.type === 'ComponentSelect' && curElement.name === 'cs-goods-tabs' ? 'cs-goods' : ''" v-model="form[item.key]" />
        </FormItem>
      </template>
    </Form>
    <Form class="dynamic-form-basic" @submit.native.prevent :label-width="110">
      <h3>基础样式</h3>
      <template v-if="childSelected">
        <template v-for="item in styleSchame.curEle">
          <FormItem :label="item.label">
            <template v-if="item.label === '宽高'">
              <InputNumber class="Df-basic-inputnumber" :max="375" :min="0" v-model="commonStyle.width" @on-change="updateStyle($event, 'width')"></InputNumber>
              <InputNumber :max="667" :min="0" v-model="commonStyle.height" @on-change="updateStyle($event, 'height')"></InputNumber>
            </template>
            <template v-else-if="item.label === '位置'">
              <InputNumber class="Df-basic-inputnumber" v-model="commonStyle.left" @on-change="updateStyle($event, 'left')"></InputNumber>
              <InputNumber v-model="commonStyle.top" @on-change="updateStyle($event, 'top')"></InputNumber>
            </template>
            <upload v-else-if="item.label === '背景图片'" v-model="commonStyle.backgroundImage" @change="updateStyle($event, 'backgroundImage')"></upload>
            <ColorSelector v-else-if="item.label === '背景颜色'" v-model="commonStyle.backgroundColor" @input="updateStyle($event, 'backgroundColor')"></ColorSelector>
            <template v-else>
              <Tooltip placement="top" :content="child.content" v-for="child in item.list" :key="child.content">
                <Button type="ghost" :icon="child.icon" @click="changeAlignType(child.args)"></Button>
              </Tooltip>
            </template>
          </FormItem>
        </template>
      </template>
      <template v-if="parentSelected">
        <template v-for="item in styleSchame.curChild">
          <FormItem :label="item.label">
            <template v-if="item.label === '容器宽高'">
              <InputNumber class="Df-basic-inputnumber" :max="375" :min="0" v-model="point.w" @on-change="updatePoint($event, 'w')"></InputNumber>
              <InputNumber :max="667" :min="0" v-model="point.h" @on-change="updatePoint($event, 'h')"></InputNumber>
            </template>
            <template v-else-if="item.label.indexOf('边距') > -1">
              <Slider v-model="commonStyle[item.key]" @on-input="changeMargin" />
            </template>
            <upload v-else-if="item.label === '背景图片'" v-model="commonStyle.backgroundImage" @change="updateStyle($event, 'backgroundImage')"></upload>
            <ColorSelector v-else-if="item.label === '背景颜色'" v-model="commonStyle.backgroundColor" @input="updateStyle($event, 'backgroundColor')"></ColorSelector>
            <template v-else>
              <Tooltip placement="top" :content="child.content" v-for="child in item.list" :key="child.content">
                <Button type="ghost" :icon="child.icon" @click="resizedEvent(...child.args)"></Button>
              </Tooltip>
            </template>
          </FormItem>
        </template>
      </template>
    </Form>
  </div> 
</template>
<script lang="ts" src="./index.ts"></script>
<style lang="less" scoped>
  .dynamic-form {
    padding: 0 0 16px;
    background: #fff;

    &-header {
      padding: 10px 0 5px;
      border-bottom: 8px solid #f5f6fa;
      text-align: center;

      div {
        color: #a1a6b3;
        padding: 5px;
        font-size: 12px;
      }
    }

    // h2 {
    //   padding: 17px 0;
    //   border-bottom: 8px solid #F5F6FA;
    //   text-align: center;
    // }
    h3 {
      padding: 10px 0;
      margin-bottom: 10px;
      border-bottom: 1px solid #ebeef5;
    }

    &-component {
      padding: 0 20px;
      border-bottom: 8px solid #f5f6fa;
    }

    &-basic {
      padding: 0 20px;

      .Df-basic-inputnumber {
        margin-right: 10px;
      }
    }

    /deep/ .ivu-form-item {
      display: flex;
      align-items: center;

      &::before,
      &::after {
        display: none;
      }

      .ivu-form-item-label {
        width: 97px;
        line-height: 18px;
        font-size: 12px;
        text-align: left;
      }

      .ivu-input-number {
        width: 60px;
      }

      .ivu-form-item-content {
        margin-left: 0 !important;
        flex: 1;

        .ivu-tooltip {
          margin-right: 6px;

          .ivu-btn-ghost {
            padding: 2px 6px;
            display: flex;
            align-items: center;
            justify-content: center;

            .ivu-icon {
              font-size: 20px;
            }
          }

          &:last-child {
            .ivu-icon {
              transform: rotate(90deg);
            }
          }
        }
      }
    }
  }
</style>