<template>
  <div class="generator">
    <!-- 左侧组件选择 -->
    <div class="generator-left">
      <div class="generator-left-top">子表单</div>
      <div class="generator-left-bottom">
        <sub-item :list="formList" :formData="formData" />
      </div>
    </div>
    <!-- 中部组件展示 -->
    <div class="generator-center">
      <div class="generator-center-top">
        <span @click="reset"><Icon type="md-trash" /> 重置</span>
      </div>
      <div class="generator-center-bottom">
        <form-content
          :formData="formData"
          :hasAdd="false"
          @itemClick="itemClick"
          :curId="curId"
          ref="formContent" />
      </div>
    </div>
    <!-- 右侧组件属性与表单属性 -->
    <div class="generator-right">
      <Tabs value="component">
        <TabPane label="字段属性" name="component" class="comp-prop">
          <comp-prop :info="itemInfo" />
        </TabPane>
        <TabPane label="表单属性" name="form">
          <form-prop :config="formData.config" />
        </TabPane>
      </Tabs>
    </div>
  </div>
</template>
<script>
import SubItem from './components/SubItem'
import FormContent from './components/FormContent'
import FormProp from './components/FormProp'
import CompProp from './components/CompProp'
import { traverRows, transForEnd, transForFront } from '@/lib/utils'

export default {
  name: 'SubForm',
  components: {
    SubItem,
    FormContent,
    FormProp,
    CompProp,
  },
  props: {
    //父组件json值  必须传(子表单是根据 父表单生成的)
    defaultValue: String,
    // 子表单 json 值 (新增子表单是为null， 修改子表单存在值 )
    subDefaultValue: String,
  },
  data() {
    return {
      formData: {
        config: {
          labelPosition: 'left',
          labelWidth: 90,
          gutter: 20,
          size: 'default',
          labelColon: false,
        },
        schema: [],
      },
      curId: '', //当前 item id
      formList: [], //父表单 schema  用于左侧控制
    }
  },
  computed: {
    itemInfo() {
      const target = traverRows(this.formData.schema).find(v => v.id === this.curId)
      return target
    },
  },
  created() {
    this.formList = JSON.parse(this.defaultValue).schema
    this.init()
  },
  methods: {
    //初始化 子表单
    init() {
      // 修改
      if (this.subDefaultValue) {
        this.formData = transForFront(this.subDefaultValue)
      } else { //新增时  默认就是父辈的
        this.formData = transForFront(this.defaultValue)
      }
    },

    reset() {
      this.$Modal.confirm({
        title: '提示',
        content: '确定要重置吗？',
        onOk: () => {
          this.formData = transForFront(this.defaultValue)
        },
      })
    },
    itemClick(id) {
      this.curId = id
    },
    getJson() {
      const formData  = transForEnd(this.formData)
      return JSON.stringify(formData)
    },
  },
}
</script>
<style lang="scss" scoped>
.generator{
  width: 100%;
  height: 100%;
  padding: 15px;
  display: flex;
  text-align: left;
  background: #fff;
  &-left{
    width: 260px;
    &-top{
      height: 42px;
      border-bottom:1px solid  #f1e8e8;
      color: #00afff;
      font-size: 18px;
      font-weight: 600;
      line-height: 42px;
      padding-left: 12px;
    }
    &-bottom{
      height: calc(100% - 42px);
      padding: 12px;
      border-right:1px solid  #f1e8e8;
      overflow-y: scroll;
      position: relative;
      padding-bottom: 60px;
      &::-webkit-scrollbar {
        display: none;
      }
    }
  }
  &-center{
    flex:1;
    &-top{
      height: 42px;
      border-bottom:1px solid  #f1e8e8;
      >span{
        float: right;
        color: #17b3a3;
        cursor: pointer;
        font-size: 14px;
        line-height:42px;
        margin-right: 15px;
        font-weight: 600;
        &:hover{
          color: #45c2b5;
        }
        &:first-of-type{
          color: #f56c6c;
          &:hover{
          color:  #d27474
          }
        }
      }
    }
    &-bottom{
      padding: 12px;
      height: calc(100% - 42px);
      overflow-y: scroll;
      position: relative;
      &::-webkit-scrollbar {
        display: none;
      }
    }
  }
  &-right{
    width: 340px;
    border-left:1px solid  #f1e8e8;
    ::v-deep .ivu-tabs{
      height: 100%;
      .ivu-tabs-bar{
        height: 42px;
        border-color:  #f1e8e8;
        .ivu-tabs-nav-scroll{
          height: 42px;
          .ivu-tabs-nav{
            height: 42px;
            width: 100%;
            .ivu-tabs-ink-bar{
              width: 50%!important;
              background-color: #17b3a3;
            }
            .ivu-tabs-tab{
              width: 50%;
              text-align: center;
              font-weight: 600;
              &:hover{
                color:#17b3a3 ;
              }
            }
            .ivu-tabs-tab-active {
                color: #17b3a3;
            }
          }
        }
      }
      .ivu-tabs-content{
        height: calc(100% - 50px);
        .ivu-tabs-tabpane{
          padding:0 12px 12px;
          overflow-y: scroll;
          &::-webkit-scrollbar {
            display: none;
          }
        }
      }
    }
  }
}

.modal-item{
  margin-bottom:10px;
  >span{
    display: inline-block;
    width: 70px;
    text-align: right;
    margin-right: 10px;
  }
}

.comp-prop{
  padding: 0!important;
}
</style>